CSS交集选择器

最新推荐文章于 2024-06-12 20:14:43 发布

小晓雄

最新推荐文章于 2024-06-12 20:14:43 发布

阅读量976

点赞数 1

分类专栏： CSS基础篇

CSS基础篇专栏收录该内容

14 篇文章 0 订阅

订阅专栏

转载自：http://blog.csdn.net/lianghe_work/article/details/52816267

问题引入

[html]view plain copy 
    
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title>Document</title>  
     <style type="text/css">  
         .red{  
             color: red;  
         }  
     </style>  
 </head>  
 <body>  
     <h2>二级标题</h2>  
     <h2 class="red">二级标题</h2>  
     <h2 class="red">二级标题</h2>  
     <p  class="red">段落</p>  
     <p>段落</p>  
     <p>段落</p>  
 </body>  
 </html>  

运行的结果：

我们发现只要是含有red类的标签都变红了

如果我的需求是：只能让h2且含有red类的标签变红，这是就要需要交集选择器

交集选择器

[html]view plain copy 
    
 h2.red{  
             color: red;  
         }  

上面就是一个交集选择器的示例：就是说必须是h2标签同时拥有.red类才会被选择器选中，如下图所示：

这时你发现第一个“段落”并没有变红，原因是他只拥有.red类，但不具备h2标签

注意：

前面讲过：后代选择器h2 .red之间有空格。

而交集选择器没有空格，紧挨着一起

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小晓雄

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS交集选择器

转载自：http://blog.csdn.net/lianghe_work/article/details/52816267问题引入[html] view plain copy> html lang="en"> head> meta charset="UTF-8"> title>Document
复制链接

扫一扫