html&CSS-----高级选择器

 目录

前言

伪类选择器

状态类

结构类

 伪元素选择器

属性选择器 

---

前言

        前面我们学习了CSS中的相关选择器（链接html&CSS-----CSS选择器（上）_灰勒塔德的博客-CSDN博客    html&CSS-----CSS选择器（下）_灰勒塔德的博客-CSDN博客）今天我们接着学习比较高级的选择器，下面就一起来去看看吧！

伪类选择器

当你希望元素在特定的状态下发生样式的变化时，可以使用伪类选择器。

• 状态类

  写法	介绍	举例
  :hover	鼠标悬停	a:hover{color:pink;}
  :link	未被访问的链接（特指a标签）	a:link{color:red};
  :visited	被访问过的链接（特指a标签）	a:visited{color:blue;}
  :active	被点击按下状态	a:active{color:green;}

 :hover :active 不仅仅能用在a标签上。

:hover最为常用最为重要。

可以进一步在伪类后进行选择，比如：#wrap:hover .nav{display:none;

写法	介绍	举例
:focus	获得焦点状态(接收键盘事件或其他用户输入的元素都允许 :focus 选择器。)	input:focus{border:1px solid blue;}
:checked	（单选/多选）表单被勾选状态	input:checked{background-color:#aaa;}

 下面看个示例

    
    
    
    


    
    

        

            
《Re:从零开始的异世界生活》
            
《来着新世界》
            
《紫罗兰永恒花园》
        
    
    
    

        访问百度
    
    
    

        访问baidu
    
    
    

        点我变颜色，看看吧
    

 效果如下：

1691821211078

结构类

写法	介绍	举例
E:nth-child(n)	这个表示选择列表中的倒数第n个标签	p:nth-child(2){color:red;}
E:nth-of-type(n)	E元素父级的第n个E元素，无视其他元素	p:nth-of-type(2){color:red;}
E:first-child	E元素父级的第一个子元素（该子元素需要满足E的选择规则，不满足则不会选中任何元素）	p:first-child{color:red;}
E:last-child	E元素父级的最后一个子元素（该子元素需要满足E的选择规则，不满足则不会选中任何元素）	p:last-child{color:red;}

上述选择器 n 所表示的可以是一个 数字 或者 奇数odd 或者 偶数even 或者 一个表达式。

 :nth-child(n) :nth-of-type(n)有对应的“倒着数”属性 :nth-last-child(n) :nth-last-of-type(n)。

 下面看个示例：

    
    
    
    


    

        
start
        
1
        
2
        
3
        
    

效果： 这里要注意first-child和last-child这两个选择器的使用，因为这里作用的标签必须是父类元素的第一个或者最后一个，否则不起效果，如上所示。

 伪元素选择器

伪类选择器相当于在某种情况下添加一个虚拟类名，而伪元素选择器则是相当于创建了一个虚拟元素。

写法	介绍	举例
E::before	相当于在E元素的最前面添加一个额外的子元素	#wrap::before{content:"Hello World!"}
E::after	相当于在E元素的最后面添加一个额外的子元素	#wrap::after{content:"Hello World!"}

必须拥有 content 样式，上述两个伪元素才会生效。

创建的子元素是一个行内元素。

::after常用来清除浮动。

content 除了写文字之外，还可以用url指定一张图片等其他写法。

        /* 消除浮动自适应问题的写法 */
        E::after{
            content: '';
            display: block;
            clear: both; 
        }

属性选择器 

这一类选择器跟正则匹配搭配使用，实际上并不是怎么用到，比较少用的那种，我们可以去选择性的去使用 

[attr]	属性选择器（拥有attr标签属性）	[title]{ color:red; }
[attr=val]	属性选择器（拥有标签属性attr并值为val）	[target=_blank]{ color:red; }
[attr*=val]	属性选择器（拥有标签属性attr并值包含val）	[src*=baidu]{border:5px solid pink;}
[attr$=val]	属性选择器（拥有标签属性attr并值以val结尾）	[src~=jpg]{ border:5px solid pink; }
[attr^=val]	属性选择器（拥有标签属性attr并值以val开头）	[class^=nav]{ background:pink; }
选择规则1选择规则2	复合选择器（多个规则来匹配元素）	div.nav.left{ width:100px; } 有nav和left类名的div标签

 下面看个示例：

    
    
    
    


    
哈喽哦
    
吃饭了吗
    
快看快看

效果：

 好了，以上就是今天的全部内容了，我们下一期再见！

分享一张壁纸：