综合教程

小程序样式课程-第3课-id选择器和派生选择器

时间:2018/12/20 13:32:46  作者:互联网  来源:网络转载  查看:2595  评论:0
内容摘要:在现代布局中,id 选择器常常用于建立派生选择器。#sidebar p {     font-style: italic;     text-align: right;  &nbs...
在现代布局中,id 选择器常常用于建立派生选择器。

#sidebar p {

     font-style: italic;

     text-align: right;

     margin-top: 0.5em;

}

上面的样式只会应用于出现在 id sidebar 的元素内的段落。这个元素很可能是 div 或者是表格单元,尽管它也可能是一个表格或者其他块级元素。它甚至可以是一个内联元素,比如 <em></em> 或者 <span></span>,不过这样的用法是非法的,因为不可以在内联元素 <span> 中嵌入 <p>

一个选择器,多种用法

即使被标注为 sidebar 的元素只能在文档中出现一次,这个 id 选择器作为派生选择器也可以被使用很多次:

#sidebar p {

     font-style: italic;

     text-align: right;

     margin-top: 0.5em;

}

#sidebar h2 {

     font-size: 1em;

     font-weight: normal;

     font-style: italic;

     margin: 0;

     line-height: 1.5;

     text-align: right;

}

在这里,与页面中的其他 p 元素明显不同的是,sidebar 内的 p 元素得到了特殊的处理,同时,与页面中其他所有 h2 元素明显不同的是,sidebar 中的 h2 元素也得到了不同的特殊处理。

1.2.3 id 选择器和派生选择器-小程序应用

我们尝试用上小节的知识点来实现:让view组件里面的所有text文本显示为红色。

Wxml代码

<view>

  <text>普通文本</text>

  <text id="myid">ID选择器里面的文本</text>

</view>

 

<view id="myid2">

  <text>普通文本</text>

</view>

Wxss代码

/* 元素选择器 */

page{

  background-color:  gainsboro;

}

view{

 background-color:  aliceblue;

}

 

/* id选择器 */

#myid{

  color: white;background-color: black;

}

#myid2 text{

  color:red;

}

效果如下图

  小程序样式课程-第3课-id选择器和派生选择器

欢迎大家支持我的视频课程:微信小程序样式开发入门 
小程序样式课程-第1课-样式基础-元素选择器




相关评论
评论者:      验证码:  点击获取验证码
咨询QQ/微信:45157718 点击这里给我发消息 | 电话:13516821613 | 浙江杭州余杭区东港路118号雷恩科技创新园 | 网站支持:杭州摇亿网络科技 | 浙ICP备06056032号-6 |