CSS分组及选择器的嵌套

2020 年 12 月 28 日 681点热度 0人点赞 0条评论

在CSS中会有很多元素具有相同的样式，为了减少代码，我们可以使用分组选择器

h1 {
    color: green;
}

h2 {
    color: green;
}

p {
    color: green;
}

下面的代码和上面的效果是一样的，不同的选择器之间我们用逗号进行分隔

h1,h2,p {
    color: green;
}

嵌套选择器用于选择器内部的选择器的样式，例如

p{ }: 为所有 p 元素指定一个样式。
.a{ }: 为所有 class="a" 的元素指定一个样式。
.a p{ }: 为所有 class="a" 元素内的 p 元素指定一个样式。
p.a{ }: 为所有 class="a" 的 p 元素指定一个样式。

上面的描述可能还有点拗口，我们还是用代码实例来进行最终效果的展示

<html>
 <head> 
  <title>test</title> 
  <style>
p {
    color: blue;
    text-align: center;
}
.a {
    background-color: red;
}
.a p {
    color: white;
}
p.a {
    text-decoration: underline;
    color: white;
}
</style> 
 </head> 
 <body> 
  <p>这个段落使用了p元素的样式，蓝色文本，居中对齐。</p> 
  <div class="a">
   这个段落使用了a类样式，红色背景
  </div> 
  <div class="a"> 
   <p>这个段落使用了a类内的p元素，即.a p样式，红色背景，白色字体，居中显示</p> 
  </div> 
  <p class="a">这个段落 为所有 a类的p元素指定了一个样式，即p.a样式，白色字体，居中显示，红色背景，下划线</p>  
 </body>
</html>

最终运行效果如下：
请输入图片描述

文章来源：https://www.fi32.com/diannao/17.html，转载请注明出处，谢谢！

CSS分组及选择器的嵌套

文章评论