CSS3 选择器

CSS若想要设置HTML的样式，首先第一步，需要先获将要被设置的HTML元素。这个获取的工作，由CSS选择器完成。

元素选择器

直接标签名，直接进行选择。在上一章的代码，我们做过了演示。

p {
 font-size: 20px; <!-- 整个页面的p标签都被选择 -->
}

<!-- 范围限定 -->
div p {
 font-size: 20px; <!-- 只选择到div标签里面的p标签  -->
}

<p>简明教程1</p>
<div>
 <p>简明教程2</p>
</div>

类选择器

给HTML标签设置一个class的属性，通过.类名进行选择。

.jmjc {
 font-size: 20px;
}

<!-- 这样也行 -->
p.jmjc {
 font-size: 20px;
}

<!-- 选择器，做范围限定 -->
div .jmjc {
 font-size: 20px;
}

<p class="jmjc">简明教程1</p>
<div>
 <p class="jmjc">简明教程2</p>
</div>

id选择器

给HTML标签设置一个id的属性，通过#id名进行选择。需要注意，class可以是一组，多个相同，ID必须是唯一的。

#jmjc {
 font-size: 20px;
}

<p id="jmjc">简明教程1</p>
<p id="jmjc">简明教程2</p> <!-- 错误，重复了 -->

属性选择器

通过标签的属性值，进行选择。

[type="text"] {
 font-size: 20px;
}

<input type="text"> <!-- 被选中 -->
<input type="password">

合并选择

通过,号分割，把不同的元素但需要设置相同样式合并在一起。

p {
  font-size: 20px; <!-- p 需要20字体-->
}

div a {
  font-size: 20px; <!-- a 需要20字体-->
}

<!-- 合并在一起-->
p, div a {
 font-size: 20px; 
}

<p>简明教程1</p>
<div>
 <a href="">简明教程2</a>
</div>

子元素选择

子元素过滤器

<!-- 选择第一个p -->
div p:first-child {
 font-size: 18px;
}

<!-- 指定选择第几个p -->
div p:nth-child(2) {
 font-size: 20px;
}

<!-- 选择最后一个p -->
div p:last-child {
 font-size: 22px;
}

<div>
 <p>简明教程1</p>
 <p>简明教程2</p>
 <p>简明教程3</p>
</div>

掌握了如何选择，后面的工作就是对元素样式的设置，很快我们的单调的HTML页面将变得美丽。