# CSS 选择器

W3C 中对选择器的描述

# 后代 子元素 相邻元素

这三者长得比较像, 放在一起; 三个人选择的范围依次缩小;

# 后代选择器

div span {}

只要 div 标签下出现的 span , 都会被渲染;

# 子元素选择器

div > span {}

对 div 标签下所有的 第一级孩子 span 标签进行渲染;

# 相邻元素选择器

div + span {}

与 div 标签同级并且紧临的 span 标签, 将会被渲染;

# :link :visited :focus :hover :active

除了 :focus 之外的四个人都属于链接伪类选择器;

# :nth-child :nth-of-type

两个人都属于位置结构伪类选择器的范畴;

:nth-child 的选择范围要比 :nth-of-type 大;

前者可以无视标签类别和名称, 后者会对标签的名称和类别进行限定;

这两个选择器的下标从 1 开始, 都支持简单的公式进行计算;

# :nth-child 选择器

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素, 不论元素的类型.

这个选择器很容易理解成一个错误形式:

<!-- 尝试修改 两个 子 div 的样式 -->
<div class='a'>
    <span></span>
    <div></div>
    <div></div>
</div>

<style>
    .a {}
    /* 企图修改 class 为 a 的 div 下的两个 div 样式 */
    .a:nth-child(1) {}
    .a:nth-child(2) {}
</style>

实际上, 这里的 1 将会指向 span , 2 会指向第 1 个子 div , 正确的写法是:

<div class='a'>
    <span></span>
    <div></div>
    <div></div>
</div>

<style>
    .a {}
    /* 正确修改 div 下的两个 div 样式 */
    .a div:nth-child(2) {}
    .a div:nth-child(3) {}
</style>

这里添加了在使用 nth-child 选择器时, 添加了 div , 并且修改了下标;

这个选择器在选择的过程中, 需要满足两个条件, 第一, 的确有这个下标的子标签; 第二, 这个下标应当满足 :nth-child 冒号前面的标签名称或类名的限制;

# :nth-of-type 选择器

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

还是 :nth-child 选择器的例子:

<!-- 尝试修改 两个 子 div 的样式 -->
<div class='a'>
    <span></span>
    <div></div>
    <div></div>
</div>

<style>
    .a {}
    /* 修改 class 为 a 的 div 下的两个 div 样式 */
    .a div:nth-of-type(1) {}
    .a div:nth-of-type(2) {}
</style>

这个选择器选择的是, a 标签下, 某一个具体的 div 标签;

# CSS 伪元素

伪元素是一个假的元素, 但是它们对用户是可见的, 只能通过css来操作,

这个地方我们可以在看一下伪元素清除浮动的 CSS

.clear-float:after {
    content: '.';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clear-float 将被作用在使用了浮动的子元素的父元素标签上,

在伪元素中如果没有 content 属性, 伪元素是无效的, 所以会有 content ;
默认情况下插入的伪元素是内联元素, 所以需要将其设置为 块级元素 才可以起到像 <div sytle="clear:both"></div> 的效果;