【CSS】CSS 复合选择器 ③ ( 并集选择器 | 并集选择器与后代选择器示例 )-CFANZ编程社区

文章目录

一、并集选择器

1、语法说明
2、代码示例

二、并集选择器与后代选择器示例

1、添加注释
2、HTML 结构
3、后代选择器 1
4、后代选择器 2
5、并集选择器
6、完整代码示例
7、显示效果

一、并集选择器

1、语法说明

并集选择器可以选择若干基础选择器选择出的并集元素集合 ;

并集选择器语法 : 基础选择器之间使用 , 逗号隔开 ;

基础选择器1,基础选择器2,基础选择器3 {
  属性名称1:属性值1;
  属性名称2:属性值2;
  属性名称3:属性值3;
}

注意 : 基础选择器可以是任何类型的基础选择器 ;

子选择器只能从父选择器选择出的元素的亲儿子元素中选择 , 孙子元素和重孙子元素

CSS 基础选择器 :

标签选择器
类选择器
ID 选择器
通配符选择器

2、代码示例

代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
    <meta charset="UTF-8" /> 
    <title>并集选择器</title>
    <base target="_blank"/>
    <style>
        /*并集选择器, 选择 p 标签, h1 标签 以及 .red 类标签*/
        p, h1, .red {
            color: red;
        }
    </style>
</head>
<body>
    <p>p标签</p>
    <span>span标签</span>
    <div class="red">div标签 red类</div>
    <div>div标签</div>
    <h1>h1标签</h1>
</body>
</html>

执行效果 :

【CSS】CSS 复合选择器 ③ ( 并集选择器 | 并集选择器与后代选择器示例 )_css

二、并集选择器与后代选择器示例

1、添加注释

CSS 中的注释 :

/* CSS 注释 */

HTML 中的注释 :

<!-- HTML 注释 -->

2、HTML 结构

下面使用 CSS 为该 HTML 结构添加样式 ;

<!DOCTYPE html> 
<html lang="en">
<head>    
    <meta charset="UTF-8" /> 
    <title>并集选择器和后代选择器</title>
    <base target="_blank"/>
    <style>
        
    </style>
</head>
<body>
    <!-- 主导航栏 -->
    <div class="main">   
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">简介</a></li>
      </ul>
    </div>
    <!-- 侧导航栏 -->
    <div class="register-login">    
      <div class="register">注册</div>
      <div class="login"><a href="#">登录</a></div>
    </div>
</body>
</html>

3、后代选择器 1

将上述网页中的登录链接设置为红色 , 使用后代选择器 ,

<div class="login"><a href="#">登录</a></div>

先使用 .login 类选择器 , 选择出指定的类标签 ,

然后使用 a 标签选择器, 选择 .login 类标签下的 a 标签 ;

/* 1. 登录设置为红色 */
.site-r login {
  color: red;
}

4、后代选择器 2

将主导航栏中的链接设置为蓝色 ;

<!-- 主导航栏 -->
<div class="main">   
  <ul>
  <li><a href="#">首页</a></li>
  <li><a href="#">简介</a></li>
  </ul>
</div>

上述主导航栏的结构为 ,

最外层是 div 标签 , 类名是 main ,

第二层是 ul 标签 ,

第三层是 li 标签 ,

第四层是 a 链接标签 ,

因此使用后代选择器, 需要使用四层选择器进行选择 ;

/*2. 主导航栏 链接设置为蓝色  */
.main ul li a {
  color: blue;
}

5、并集选择器

将主导航栏和侧导航栏的文字都设置成 20 像素 , 黑体样式 ;

使用并集选择器 , 若干基础选择器之间 , 使用逗号隔开 ;

/*3. 主导航栏和侧导航栏 文字 设置 20 像素 黑体*/
.main, .register-login {
  font: 20px "黑体";
}

6、完整代码示例

<!DOCTYPE html> 
<html lang="en">
<head>    
    <meta charset="UTF-8" /> 
    <title>并集选择器和后代选择器</title>
    <base target="_blank"/>
    <style>
        /* 1. 后代选择器 登录设置为红色 */
        .login a {
            color: red;
        }
        /*2. 主导航栏 链接设置为蓝色  */
        .main ul li a {
            color: blue;
        }
        /*3. 主导航栏和侧导航栏 文字 设置 20 像素 黑体*/
        .main, .register-login {
            font: 20px "黑体";
        }
    </style>
</head>
<body>
    <!-- 主导航栏 -->
    <div class="main">   
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">简介</a></li>
      </ul>
    </div>
    <!-- 侧导航栏 -->
    <div class="register-login">    
      <div class="register">注册</div>
      <div class="login"><a href="#">登录</a></div>
    </div>
</body>
</html>

7、显示效果

【CSS】CSS 复合选择器 ③ ( 并集选择器 | 并集选择器与后代选择器示例 )_复合选择器_02