文章目录
- 基本选择器
- 复合选择器
- 交集选择器
- 并集选择器
- 后代选择器
- 子代选择器
- 兄弟选择器
- 相邻兄弟选择器
- 通用兄弟选择器
- 属性选择器
- 伪类选择器
- 动态伪类
- 结构伪类
- :first-child
- :last-child
- :nth-child
- :nth-last-child
- :first-of-type
- :last-of-type
- :nth-of-type
- :nth-last-of-type
- :only-child
- :only-of-type
- :root
- :empty
- 否定伪类
- :not
- UI伪类
- 目标伪类
- 语言伪类
- 伪元素选择器
- ::first-letter
- ::first-line
- ::first-selection
- input::placeholder
- ::before和::after
- 选择器优先级
b站学习视频
基本选择器
- 通配选择器
*{属性名: 属性值} - 元素选择器
元素名{属性名: 属性值} - 类选择器
.类名{属性名: 属性值} - 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：元素、伪元素选择器个数
权重大的优先级高，权重相同看顺序，后来者居上。
函数进行重定向)
