CSS分组及选择器的嵌套

2020 年 12 月 28 日 607点热度 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,转载请注明出处,谢谢!

贾小宝宝

这个人很懒,什么都没留下

文章评论