14.CSS组合选择器

组合选择器

• 首先，我们看下面的一段CSS代码

h1 {
  font-size: 26px;
  font-family: sans-serif;
  text-transform: uppercase;
  font-style: italic;
}

h2 {
  font-size: 40px;
  font-family: sans-serif;
}

h3 {
  font-size: 30px;
  font-family: sans-serif;
}

h4 {
  font-size: 20px;
  font-family: sans-serif;
  text-transform: uppercase;
  text-align: center;
}
p {
  font-size: 22px;
  font-family: sans-serif;
  line-height: 1.5;
}

li {
  font-size: 20px;
  font-family: sans-serif;
}

• 有没有发现多个标签中有同样的CSS样式？例如字体都是无衬线字体，那边每次这样繁琐的写一遍并不是一个好的解决方案，我们可以使用组合选择器的方式去写这段CSS代码，如下所示：

h1,h2,h3,h4,p,li {
  font-family: sans-serif;
}
h1 {
  font-size: 26px;
  text-transform: uppercase;
  font-style: italic;
}

h2 {
  font-size: 40px;
}

h3 {
  font-size: 30px;
}

h4 {
  font-size: 20px;
  text-transform: uppercase;
  text-align: center;
}
p {
  font-size: 22px;
  line-height: 1.5;
}

li {
  font-size: 20px;
}

后代选择器

• 首先我们看下面一段代码

<!--HTML代码-->
<p>
    正文
</p>
<footer>
<p>
    页脚内容
    </p>
</footer>

# CSS代码
p {
    font-size:22px;
}

• 上述代码中不论是页脚还是正文都是22px的大小，但是实际情况中页脚的内容对于用户来说不是一个很重要的内容，肯定是比正文要小，这是我们可以使用后代选择器的写法，如下所示

# CSS代码
p {
    font-size:22px;
}

footer p {
    font-size: 16px;
}

• 这样仅改变了页脚的大小，而不改变P标签的大小

注：但是这种上述的方式并不是我们一个很好的一个解决方案，因为这个在一定程度上增加我们的编码量，如果我们能给每个元素起一个名字，那么我们可以更好的去定位他，下一节我们将学习类选择器和ID选择器。