微信小程序样式-id 派生选择器的使用教程

r囧r小猫 2024-02-19 15:25 52阅读 0赞

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]

**id 选择器和派生选择器**  
在现代布局中，id 选择器常常用于建立派生选择器。

#sidebar p {
    	font-style: italic;
    	text-align: right;
    	margin-top: 0.5em;
    }

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

。  
一个选择器，多种用法  
即使被标注为 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 元素也得到了不同的特殊处理。

**小程序应用**  
我们尝试用上小节的知识点来实现：让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;
    }

效果如下图  
![在这里插入图片描述][2019010510513253.png]  
[欢迎大家收看我的视频课程 ： 微信小程序界面设计-样式入门到精通][_ _-]  
![微信小程序界面设计-样式入门到精通][-]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[2019010510513253.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/f5a1034b9e15496d808ea58ee9860cbd.png
[_ _-]: https://ke.qq.com/course/368613?tuin=2b10d56
[-]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/0326200084d54b16bce8a3f40d21f95b.png