css选择器（2）

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

四、伪类选择器

1、动态伪类选择器

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

1. :link、:visted、:hover、:active

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

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

   
   
   
           点这里
       
   
   
   

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

   
   
       
   
   
           点这里
           点这里
       
   
   
   

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

   
   
       
   
   
   啦啦啦啦啦啦啦
       
   
   
   

   
   
       
   
   
   啦啦啦啦啦啦啦
       
   
   
   

2. :focus伪类选择器

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

   
   
       
   
   
   请输入：
           

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

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

1. :enabled和:disabled

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

   
   
       
   
   
           可用：
   
   
   
   
           禁用：

2. :checked

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

   
   
       
   
   
   male
   female
   apple
   lalala
   sfsdfs
   

3. :required和:optional

   适用于必选和可选的元素

4、:default

会选中默认的元素

    



            

提交
        

5、:valid和:invalid

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

    



            

提交
        

6、in-range和out-of-range

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

7、read-only和read-write

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

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

3、结构伪类选择器

1. :root

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

   
   
       
   
   
   hello world!
       
   
   
   

2. :empty

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

   
   
       
   
   
   
           
   hello world!
           
   
       
   
   
   

3. first-child和last-child

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

   
   
       
   
   
   sdjfiosd
           
   hello world!
           
   sfsdfsdfsdf
       
   
   
   

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

   
   
       
   
   
   sdjfiosd
           
   hello world!
           
   sfsdfsdfsdf
       
   
   
   

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

4. only-child

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

   
   
       
   
   
   
               good morning
           
       
   
   
   

5. only-of-type

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

   
   
       
   
   
   hello
       
   
   
   

6. first-of-type

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

   
   
       
   
   
   who are you
           
   hello
           
   i am fine
           
   thank you
       
   
   
   

7. last-of-type

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

   
   
       
   
   
   thank you 
           
   are you ok?
           
   i am coming
       
   
   
   

8. :nth-child(n)

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

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

   n从1开始

   
   
       
   
   
   thank you 
           
   are you ok?
           
   i am coming
       
   
   
   

9. :nth-last-child(n)

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

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

   
   
       
   
   
   thank you 
           
   are you ok?
           
   thank you 
           
   are you ok?
           
   thank you 
           
   are you ok?
           
   thank you 
           
   are you ok?
       
   
   
   

10. :nth-of-type(n)

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

    
    
        
    
    
    我是第一个
            
    thank you 
            
    are you ok?
            
    thank you 
        
    
    
    

11. :nth-last-of-type(n)

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

    
    
        
    
    
    我是第一个
            
    thank you 
            
    are you ok?
            
    thank you 
            
    我是最后一个
        
    
    
    

4、其他伪类选择器

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

   
   
       
   
   
   thank you 
           
   1
           
   2 
           
   3
           
   4
           
   5 
         
           
   thank you 
           
   are you ok?
           
   thank you 
          
           
   thank you 
           
   are you ok?
           
   thank you 
         
           
   thank you 
           
   are you ok?
           
   thank you 
         
           
   thank you 
           
   are you ok?
           
   thank you 
         
           
   thank you 
           
   are you ok?
           
   thank you 
           跳转到开头
       
   
   
   

2. :lang

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

   
   
       
   
   
   黑暗之魂
           
   Dark Souls
       
   
   
   

3. :not()

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

   
   
       
   
   
   黑暗之魂
           
   Dark Souls
       
   
   
   

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

答：

? 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、

    


how are you
        
白骨终将化为沙土，却生生不息
        
这是哪
    

2、

    


how are you
        
白骨终将化为沙土，却生生不息
    

3、

    


how are you
        
白骨终将化为沙土，却生生不息
        
这是哪
    

4、

    


how are you
        
白骨终将化为沙土，却生生不息
        
这是哪
    

5、

    


how are you
        
白骨终将化为沙土，却生生不息
        
这是哪
    

6、

    


hahhahahhaha
    

7、

    


hahhahahhaha
    

css选择器（2）

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

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