伪类选择器
伪类
很像类，但是不是类，是元素特殊状态的一种描述
写法：
/* 选中的是没有访问过的a元素 */
a:link{
color:red;
}
/* 选中的是访问过的a元素 */
a:visited{
color:blue;
}
动态伪类：
a:link{
color:red;
}
a:visited{
color:blue;
}
/* 选中的是鼠标悬浮状态的a元素 */
a:hover{
color:green;
}
/* 选中的是激活状态的a元素 */
a:active{
color:yellow;
}
/* 获取焦点的input元素 */
input:focus{
color:orange;
}
注意：
- a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
- a:active 必须被置于 a:hover 之后，才是有效的。
结构伪类：
语法：
<style>
/* 选中的是div的第一个儿子p元素（按照所有子元素、兄弟计算的） */
div>p:first-child{
color:red;
}
/* 选中的是div的后代p元素，且p的父级是谁无所谓，但p必须是其父亲的第一个儿子 */
div p:first-child{
color:red
}
/* 选中的是div的后代p元素，且p的父级是谁无所谓，但p必须是其父亲的第一个儿子 */
p:first-child{
color:red
}
</style>
<body>
<p>P1</p>
<p>P2</p>
<p>P3</p>
<p>P4</p>
<p>P5</p>
<p>P6</p>
<p>P7</p>
<p>P8</p>
<p>P9</p>
</body>
<style>
/* 选中的是div的第 3 个儿子p元素 */
div>p:nth-child(3){
color:red
}
/* 如果这个n的数值为0，则谁都选不中 */
div>p:nth-child(0){
color:red
}
/* 如果这个n的数值为空，则谁都中 */
div>p:nth-child(){
color:red
}
/* 如果这个n的数值为公式an+b，可以选中指定符合公式的选项 */
/* 如果这个n的数值为even、odd，可以选中奇偶数 */
div>p:nth-child(2*n){
color:red
}
/* 内容的形式为 an+b ，如下可以选中前5个 */
div>p:nth-child(-n + 5){
color:red
}
</style>
<body>
<p>P1</p>
<p>P2</p>
<p>P3</p>
<p>P4</p>
<p>P5</p>
<p>P6</p>
<p>P7</p>
<p>P8</p>
<p>P9</p>
</body>
关于n：
- 0或者不写：什么都选中
- n：选中所有的子元素
- 1~+∞：选中对应序号的子元素
- 2n或even：选中序号为偶数的子元素
- 2n+1或odd：选中序号为奇数的子元素
- -n+3：选中前3个
<style>
/* 选中的是div的第一个儿子p元素（按照所有同类型兄弟计算的） */
div>p:first-of-type{
color:red;
}
/* 选中的是div的最后一个儿子p元素（按照所有同类型兄弟计算的） */
div>p:last-of-type{
color:red;
}
</style>
<body>
<span>干扰项</span>
<p>P1</p>
<p>P2</p>
<p>P3</p>
<p>P4</p>
<p>P5</p>
<p>P6</p>
<p>P7</p>
<p>P8</p>
<p>P9</p>
</body>
<style>
/* 选择独生子 */
span:only-of-child{
color:red;
}
/* 选择同类型独生子 */
span:only-of-type{
color:red;
}
/* 选中的是一个没有内容的元素 */
div:empty{
width:100px;
height:100px;
background-color:red;
}
</style>
<body>
<!-- 有两个标签，不是独生子 -->
<div>
<span>干扰项</span>
<p>P1</p>
</div>
<!-- 有两个span标签，不是独生子 -->
<div>
<span>干扰项</span>
<p>P1</p>
<p>P2</p>
<p>P3</p>
</div>
<div></div>
</body>
否定伪类:
排除满足括号中条件的元素
<style>
/* 选中的是div的儿子p元素，但是排除类名为unchose的元素 */
div>p:not(.unchose){
color:red
}
/* 选中的是div的儿子p元素，但是排除title属性值为“标题”开头的元素 */
div>p:not([title^="标题"]){
color:red
}
/* 排除第一个子元素 */
div>p:not(:first-child){
color:red
}
</style>
<body>
<div>
<p>1234</p>
<p>1234</p>
<p>1234</p>
<p>1234</p>
<p class='unchose' title="标题1">1234</p>
<p class='unchose' title="标题12">1234</p>
<p class='unchose' title="标题123">1234</p>
<p class='unchose' title="标题1234">1234</p>
<p class='unchose' title="我不是标题">1234</p>
</div>
</body>
UI伪类：
/* 复选框或者单选框 是否被选择 */
input:checked{
width:100px;
height:100px;
}
/* 将禁用的input框变黑 */
input:disabled{
background-color:green;
}
/* 选中的是可用的input元素 */
input:enabled{
background-color:red;
}
目标伪类：
<style>
div{
background-color:blue;
height:300px;
}
div:target{
background-color:red
}
</style>
<body>
<!-- 当跳转某个链接的时候，对应的div就会改变颜色 -->
<a href="#one">1</a>
<a href="#two">1</a>
<a href="#three">1</a>
<a href="#four">1</a>
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
<div id="four">4</div>
</body>
语言伪类：根据指定的语言选择元素
<html lang="zh-CN">
<style>
div:lang(en){
color:red
}
:lang(zh-CN){
color:red
}
</style>
<body>
<div lang="en">Apple</div>
<div>苹果</div>
</body>
</html>
伪元素选择器
伪元素：很像元素，但不是元素，是元素中一些特殊位置
伪元素选择器：选中元素中的一些特殊位置
<style>
/* 选中的是div中的第一个文字 */
div::first-letter{
color:red;
font-size:40px;
}
/* 选中的是div中的第一行文字 */
div::first-line{
background-color:green;
}
/* 选中的是鼠标选中的文字 */
div::selection{
background-color:green;
color:red;
}
/* input框的placeholder的样式 */
input::placeholder{
background-color:green;
color:red;
}
/* 选中的是p开头的位置，随后创建一个子元素*/
p::before{
content:"$"
}
/* 选中的是p末尾的位置，随后创建一个子元素*/
p::after{
content:".00"
}
</style>
<div>
Lorem ipsum.
<input placeholder="请输入内容"/>
<p>198</p>
<p>298</p>
<p>398</p>
<p>498</p>
<p>598</p>
</div>
