微信小程序界面设计小程序中的WXSS(css)选择器课程-子元素选择器

爱被打了一巴掌 2024-02-19 16:24 55阅读 0赞

### 小程序中的WXSS(css)选择器课程-子元素选择器 ###

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

后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。  
选择子元素  
如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。  
例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong {color:red;}

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

<!DOCTYPE HTML>
    <html>
    <head>
    <style type="text/css">
    h1 > strong {color:red;}
    </style>
    </head>
    
    <body>
    <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
    <h1>This is <em>really <strong>very</strong></em> important.</h1>
    </body>
    </html>

效果图

![在这里插入图片描述][20190123102514672.png]

语法解释  
您应该已经注意到了，子选择器使用了大于号（子结合符）。  
子结合符两边可以有空白符，这是可选的。因此，以下写法都没有问题：

h1 > strong
    h1> strong
    h1 >strong
    h1>strong

如果从右向左读，选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。  
结合后代选择器和子选择器  
请看下面这个选择器：

table.company td > p

上面的选择器会选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性。

### 小程序应用 ###

[防采集标记：黄菊华老师的课程和资料][Link 1]

> Wxml代码

> Wxss代码

navigator > text{ color: blue;}
    view > view { color: green;}

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]

[欢迎大家学习我的视频课程：微信小程序界面设计-小程序中的WXSS(css)选择器课程][-_WXSS_css]

![微信小程序界面设计小程序中的WXSS(css)选择器课程-子元素选择器][WXSS_css_-]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[20190123102514672.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/354d69c948a346479ff385388b914a72.png
[Link 1]: http://www.4317.org/ke/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/25682b8de72946f6a5fac6b6a7db6dd0.png
[-_WXSS_css]: https://ke.qq.com/course/371755?tuin=2b10d56
[WXSS_css_-]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/859eb2ff060c4e5097856a83326db453.png