CSS伪类/伪元素包括:
Link相关的
- :link
- :visited
- :hover
- :active
Link和Input相关的
- :focus
- :target
- :enabled
- :disabled
- :checked
- :indeterminate //没有默认选中的一组单选按钮
- :required
- :optional
- :read-only
- :read-write
位置数目相关的
- :root 基本上就是选中html了,除非某些特殊情况比如xml文档中
- :first-child是父节点的第一个子元素
- :last-child是父节点的最后一个元素
- :nth-child() 括号类可以有多重写法比如2n+1,关键字odd,even分别选中奇数和偶数,或填写具体数字,只选该数字的节点
- :nth-of-type() 类似nth-child,但是能应用到不同类型
- :first-of-type 选中父节点中的第一个该类型的子元素
- :last-of-type 选择父节点中的最有一个该类型的子元素
- :nth-last-of-type() 同nth-of-type,但是顺序反过来,从最后往选
- :only-of-type 是父节点的唯一子节点时选中
关系伪类选择器
- :not() 排除法选择器
- :empty选择既没有文本也没有子元素的元素
文本相关的
- ::first-letter 选择第一个字母
- ::first-line 选择第一行
- :lang 语言选择器
部分示例
<!DOCTYPE html>
<style>
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
/*选择获取焦点的input输入框*/
input:focus{
border:1px green bold;
}
/*选择元素p内的第一个字母*/
p:first-letter {
text-transform: uppercase;
color:red;
}
/*选择元素p内的第一行*/
p:first-line {
text-decoration: underline;
}
/*选择属于其父元素的第一个子元素p*/
p:first-child{
color:firebrick;
}
/*在元素前面添加内容*/
span:before{
content: "<<";
}
/*在元素后面添加内容*/
span:after{
content: ">>";
}
/*选择前面有section元素的所有div元素,不管中间是否有别的元素*/
section~div{
background-color: red;
}
/*使用户选择的元素背景变为深橙色*/
::selection{
background-color: darkorange;
}
</style>
<a href="#">A Link</a><br>
<input type="text" name="name" id="name">
<p>this is a paragraph.</p>
<p>this is a paragraph.<br>The second line.</p>
<div><p>First child</p><p>Second child</p></div>
<span>A Tale of Two Cities</span>
<section></section><p></p>
<div>Div after section 1</div>
<div>Div after section 2</div>
nth-child示例
<!DOCTYPE html>
<style>
tr:nth-child(even){
background-color: beige;
}
</style>
<table>
<thead>
<tr><th>Name</th><th>Quantity</th></tr>
</thead>
<tbody>
<tr><td>BMW</td><td>1200</td></tr>
<tr><td>Audi</td><td>1300</td></tr>
<tr><td>Porsche </td><td>1000</td></tr>
<tr><td>Benz </td><td>1100</td></tr>
</tbody>
</table>