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

怼烎@ 2024-02-19 16:23 60阅读 0赞

### 小程序中的WXSS(css)选择器课程-选择器的分组 ###

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

选择器分组  
假设希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：

h2, p {color:gray;}

将 h2 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式（color:gray;）将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。如果没有这个逗号，那么规则的含义将完全不同。参见后代选择器。  
可以将任意多个选择器分组在一起，对此没有任何限制。  
例如，如果您想把很多元素显示为灰色，可以使用类似如下的规则：

body, h2, p, table, th, td, pre, strong, em {color:gray;}

提示：通过分组，创作者可以将某些类型的样式“压缩”在一起，这样就可以得到更简洁的样式表。  
以下的两组规则能得到同样的结果，不过可以很清楚地看出哪一个写起来更容易：

/* no grouping */
    h1 {color:blue;}
    h2 {color:blue;}
    h3 {color:blue;}
    h4 {color:blue;}
    h5 {color:blue;}
    h6 {color:blue;}
    
    /* grouping */
    h1, h2, h3, h4, h5, h6 {color:blue;}

分组提供了一些有意思的选择。例如，下例中的所有规则分组都是等价的，每个组只是展示了对选择器和声明分组的不同方法：

/* group 1 */
    h1 {color:silver; background:white;}
    h2 {color:silver; background:gray;}
    h3 {color:white; background:gray;}
    h4 {color:silver; background:white;}
    b {color:gray; background:white;}
    
    /* group 2 */
    h1, h2, h4 {color:silver;}
    h2, h3 {background:gray;}
    h1, h4, b {background:white;}
    h3 {color:white;}
    b {color:gray;}
    
    /* group 3 */
    h1, h4 {color:silver; background:white;}
    h2 {color:silver;}
    h3 {color:white;}
    h2, h3 {background:gray;}
    b {color:gray; background:white;}

通配符选择器  
CSS2 引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个星号（\*）。该选择器可以与任何元素匹配，就像是一个通配符。  
例如，下面的规则可以使文档中的每个元素都为红色：

* {color:red;}

这个声明等价于列出了文档中所有元素的一个分组选择器。利用通配选择器，只需敲一次键（仅一个星号）就能使文档中所有元素的 color 属性值指定为 red。  
声明分组  
我们既可以对选择器进行分组，也可以对声明分组。  
假设您希望所有 h1 元素都有红色背景，并使用 28 像素高的 Verdana 字体显示为蓝色文本，可以写以下样式：

h1 {font: 28px Verdana;}
    h1 {color: blue;}
    h1 {background: red;}

但是上面这种做法的效率并不高。尤其是当我们为一个有多个样式的元素创建这样一个列表时会很麻烦。相反，我们可以将声明分组在一起：

h1 {font: 28px Verdana; color: white; background: black;}

这与前面的 3 行样式表的效果完全相同。  
注意，对声明分组，一定要在各个声明的最后使用分号，这很重要。浏览器会忽略样式表中的空白符。只要加了分号，就可以毫无顾忌地采用以下格式建立样式：

h1 {
      font: 28px Verdana;
      color: blue;
      background: red;
      }

### 小程序应用 ###

> Wxml代码

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

> Wxss代码

/* 元素选择器 */
    page{
      background-color:  gainsboro;
    }
    view{
     background-color:  aliceblue;
    }
    text,input,label{
      color: red;
    }

效果如图  
![在这里插入图片描述][20190123101312346.png]  
[欢迎大家学习我的视频课程：微信小程序界面设计-小程序中的WXSS(css)选择器课程][-_WXSS_css]  
![微信小程序界面设计小程序中的WXSS(css)选择器课程-选择器的分组][WXSS_css_-]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[20190123101312346.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/beeacd04efd444b1af0d6f9919f8a40b.png
[-_WXSS_css]: https://ke.qq.com/course/371755?tuin=2b10d56
[WXSS_css_-]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/0f805a6c5804434498ea7614ae5dccb2.png