css选择器（2）

时间：2021-02-25 12:01:41 阅读：0 评论：0 收藏：0 [点我收藏+]

四、伪类选择器

1、动态伪类选择器

动态伪类选择器会根据条件的改变来匹配元素

:link、:visted、:hover、:active

这四个动态伪类选择器一般用在a元素上，分别对应a元素的链接的四个状态：

:link：对应链接未被访问的时候
:visted：对应链接被访问的时候
:hover：对应当鼠标悬停在链接上方的时候
:active：对应当鼠标按下链接的那一刻

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            a:link{
                color: black;
            }
            a:visited{
                color: red;
            }
            a:hover{
                color: yellow;
            }
            a:active{
                color: green;
            }
        </style>
    </head>
    <body>
        <a href="https://www.baidu.com/s?ie=UTF-8&wd=dsfsdfdddsdsdfsfefsefe1" target="_blank">点这里</a>
    </body>
</html>

这里注意下，a标签里的网页链接必须是之前没有打开过的，只要打开过的话，那么:link的效果就没有了。另外这四个样式是有先后顺序的要求的，hover必须在link和visited的后面，active必须在hover的后面。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            a:link{
                color: black;
            }
            a:visited{
                color: red;
            }
            a:hover{
                color: yellow;
            }
            a:active{
                color: green;
            }
        </style>
    </head>
    <body>
        <a href="https://www.baidu.com/s?ie=UTF-8&wd=dsfsdfdddsdsdfsfefsefe12" target="_blank">点这里</a>
        <a href="https://www.baidu.com" target="_blank">点这里</a>
    </body>
</html>

另外这四个选择器也可以用在别的元素上，比如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            div:hover{
                color:green;
            }
        </style>
    </head>
    <body>
        <div>啦啦啦啦啦啦啦</div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            div:active{
                background-color:green;
            }
        </style>
    </head>
    <body>
        <div>啦啦啦啦啦啦啦</div>
    </body>
</html>

:focus伪类选择器

就是当元素获得焦点的时候被选中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            input:focus{
                background-color: green;
            }
        </style>
    </head>
    <body>
        <label>请输入：</label>
        <input type="text"> 
    </body>
</html>

2、UI伪类选择器（User Interface Pseudo-class Selectors)

主要用在用户和系统进行交互的界面，也就是表单元素。

:enabled和:disabled

设置一些框的可用和禁用属性所对应的css样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            :enabled{
                outline: 10px solid green;
            }
            :disabled{
                outline: 10px solid red;
            }
        </style>
    </head>
    <body>
        可用：<input type="text" >
        <br><br><br><br>
        禁用：<input type="text" disabled>
    </body>
</html>

:checked

适用于单选框，复选框和下拉列表中的选项，来设置选项被选中时的样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            :checked{
                height: 50px;
                width: 50px;
            }
        </style>
    </head>
    <body>
        <input type="radio" name="sex" >male<br>
        <input type="radio" name="sex">female<br>
        <input type="checkbox">apple<br>
        <input type="checkbox">lalala<br>
        <input type="checkbox">sfsdfs<br>
    </body>
</html>

:required和:optional

适用于必选和可选的元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            :required{
                background-color: red;
                color:red;
            }
            :optional{
                background-color: green;
                color:green;
            }
        </style>
    </head>
    <body>
        <input type="text" required><br>
        <input type="text" ><br>

</html>

4、:default

会选中默认的元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            :default{
                outline: 3px solid red;
            }
        </style>
    </head>
    <body>
        <form>
            <input type="text"><br><br>
            <button type="submit">提交</button>
        </form>
</html>

5、:valid和:invalid

:valid设置合法时的样式，:invalid设置不合法时的样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            input:valid{
                border: 8px solid green;
            }
            input:invalid{
                border: 8px solid red;
            }
        </style>
    </head>
    <body>
        <form>
            <input type="email"><br><br>
            <button type="submit">提交</button>
        </form>
</html>

6、in-range和out-of-range

当input元素的type属性设置为number的时候，可以另外指定min和max属性来设置数值的范围，in-range用于设置符合范围时的样式，out-of-range用于设置超出范围时的样式。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            input:in-range{
                border: 2px solid green;
            }
            input:out-of-range{
                border: 2px solid red;
            }
        </style>
    </head>
    <body>
        <form>
            <input type="number" min="0" max="9" value="5">
        </form>
</html>

7、read-only和read-write

read-only选择器设置可读时的样式，read-write选择器设置可读可写时的样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            input:read-write{
                background-color: green;
            }
            input:read-only{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <form>
            <input type="text">
            <br>
            <input type="text" readonly>
        </form>
</html>

如果使用火狐浏览器，在样式前需加上-moz，例如-moz-read-only

3、结构伪类选择器

:root

根元素选择器，用于设置根元素的样式，在html中，根元素始终是html元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            :root{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <p>hello world!</p>
    </body>
</html>

:empty

匹配没有定义任何内容的元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            :empty{
                width: 100px;
                height: 20px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <p></p>
        <p>hello world!</p>
        <p></p>
    </body>
</html>

first-child和last-child

first-child用于匹配父元素下的第一个子元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            p:first-child{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <p>sdjfiosd</p>
        <p>hello world!</p>
        <p>sfsdfsdfsdf</p>
    </body>
</html>

last-child用于匹配父元素下的最后一个子元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            p:last-child{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <p>sdjfiosd</p>
        <p>hello world!</p>
        <p>sfsdfsdfsdf</p>
    </body>
</html>

注意，这里如果用vscode的话，最后一行的p是不会被渲染的，因为vscode会在最后自动加上一个 script标签，那么p元素的父元素body的最后一个子元素就是script了，所以最后一行p不会被渲染，但是如果在本地打开这个网页的话是可以看到最后一行被渲染了的。

only-child

如果该元素是其父元素的唯一子元素，那么这个选择器会选中这个元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            span:only-child{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <p>
            <span>good morning</span>
        </p>
    </body>
</html>

only-of-type

该选择器匹配的是属于父元素下唯一类型的子元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            p:only-of-type{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <p>hello</p>
    </body>
</html>

first-of-type

匹配父元素下相同类型的子元素中的第一个

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            p:first-of-type{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div>who are you</div>
        <p>hello</p>
        <p>i am fine</p>
        <p>thank you</p>
    </body>
</html>

last-of-type

匹配父元素下相同类型子元素中的最后一个

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            p:last-of-type{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <p>thank you </p>
        <p>are you ok?</p>
        <div>i am coming</div>
    </body>
</html>

:nth-child(n)

:nth-child(n):选中某个元素，该元素必须是某个父元素下的第n个子元素。

p:nth-child(n):选中p元素，且该p元素必须是某个父元素下的第n个子元素

n从1开始

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            p:nth-child(2){
                background-color: red;
            }
        </style>
    </head>
    <body>
        <p>thank you </p>
        <p>are you ok?</p>
        <div>i am coming</div>
    </body>
</html>

:nth-last-child(n)

:nth-last-child:选中某个元素，该元素必须是某个父元素下的倒数第n个子元素

p:nth-last-child:选中p元素，且该p元素必须是某个父元素下的倒数第n个子元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            p:nth-last-child(3){
                background-color: red;
            }
        </style>
    </head>
    <body>
        <p>thank you </p>
        <p>are you ok?</p>
        <p>thank you </p>
        <p>are you ok?</p>
        <p>thank you </p>
        <p>are you ok?</p>
        <p>thank you </p>
        <p>are you ok?</p>
    </body>
</html>

:nth-of-type(n)

匹配属于父元素的指定类型的第n个子元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            p:nth-of-type(3){
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div>我是第一个</div>
        <p>thank you </p>
        <p>are you ok?</p>
        <p>thank you </p>
    </body>
</html>

:nth-last-of-type(n)

匹配属于父元素的指定类型的倒数第n个元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            p:nth-last-of-type(3){
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div>我是第一个</div>
        <p>thank you </p>
        <p>are you ok?</p>
        <p>thank you </p>
        <div>我是最后一个</div>
    </body>
</html>

4、其他伪类选择器

:target用于为页面内锚点来设置样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            :target{
                border: 2px solid red;
            }
        </style>
    </head>
    <body>
        <p id="hello">thank you </p>
        <p>1</p>
        <p>2 </p>
        <p>3</p>
        <p>4</p>
        <p>5 </p>      
        <p>thank you </p>
        <p>are you ok?</p>
        <p>thank you </p>       
        <p>thank you </p>
        <p>are you ok?</p>
        <p>thank you </p>      
        <p>thank you </p>
        <p>are you ok?</p>
        <p>thank you </p>      
        <p>thank you </p>
        <p>are you ok?</p>
        <p>thank you </p>      
        <p>thank you </p>
        <p>are you ok?</p>
        <p>thank you </p>
        <a href="#hello">跳转到开头</a>
    </body>
</html>

:lang

用于选取带有以指定值开头的lang属性的元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            :lang(zh){
                background-color: red;
            }
            :lang(en){
                background-color: green;
            }
        </style>
    </head>
    <body>
        <p lang="zh">黑暗之魂</p>
        <p lang="en">Dark Souls</p>
    </body>
</html>

:not()

对任意选择器进行取反操作。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            p{
                background-color: red;
            }
            :not(p){
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <p>黑暗之魂</p>
        <p>Dark Souls</p>
    </body>
</html>

如何区分伪类选择器和伪元素选择器？

答：

? css引入伪类和伪元素的概念是为了格式化文档树以外的信息

伪类用于当已有元素处于某个状态时，为其添加样式。

伪元素用于创建一些不在文档树的元素，为其添加样式。

五、属性选择器

[attr] :匹配定义了attr属性的元素，不需要考虑属性值

[attr="val"] :匹配定义了attr属性，且属性值为"val"字符串的元素

[attr^="val"] : 匹配定义了attr属性，且属性值以”val“字符串开头的元素

[attr$="val"] :匹配定义了attr属性，且属性值以”val“字符串结尾的元素

[attr*="val"] : 匹配定义了attr属性，且属性值包含“val”字符串的元素

[attr~="val"] :匹配定义了attr属性，且属性值为“val”字符串的元素（如有多个属性值，则只需其中一个属性值匹配即可）

[attr|="var"] :匹配定义了attr属性，且属性值由连字符进行分割（比如lang="en-uk"），其中第一个字符串是"val"的元素。

下面依次是例子：

1、

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            [class]{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <p class="nihao">how are you</p>
        <p class="hello">白骨终将化为沙土，却生生不息</p>
        <p>这是哪</p>
    </body>
</html>

2、

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            [class="hello"]{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <p class="nihao">how are you</p>
        <p class="hello">白骨终将化为沙土，却生生不息</p>
    </body>
</html>

3、

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            [class^="hello"]{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <p class="helloooo">how are you</p>
        <p class="hello">白骨终将化为沙土，却生生不息</p>
        <p class="now">这是哪</p>
    </body>
</html>

4、

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            [class$="hello"]{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <p class="oooohello">how are you</p>
        <p class="hell">白骨终将化为沙土，却生生不息</p>
        <p class="nowhello">这是哪</p>
    </body>
</html>

5、

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            [class*="hello"]{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <p class="oooohel">how are you</p>
        <p class="helloooo">白骨终将化为沙土，却生生不息</p>
        <p class="nowhello">这是哪</p>
    </body>
</html>

6、

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            [class~="who"]{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <p class="are who">hahhahahhaha</p>
    </body>
</html>

7、

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            [class|="abc"]{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <p class="abc-def">hahhahahhaha</p>
    </body>
</html>

css选择器（2）

标签：html check fir 没有动态 tps not BMI 指定

原文地址：https://www.cnblogs.com/fate-/p/14443279.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行