上一篇中我们介绍了css选择器，本篇继续来讲解css选择器的剩余部分。
一、结构性伪类选择器
结构性伪类选择器能够根据元素在文档中的位置选择元素。这类元素都有一个前缀（：）。
1.根元素选择器
:root{
border:1px solid red;
}
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
:root{
border:1px solid red;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
解释：匹配文档中的根元素，基本不怎么用，因为总是返回<html>元素，就是选中的是html标签，html是一个页面最外面的标签，也叫做根元素。
页面效果如下：
2.子元素选择器
ul>li:first-child{
color:red;
}
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
ul>li:first-child{
color:red;
}
</style>
</head>
<body>
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ul>
</body>
</html>
解释：选择第一个子元素。
页面效果：
ul>li:last-child{
color:red;
}
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
ul>li:last-child{
color:red;
}
</style>
</head>
<body>
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ul>
</body>
</html>
解释：选择最后一个子元素。
页面效果：
ul>li:only-child{
color:red;
}
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
ul>li:only-child{
color:red;
}
</style>
</head>
<body>
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ul>
<ul>
<li>只有个li</li>
</ul>
</body>
</html>
解释：选择只有一个子元素的那个子元素。
页面效果：
div>p:only-of-type{
color:red;
}
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
div>p:only-of-type{
color:red;
}
</style>
</head>
<body>
<div>
<p>第一段落</p>
<p>第二段落</p>
<p>第三段落</p>
</div>
<div>
<p>第一段落</p>
</div>
</body>
</html>
解释：选择只有一个指定类型的子元素的那个子元素。
页面效果：
3.:nth-child(n)系列
ul>li:nth-child(2){
color:red;
}
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
ul>li:nth-child(2){
color:red;
}
</style>
</head>
<body>
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ul>
</body>
</html>
解释：选择子元素的第二个元素。
页面效果：
ul>li:nth-last-child(2){
color:red;
}
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
ul>li:nth-last-child(2){
color:red;
}
</style>
</head>
<body>
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ul>
</body>
</html>
解释：选择子元素倒数第二个元素。
页面效果：
div>p:nth-of-type(2){
color:red;
}
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
div>p:nth-of-type(2){
color:red;
}
</style>
</head>
<body>
<div>
<p>第一段落</p>
<p>第二段落</p>
<p>第三段落</p>
</div>
</body>
</html>
解释：选择特定元素的第二个元素。
页面效果：
div>p:nth-last-of-type(2){
color:red;
}
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
div>p:nth-last-of-type(2){
color:red;
}
</style>
</head>
<body>
<div>
<p>第一段落</p>
<p>第二段落</p>
<p>第三段落</p>
</div>
</body>
</html>
解释：选择特定子元素的倒数第二个元素。
页面效果：
二、UI伪类选择器
UI伪类选择器是根据元素的状态匹配元素。
1.：enabled
:enabled{
border:1px solid red;
}
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
:enabled{
border:1px solid red;
}
</style>
</head>
<body>
<form>
<input type="input" name="" enabled="enabled">
</form>
</body>
</html>
解释：选择启用状态的元素。
页面效果：
2.:disabled
:disabled{
border:1px solid red;
}
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
:disabled{
border:1px solid red;
}
</style>
</head>
<body>
<form>
<input type="input" name="" disabled="disabled">
</form>
</body>
</html>
解释：选择禁用状态的元素。
页面效果：
3.:checked
:checked{
display:none;
}
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
:checked{
display: none;
}
</style>
</head>
<body>
<form>
香蕉<input type="checkbox" name="" checked="checked">
橘子<input type="checkbox" name="">
苹果<input type="checkbox" name="">
</form>
</body>
</html>
解释：选择勾选的input元素，给香蕉添加了checked属性以后，香蕉就会被选中。具体效果如下图：
css的display:none代表隐藏，具体效果如下图：
4.:default
:default{
display:none;
}
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
:default{
display: none;
}
</style>
</head>
<body>
<form>
香蕉<input type="checkbox" name="" checked="checked">
橘子<input type="checkbox" name="">
苹果<input type="checkbox" name="">
</form>
</body>
</html>
解释：从一组类似的元素中选择默认元素。比如input被勾选的默认的。
页面效果：
5.:valid和invalid
input:valid{
border:1px solid blue;
}
input:invalid{
border:1px solid green;
}
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
input:valid{
border:1px solid blue;
}
input:invalid{
border:1px solid red;
}
</style>
</head>
<body>
<form>
<input type="text" name="" minlength="6" maxlength="12">
<input type="text" name="">
<input type="text" name="">
</form>
</body>
</html>
解释：输入验证合法与不合法显示时选择的元素。
页面效果：（这里的valid貌似不太管用【和所用的浏览器和浏览器的版本有关系】，invalid验证不通过的时候生效，代码中要求最少6，最多12，两个11显然不够两位，所以invalid生效变红）
6.required和optional
input:required{
border:1px solid blue;
}
input:optional{
border:1px solid green;
}
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
input:optional{
border:1px solid blue;
}
input:required{
border:1px solid red;
}
</style>
</head>
<body>
<form>
<input type="text" name="" required="请输入姓名">
<input type="password" name="">
</form>
</body>
</html>
解释：根据是否具有required属性选择元素。（如果input设置required属性那么
input:required{
border:1px solid red;
}
）
生效
如果没有设置required属性，那么
input:optional{
border:1px solid blue;
}
生效
页面效果：
三、动态伪类选择器
动态伪类选择器根据条件的改变匹配元素。
1.:link和visited
a:link{
color:red;
}
a:visited{
color:orange;
}
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
a:link{
color: red;
}
a:visited{
color: orange;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.sina.com">新浪</a>
<a href="http://www.sohu.com">搜狐</a>
</body>
</html>
解释：link表示未访问过的超链接，:visited表示已访问过的超链接。（怎么算是访问过呢？就是你点击百度，跳转到了百度就算是访问过了。想看效果可以点击后退退回到我们的页面）
页面效果：
2.:hover
a:hover{
color:blue;
}
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
a:hover{
color: red;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.sina.com">新浪</a>
<a href="http://www.sohu.com">搜狐</a>
</body>
</html>
解释：表示鼠标悬停在超链接上。
3.:active
a:active{
color:green;
}
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
a:active{
color: red;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.sina.com">新浪</a>
<a href="http://www.sohu.com">搜狐</a>
</body>
</html>
解释：表示鼠标按下激活超链接时。
页面效果：
4.:focus
input:focus{
border:1px solid red;
}
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
input:focus{
background: red;
}
</style>
</head>
<body>
<form>
用户名：<input type="text" name="username">
</form>
</body>
</html>
解释：表示获得焦点时。（border:1px solid red;不起作用，暂时没有找到什么原因，可以换成background尝试）
四、其他伪类选择器
1.:not
a:not([href*="baidu"]){
color:red;
}
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
a:not([href*="baidu"]){
color: red;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.sina.com">新浪</a>
<a href="http://www.sohu.com">搜狐</a>
</body>
</html>
解释：否定选择器，反选。
页面效果：
2.:empty
:empty{
display:none;
}
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
:empty{
border:1px solid red;
}
</style>
</head>
<body>
<p>第一段落</p>
<p>第二段落</p>
<p></p>
<ul>
<li></li>
</ul>
</body>
</html>
解释：匹配没有任何内容的元素。
页面效果：
3.::selection
::selection{
color:red;
}
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
::selection{
color:red;
}
</style>
</head>
<body>
<p>第一段落</p>
<p>第二段落</p>
<p></p>
<ul>
<li></li>
</ul>
</body>
</html>
解释：这是一个伪类元素选择器，当选择文字时触发选择。css3版本下的选择器。
学习编程最重要的就是多加练习，也就是动手实践，光看是看不会的。快动动你的小手，和我一起学习编程吧。
发表评论 取消回复