码迷,mamicode.com
首页 > Web开发 > 详细

css选择器(2)

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

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

四、伪类选择器

1、动态伪类选择器

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

  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>
    
    
  2. :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)

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

  1. :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>
    
    
  2. :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>
    
    
  3. :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、结构伪类选择器

  1. :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>
    
    
  2. :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>
    
    
  3. 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不会被渲染,但是如果在本地打开这个网页的话是可以看到最后一行被渲染了的。

  4. 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>
    
    
  5. 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>
    
    
  6. 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>
    
    
  7. 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>
    
    
  8. :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>
    
    
  9. :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>
    
    
  10. :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>
    
    
  11. :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、其他伪类选择器

  1. :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>
    
    
  2. :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>
    
    
  3. :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)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有
迷上了代码!