基本选择器
- 通配选择器
*{属性名: 属性值} - 元素选择器
元素名{属性名: 属性值} - 类选择器
.类名{属性名: 属性值} - ID选择器
.ID名{属性名: 属性值}
复合选择器
复合（组合）
交集选择器
同时满足多个基本选择器的情况（且）：
- 元素+类
p.big（元素后面紧跟类选择器，用得较多） - 元素+类+ID
p.big#id（不太用，而是直接用ID选择器） - 多个类
.big.red（用得少，可以另起一个新的类名）
并集选择器
满足某一个基本选择器的情况（或）：选择器之间用逗号隔开。
例如：.big,.red,#id,p{属性名: 属性值}
后代选择器
用空格隔开，以元素为例：ul li{}、ul li span{}
也可以有ID、类的组合。
子代选择器
用>，左右也可以加空格div > p或者div>p：
<style>
div > p{
color: aqua;
}
div>div>p{
color: blueviolet;
}
</style>
<div>
<p>Ken</p>
<p>Jack</p>
<p>Lucy</p>
<div>
<p>John</p>
</div>
</div>
兄弟选择器
相邻兄弟选择器
用+（左右也可以加空格），例如下面是选择div下面紧紧相邻的p元素。
如果下面相邻的那个不是p元素，则不会继续向下寻找。
<style>
div + p {
color: aqua;
}
</style>
</head>
<body>
<p>Jack</p>
<div>Ken</div>
<p>Elaine</p>
<p>Tom</p>
通用兄弟选择器
用~，则选择div下面所有兄弟p元素：div~p{}
属性选择器
- 选择具有某个属性的元素
例如，具有title属性的p元素：
<style>
[title] {
color: aqua;
}
</style>
</head>
<body>
<p title="J">Jack</p>
<p>Ken</p>
<p>Elaine</p>
- 选择具有某个属性，且属性值为xxx的元素
<style>
[title="K"] {
color: aqua;
}
</style>
</head>
<body>
<p title="J">Jack</p>
<p title="K">Ken</p>
<p>Elaine</p>
- 选择具有某个属性，且属性值以xxx开头的元素
例如，以K开头：
<style>
[title^="K"] {
color: aqua;
}
</style>
</head>
<body>
<p title="J">Jack</p>
<p title="K">Ken</p>
<p title="K2">Elaine</p>
- 属性值以xxx结尾的元素：
[title$="K"] - 属性值包含xxx的元素：
[title*="K"]
伪类选择器
伪类：是元素特殊状态的一种描述，很像类，但不是类。
伪类选择器，可以选中特殊状态的元素。
动态伪类
因为和鼠标交互密切相关，所以是“动态”的。
- a标签
例如，超链接a，有访问过和未访问过两种状态，还有鼠标悬浮时、鼠标点击（激活）时的两种状态。
设置这四种状态时，必须按照lvha的顺序，否则有的状态将不起作用。因为link->hover->active是正常的交互顺序，visited->hover->active也是正常的交互顺序，合并后就是lvha顺序。
<style>
/* 没访问过时 */
a:link{
color: gray;
}
/* 访问过 */
a:visited{
color: aqua;
}
/* 鼠标悬浮时 */
a:hover{
color:blueviolet
}
/* 激活时，即鼠标点击落下时 */
a:active{
color:blue;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">AAA</a>
<a href="http://www.jd.com">BBB</a>
</body>
- input、select标签的focus（聚焦）
当鼠标点击文本框（即将输入文本），或者点击下拉框时（即将选择某一项）的状态。
表单类的元素才有这个状态。
交互方式有：鼠标点击、触摸点击、tab键切换。
<style>
input:focus{
background-color: aquamarine;
}
select:focus{
background-color: aquamarine;
}
</style>
</head>
<body>
<input type="text"/>
<select>
<option value="1">A</option>
<option value="2">B</option>
</select>
结构伪类
:first-child
选择第一个儿子元素:first-child
用div>p:first-child或者p:first-child：
<style>
div>p:first-child{
background-color: aquamarine;
}
</style>
</head>
<body>
<div>
<p>Ken</p>
<p>Elaine</p>
<p>Jack</p>
</div>
是先找第一个儿子，再判断是不是p元素。
例如应用到下面结构时，则没有匹配的元素（第一个儿子span不是p元素）：
<div>
<span>John</span>
<p>Ken</p>
<p>Elaine</p>
<p>Jack</p>
</div>
不是找第一个p元素，而是先找到第一个元素span，再判断是不是p。
:last-child
找最后一个儿子元素。
:nth-child
从1开始，第n个儿子元素。
<style>
p:nth-child(3){
background-color: aquamarine;
}
</style>
</head>
<body>
<div>
<span>John</span>
<p>Ken</p>
<p>Elaine</p>
<p>Jack</p>
</div>
参数（必须是an+b的形式）：
- 空、0、超出范围，则不起作用
- n，则针对所有儿子
- 2n或者even，则针对第偶数个的儿子
- 2n+1或者odd，则针对第奇数个儿子
- 针对前5个：-n+5。（不能写成5-n）
:nth-last-child
相比:nth-child，是倒着数的。
:first-of-type
在满足条件的p元素中找第一个：
<style>
p:first-of-type{
background-color: aquamarine;
}
</style>
</head>
<body>
<div>
<span>John</span>
<p>Ken</p>
<p>Elaine</p>
<p>Jack</p>
</div>
:last-of-type
同类型中找最后一个
:nth-of-type
同类型中找第n个
:nth-last-of-type
同类型中倒数第n个
:only-child
例如p:only-child，表示选中一个p，这个p必须是其父元素的唯一儿子。也就是没有兄弟的p元素。
:only-of-type
例如：p:only-of-type，表示没有同类型的兄弟p元素。
:root
选择html根元素，也就是html元素。
:empty
选中没有内容的div元素（空格也不能有）：
<style>
div:empty{
height: 100px;
width: 100px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
否定伪类
:not
选择div中的p，但是排除类名为k的p
<style>
div p:not(.k){
color: red;
}
</style>
</head>
<body>
<div>
<p>A</p>
<p>A</p>
<p class="k">A</p>
<p class="k">A</p>
</div>
还可以排除属性：div p:not([title='ttt'])；
排除第一个儿子：div p:not(:first-child)
UI伪类
- :checked
- :disabled
- :enabled
目标伪类
:target，选中锚点（a标签跳转到本页的锚点）所指向的伪类。
例如，点击某个a元素后，地址栏的#后面内容会变，并且跳转到对应div（这个div就是目标div，可以为其设置样式）：
<style>
div{
background-color: gray;
margin-bottom: 20px;
height: 100px;
}
div:target{
background-color: aquamarine;
}
</style>
</head>
<body>
<a href="#d1">去看第1个</a>
<a href="#d2">去看第2个</a>
<a href="#d3">去看第3个</a>
<a href="#d4">去看第4个</a>
<a href="#d5">去看第5个</a>
<a href="#d6">去看第6个</a>
<div id="d1">第1个</div>
<div id="d2">第2个</div>
<div id="d3">第3个</div>
<div id="d4">第4个</div>
<div id="d5">第5个</div>
<div id="d6">第6个</div>
</body>
语言伪类
根据指定的语言选择元素（本质是看lang属性的值）。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div:lang(en){
color: red;
}
</style>
</head>
<body>
<div>hello</div>
<div lang="en">world</div>
</body>
</html>
在html标签中设置了默认的语言：lang="zh-CN"表示简体中文。所以元素默认带有该语言属性。
单独设置了一个lang为en（英文）的div，为其设置样式。
也可以使用属性选择器实现该效果：
div[lang="en"]{
color: red;
}
伪元素选择器
很像元素，但不是元素，是元素中的一些特殊位置。
::first-letter
设置第一个字母的样式：
<style>
div::first-letter{
color: red;
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet.</div>
</body>
::first-line
第一行
::first-selection
鼠标选中的内容
input::placeholder
设置input提示文字的样式（输入内容的样式不受影响）
<style>
input::placeholder{
color: lightblue;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入内容"/>
</body>
::before和::after
<style>
div::before{
content: '￥';
}
div::after{
content: '.00';
}
</style>
</head>
<body>
<div>199</div>
<div>299</div>
<div>399</div>
<div>499</div>
</body>
::before和::after中的内容是默认无法用鼠标选中的。
选中的是div最开始的位置、最后的位置，随后创建一个子元素。
css2没有严格区分伪类和伪元素，可以只用一个冒号。
css3区分了两者，要求伪元素使用两个冒号。
大部分伪元素使用一个冒号也可以生效，除了::selection和::placeholer。
选择器优先级
简单描述：!important>行内>ID>类>元素>通配>继承的样式
计算权重，格式：（a，b，c）
a：ID选择器个数
b：类、伪类、属性选择器个数
c：元素、伪元素选择器个数
权重大的优先级高，权重相同看顺序，后来者居上。