css分组选择器的定义方式是怎么样的?


css分组选择器的定义方式是怎么样的?分组选择器选取所有具有相同样式定义的 HTML 元素,用英文小写逗号的 , 来分隔每个选择器,举例如下:

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

已上代码分别给元素h1、h2、p都设置了相同的两个样式定义:第一个是属性text-align(水平对齐方式),对应的值center(居中);第二个是属性color(颜色),对应的值red(红色)。

这个时候,网友们最好是对选择器进行分组,以最大程度地缩减代码,写法也很简单,用英文小写逗号的 , 来分隔每个选择器即可:

h1, h2, p {
  text-align: center;
  color: red;
}

css分组选择器的定义方式可以将任意多个选择器分组在一起,对此没有任何限制。

可能有些网友就会问了:范如乐,你上面举例的是相同的样式,如果不同的元素之间定义的样式有一部分相同,而有一部分又不同应该怎么分组呢?

范如乐:原理是一样的,把相同的那部分样式分别进行分组即可,举例如下:

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;}

分组后如下:

h1, h2, h4 {color:silver;}
h2, h3 {background:gray;}
h1, h4, b {background:white;}
h3 {color:white;}
b {color:gray;}

当然也可以这样分:

h1, h4 {color:silver; background:white;}
h2 {color:silver;}
h3 {color:white;}
h2, h3 {background:gray;}
b {color:gray; background:white;}

主要是看你分组的时候,取的是哪部分相同的属性和值,上面3组样式的显示效果都是一样的。

转载时需注明来源!首发:如乐建站之家;原文链接:
https://www.rulejianzhan.com/css/7976.html
如乐建站之家创始人——范如乐:

如乐建站之家创始人范如乐  联系Q Q:349142701
  联系微信:349142701
  联系电话:13189611692

【如乐建站之家】由范如乐于2013年创建至今,立志于解决新手不会快速自己建网站的痛苦,让你也能零基础快速学会自己建网站!详细教程点击下图:




热门文章: