上一篇中我们介绍了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版本下的选择器。

学习编程最重要的就是多加练习,也就是动手实践,光看是看不会的。快动动你的小手,和我一起学习编程吧。


点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

热门产品

历史上的今天:03月29日

热门专题

中源管业|中源管业,中源管业公司,中源管业有限公司,中源管业电话,中源管业地址,中源管业电力管,中源管业mpp电力管,中源管业cpvc电力管,中源管业pe穿线管
中源管业
天麻的功效与作用吃法|天麻的功效与作用,天麻的功效与作用吃法,天麻炖什么治头痛最好,天麻的功效与作用禁忌,天麻多少钱一斤,天麻的功效与作用吃法及禁忌,天麻怎么吃效果最好,天麻粉的功效与作用,天麻怎么吃
天麻的功效与作用吃法
云南开放大学|云南开放大学报名,云南开放大学报考,云南开放大学,什么是云南开放大学,云南开放大学学历,云南开放大学学费,云南开放大学报名条件,云南开放大学报名时间,云南开放大学学历,云南开放大学专业
云南开放大学
金诺幼儿园(春城路金诺幼儿园)|昆明官渡区幼儿园,幼儿园报名,官渡区幼儿园,春城路幼儿园,幼儿园招生,学前班,昆明幼儿园,金诺幼儿园,环城南路幼儿园,石井路幼儿园
金诺幼儿园(春城路金诺幼儿园)
综合高中|云南综合高中,昆明综合高中,综合高中能考本一吗,综合高中和普通高中的区别,综合高中是什么意思,综合高中能参加全国统一高考吗,综合高中可以考哪些大学,综合高中的学籍是什么
综合高中
一年制中专|中专学历,中专是什么学历,中专是什么,中专有什么专业,中专升大专,一年制中专
一年制中专
APP开发|app开发_app开发公司_app软件开发_专业app开发_云南app开发公司_app定制_原生app开发定制
APP开发
昆明网站建设|昆明网站建设,昆明网站开发,昆明网站建设公司,昆明网站建设价格,昆明网站设计,昆明网站制作,网页设计,高端网站建设,高端网站设计
昆明网站建设

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部