上一篇中我们介绍了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版本下的选择器。
学习编程最重要的就是多加练习,也就是动手实践,光看是看不会的。快动动你的小手,和我一起学习编程吧。
发表评论 取消回复