高级选择器分为：

  • 后代选择器

  • 儿子选择器

  • 并集选择器

  • 交集选择器

后代选择器

使用空格表示后代选择器。父元素的后代（包括儿子，孙子，重孙子）

后代选择器 在CSS中使用非常频繁

因为HTML元素可以嵌套，所以我们可以从某个元素的后代查找特定元素，并设置样式：

/*div内部的p标签设置字体颜色*/
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style type="text/css">

        /* 后代选择器 */

        div p{

            color: red;

        }

    </style>

</head>

<body>

    <div class="c1">

        <div>

            <p>第一个段落</p>

        </div>

    </div>

</body>

</html>

从div的所有后代中找p标签，设置字体颜色为红色

/*div内部的div内部的p标签设置字体颜色*/
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style type="text/css">

        /* 后代选择器 */

        div div p{

            color: red;

        }

    </style>

</head>

<body>

    <div class="c1">

        <div>

            <p>第一个段落</p>

        </div>

    </div>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style type="text/css">

        /* 后代选择器 */

        .c1 div p{

            color: green;

        }

    </style>

</head>

<body>

    <div class="c1">

        <div>

            <p>第一个段落</p>

        </div>

    </div>

</body>

</html>

儿子选择器

使用>表示儿子选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p

/*选择所有父级是 <div> 元素的 <p> 元素*/

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style type="text/css">

        /* 儿子选择器 */

        .c1>p{

            color: green;

        }

    </style>

</head>

<body>

    <div class="c1">

        <p>另外一个段落</p>

        <div>

            <p>第一个段落</p>

        </div>

    </div>

</body>

</html>


从div的直接子元素中找到p标签，设置字体颜色为绿色




 选中应用c1类的div 里面的两个p标签




<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style type="text/css">

        /* 儿子选择器 */

        .c1>p{

            color: green;

        }

    </style>

</head>

<body>

    <div class="c1">

        <p>另外一个段落</p>

        <div>

            <p>第一个段落</p>

        </div>

        <p>另外一个段落2</p>

    </div>

</body>

</html>








交集选择器


对标签选择器和类选择器 有个交集


使用.表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器 语法：div.active


比如有一个<h3 class='active'></h3>这样的标签。




<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style type="text/css">

        /* 交集选择器 */

        h3{

            color: red;

        }

        .active{

            font-size: 30px;

        }

        h3.active{

            background-color: green;

        }

    </style>

</head>

<body>

    <div>

        <ul>

            <li class="item">

                <h3 class="active">我是一个h3</h3>

            </li>

        </ul>

    </div>

</body>

</html>








它表示两者选中之后元素共有的特性


交集选择器通常和js配合使用


并集选择器


当多个标签的样式相同的时候，我们没有必要重复地为每个标签都设置样式，我们可以通过在多个选择器之间使用逗号分隔的并集选择器来设置多个标签统一样式。


多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素，可以使用并集选择器


为a标签和h4标签统一设置字体为红色,字体大小30px的样式。




<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style type="text/css">

        /* 并集选择器 */

        a,h4{

            color: red;

            font-size: 30px;

        }

    </style>

</head>

<body>

    <div>

        <h4>h4标签</h4>

        <ul>

            <li>

                <h4>h4标签</h4>

            </li>

        </ul>

        <a>a标签</a>

    </div>

</body>

</html>






比如像百度首页使用并集选择器。




 body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {

      margin:;

      padding: 0

   }

/*使用此并集选择器选中页面中所有的标签，页面布局的时候会使用*/


												


											
前端 CSS的选择器  高级选择器的更多相关文章
	

    
								
  1. jQuery_2_常规选择器-高级选择器
		
    高级选择器 层次选择器 1. 后代选择器    $("#d1 p")   获取追溯到的多个DOM对象  (无论儿子还是孙子都是后代) 2. 子选择器       $("# ...
    
		
    2. 
						
  2. 盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图
		
    盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开 设置了宽高 一定采用设置的 ...
    
		
    3. 
						
  3. jQuery_2_常规选择器-高级选择器2
		
    属性选择器 <a title="num1">num1</a> <a title="num-ad">num2</a> ...
    
		
    4. 
						
  4. 前端----css 选择器
		
      css 为了修饰页面作用, 让页面好看 ⑴ css的引入方式1,行内样式body里面2,内接样式在html里面的 style 里面3,外接样式两种:①链接式: <link rel=" ...
    
		
    5. 
						
  5. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
		
    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
    
		
    6. 
						
  6. day40 css高级选择器
		
    一.高级选择器 高级选择器分为:后代选择器.子代选择器.并集选择器.交集选择器 后代选择器 使用空格表示后代选择器.顾名思义,父元素的后代(包括儿子,孙子,重孙子) .container p{ col ...
    
		
    7. 
						
  7. CSS选择器详解（二）通用选择器和高级选择器
		
    目录 通用选择器 高级选择器 子选择器 相邻兄弟选择器 属性选择器 通用选择器 通用选择器可以选择页面上的所有元素,并对它们应用样式,用 * 来表示. 语法: * { property1: value ...
    
		
    8. 
						
  8. 前端 CSS的选择器
		
    什么是选择器.在一个HTML页面中会有很多很多的元素,不同的元素可能会有不同的样式,某些元素又需要设置相同的样式,选择器就是用来从HTML页面中查找特定元素的,找到元素之后就可以为它们设置样式了. 选 ...
    
		
    9. 
						
  9. CSS样式----图文详解：css样式表和选择器
		
    主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 以太坊智能合约开发工具 Truffle 入门1
			
    Truffle是以太坊(Ethereum)智能合约开发的瑞士军刀,小巧好用,上手简单. 本篇文章主要展示如何用Truffle 开发第一个Ethereum智能合约. 1.准备工作:(本人针对window ...
    
			
    2. 
						
  2. Centos7.5 源码编译安装PHP
			
    安装依赖 yum -y install epel-release yum -y install  gcc gcc-c++ make pcre pcre-devel zlib zlib-devel op ...
    
			
    3. 
						
  3. 写api接口神器－－带你5分钟了解swagger
			
    随着互联网技术的发展,现在的网站架构基本都由原来的后端渲染,变成了:前端渲染.先后端分离的形态,而且前端技术和后端技术在各自的道路上越走越远. 前端和后端的唯一联系,变成了API接口:API文档变成了 ...
    
			
    4. 
						
  4. 【GDOI2014模拟】雨天的尾巴
			
    题目 深绘里一直很讨厌雨天. 灼热的天气穿透了前半个夏天,后来一场大雨和随之而来的洪水,浇灭了一切. 虽然深绘里家乡的小村落对洪水有着顽固的抵抗力,但也倒了几座老房子,几棵老树被连 根拔起,以及田地里 ...
    
			
    5. 
						
  5. darknet-yolov3模型预测框size不正确的原因
			
    问题描述:预测框的中心位置正常,但是预测的框的width和height不正常. 解决方法:使得训练的配置cfg和测试中cfg的输入width, height, anchorbox保持一致! 问题是我在 ...
    
			
    6. 
						
  6. SQL SERVER 数据库如何限制一列不能重复（已经有主键）
			
    ALTER TABLE 表名ADDCONSTRAINT 约束名 UNIQUE (列名) -------------------------------------------------------- ...
    
			
    7. 
						
  7. mysql WHERE语句 语法
			
    mysql WHERE语句 语法 作用:如需有条件地从表中选取数据,可将 WHERE 子句添加到 SELECT 语句.珠海大理石平尺 语法:SELECT 列名称 FROM 表名称 WHERE 列 运算 ...
    
			
    8. 
						
  8. Bugku web web基础$_GET
			
    web基础$_GET 打开网站后发现 $what=$_GET['what']; echo $what; if($what=='flag') echo 'flag{****}'; 根据这段话的意思是将w ...
    
			
    9. 
						
  9. Mysql数据库表类型
			
    MySQL的数据表类型很多,其中比较重要的是MyISAM,InnoDB这两种. 这两种类型各有优缺点,需要根据实际情况选择适合的,MySQL支持对不同的表设置不同的类型.下面做个对比:   MyISA ...
    
			
    10. 
						
  10. [NOI2003]逃学的小孩 题解
			
    前言 >原题传送门(洛谷)< 看了一下洛谷题面,这道NOI的题竟然是蓝的(恶评?),做了一下好像确实是蓝的... 解法 思路非常简单,找道树的直径,然后答案是直径长度加上最大的min(di ...
    
			
    11.