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组样式的显示效果都是一样的。

转载时请注明来源!首发:如乐建站之家
原文链接:
http://www.rulejianzhan.com/css/7976.html

作者如乐老师  如乐老师的QQ:349142701

  如乐老师的微信:349142701

  如乐老师的电话:13189611692

如果你有时间和精力自学,没必要找我帮你建网站,因为我写了快速建站教程,点击下图学习:



鼓励 知识小手