属性选择器
如title属性
后代选择器（最重要）
如：
div span {
color : red;
}
该代码即选中所有div元素下面的所有span元素（包括直接、间接子元素）
子选择器
如：
div > span {
color : red;
}
该代码即选中所有div元素下面的直接span子元素
交集选择器
如：
div.one {
color : red;
}
该代码即选中元素是div且class属性是one的元素
并集选择器
div,.one {
color : red;
}
该代码即选中元素是div+class属性是one的所有元素
伪类
1. 动态伪类
- a链接的伪类
a:link 未访问的锚点
a:visiter 访问过的锚点
a:hover 鼠标悬浮的锚点
a:active 激活的链接（点击链接但未松开）
PS：hover / active也可以作用在其他元素上；若直接给a设置样式，相当于在a的所有伪类设置样式 - 去掉a元素的焦点状态
- 去掉a元素获取焦点时的边框（假装去掉）
a:focus{
outline:none;
}
- 使a元素获取不了焦点
设置a元素和属性tabindex="-1"
- focus伪类
:focus指当前拥有输入焦点的元素（适用于a元素和input元素）
input:focus {
background-color:red; // 当输入框获取焦点时背景变红色
}
PS：动态伪类编写顺序建议： :link、:visited、:focus、:hover、:active
2. 结构伪类
- :nth-child(n)：选中页面中作为第n个子类的所有元素，若n不赋值，则取全部元素
- :nth-child(2n / even)：选中页面所有偶数的元素
- :nth-child(2n+1 / odd)：选中页面所有奇数的元素
- :nth-child(-n+3)：可用于选中页面中元素的前三个
- :nth-last-child(n)：倒数第三个元素
- :nth-of-type(n)：选中同种元素下的第n个元素
- :nth-last-of-type(n)：选中同种元素下的倒数第n个元素
- :root：匹配元素在文档中的根元素，在HTML中永远是HTML
- :empty：选中内容为空的元素
3. 目标伪类
- :target伪类：控制目标选中元素的style
4. 元素状态伪类
- :disabled伪类：如:disabled、:enable、:checked
:disabled {
color:red; // 将设置disabled的元素颜色置为红色
}
5. 否定伪类
- :not(元素)
:not(html):not(body):not(div) {
background:red; // 除div外所有元素背景色红
}
伪元素（可以看成行内元素） // 借鉴自：css伪元素
（1）定义：之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。
（2）举例
::first-line和::first-letter
- ::first-line：选中第一行设置样式
- ::first-letter：选中第一个字母设置样式
（3）结构说明
span::before {
content: "1"; // content里可以加文字，也可以加图片；content不能省略
color:red; // 给content设置样式
}
（4）举个栗子，下面的这个代码
<p>bjyx!</p>
<style>
p:before{content: "hello "}
p:after{content: "you are handsome!"}
</style>
等价于下面的代码
<p>
<span>hello </span>
wonyun!
<span> you are handsome!</span>
</p>
（5）伪元素的特点
- 伪元素不属于文档，所以js无法操作它
- 伪元素属于主元素的一部分，因此点击伪元素触发的是主元素的click事件
- 原文说块级元素才能有:before, :after，其实是不妥的，大部分行级元素也可以设置伪元素，但是像img可替换元素，因为其外观和尺寸有外部资源决定，那么如果外部资源正确加载，就会替换掉其内部内容，这时伪元素也会被替换掉，但是当外部资源加载失败时，设置的伪元素是可以起作用的。
（6）伪元素的常见使用场景
①清除浮动是前端最常见的问题，有一种做法是使用一个空的页面元素如div来清除浮动，但是这种做法增加毫无语义的页面元素，而且占用dom节点。更可取的做法是利用伪元素来清除浮动：
<div class="l-form-row">
<div class="l-form-label"></div>
....
</div>
<style>
.l-form-row:after {
clear: both;
content: "\0020";
display: block;
height: 0;
overflow: hidden
}
</style>
这样，class=l-form-row的元素内部任何浮动都能清除掉，不用额外添加无意义的元素。
②利用attr()方法来实现某些动态功能
那么可以通过伪元素配合样式能够让未加载的图片看起来真的像破裂的效果，如下图所示：
<img>是一个替换元素，其外观和尺寸是由外部资源来决定的，当外部图片资源加载失败时其会显示破裂图片和alt文字，尺寸仅由其自身内容决定。这时<img>元素可以使用伪元素:before和:after，因为其元素内容没有被替换；利用attr()来获取图片alt属性值作为伪元素:after的content内容来替换img的内容，并运用适当的样式从而完成：图片加载成功时显示正常的图片，加载失败时显示图片破裂效果的样式，具体代码参考：
img{
min-height: 50px;
position: relative;
}
img:before: {
content: " ";
display: block;
position: absolute;
top: -10px;
left: 0;
height: calc(100% + 10px);
width: 100%;
backgound-color: rgb(230, 230,230);
border: 2px dotted rgb(200,200,200);
border-radius: 5px;
}
img: {
content: '\f127" " Broken Image of " attr(alt);
display: block;
font-size: 16px;
font-style: normal;
font-family: FontAwesome;
color: rgb(100,100,100)
position: absolute;
top: 5px;
left: 0;
width: 100%;
text-align: center;
}
③特效使用
利用这两个伪元素，可以实现各种效果，如放大镜、叉叉、箭头、三角符等，也可轻易实现如下效果
代码实现如下：
a {
position: relative;
display: inline-block;
outline: none;
text-decoration: none;
color: #000;
font-size: 32px;
padding: 5px 10px;
}
a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "\5B"; left: -20px; }
a:hover::after { content: "\5D"; right: -20px; }
