CSS第二课-----复合选择器

最新推荐文章于 2024-07-26 08:00:00 发布

柠檬山楂荷叶茶

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量166

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/qq_46344220/article/details/107417911

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

复合选择器

一、后代选择器

后代选择器又称为包含选择器。用来选择元素和元素组的子孙后代。
语法：
父级子级{属性1：属性值1；属性2：属性值2}
例：

<!DOCTYPE html>
<html lang="en">
<head>  
<meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Document</title>   
<style>      
  .nav a{            
    color: aquamarine;            
        text-decoration: none;    
            }  
 </style>
 </head>
 <body>   
 <div class="nav">         
 <a href="#">内部链接</a>         
 <a href="#">内部链接</a>         
 <a href="#">内部链接</a>   
 </div>    
 <a href="#">外部链接</a>   
 <a href="#">外部链接</a>   
  <a href="#">外部链接</a>
  </body>
  </html>

在这里插入图片描述

二、子元素选择器

子元素选择器只能选择作为某元素亲儿子的元素。
语法：
父级>子级{属性1：属性值1；属性2：属性值2；}
例：

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
<title>Document</title>    
<style>    
 div>strong{
 color: blue;  
    }

</style>
</head>
<body>    
<div>       
  <strong>儿子</strong>       
  <strong>儿子</strong>        
  <strong>儿子</strong> 
 </div>  
 <div>       
 <p>        
  <strong>孙子</strong>       
  <strong>孙子</strong>        
  <strong>孙子</strong>      
 </p>   
 </div>
 </body>
</html>

在这里插入图片描述

三、交集选择器

交集选择器由两个选择器构成，找到的标签必须同时具备两个标签的特点。
例：

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
<title>Document</title>    
<style>
     p.red{   
            color: crimson;
             }
</style>
</head>
<body>    

<p class="red">红色</p>   

<p class="red">红色</p> 
<p class="red">红色</p>    
<div class="red">红色</div>    
<div class="red">红色</div>    
<div class="red">红色</div>   
 <p>蓝色</p>    
 <p>蓝色</p>    
 <p>蓝色</p>
 </body>
 </html>

在这里插入图片描述

四、并集选择器

如果某些选择器定义的样式完全相同，或者部分相同，就可以利用并集选择器为他们定义相同的CSS样式。
并集选择器是各个选择器通过“ ， ”连接而成。
例：

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
<title>Document</title>   
<style>   
  p,div{    
  color: cyan;
  }
</style>
</head>
<body>    
<p>红色</p>    
<p>红色</p>    
<p>红色</p>   
<div>紫色</div>    
<div>紫色</div>    
<div>紫色</div>  
<span>蓝色</span>  
<span>蓝色</span>  
<span>蓝色</span>
</body>
</html>

在这里插入图片描述

柠檬山楂荷叶茶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS第二课-----复合选择器

复合选择器一、后代选择器后代选择器又称为包含选择器。用来选择元素和元素组的子孙后代。语法：父级子级{属性1：属性值1；属性2：属性值2}例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl
复制链接

扫一扫

专栏目录