CSS复合选择器是什么?复合选择器是如何工作

原文:CSS复合选择器是什么?复合选择器是如何工作

复合选择器介绍#

  • 复合选择器其实很好理解,说白了就跟我们生活中的有血缘关系家庭成员一样,通过标签或者class属性或id属性,去找对应的有血缘关系的某个选择器,具体的大家往下看哦。
  • 如果是初学者对基本的选择器不是很了解的可以看笔者之前写过的基本选择器文章,CSS基本选择器是什么?基本选择器是如何工作,在这就不过多的介绍基本选择器的使用了。

复合选择器说明表#

选择器 描述 举例
选择器1 选择器2{属性:值;} 多元素选择器。同时匹配选择器1和选择器2,多个选择器之间用逗号隔开即可。 h1,h2,h3{color: red;}
E F {属性:值;} 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格隔开即可。 .box h1{color: red;}
E>F{属性:值;} 子元素选择器,匹配所有E元素的子元素为F div >h1{color:red;}
E+F{属性:值;} 相邻元素选择器,匹配所有紧跟随着E元素之后的同级元素F div+div{color:red;}

多元素选择器#

  • 多元素选择器在工作当中经常会用到,主要用于设置多个元素使用同一种CSS样式。
  • 让我们进入多元素选择器实践,实践内容如:将HTML页面中的div标签、h1标签、p标签、中的文本颜色设置为红色。
  • 代码块

Copy

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>多元素选择器</title>
</head>
    <style>
        div,h1,p{
           color: red;
        }
    </style>
<body>
    <div>成功不是打败别人,而是改变自己。</div>
    <h1>成功不是打败别人,而是改变自己。</h1>
    <p>成功不是打败别人,而是改变自己。</p>
</body>

</html>
  • 结果图

  • 注意:作用给列表中的所有的选择器设置样式,class类选择器或id选择器也是一样,在这里就拿class类选择器属性值为.box为例,其余的大家可以自己尝试。

  • 代码块

Copy

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>多元素选择器</title>
</head>
    <style>
        .box,h1,p{
           color: red;
        }
    </style>
<body>
    <div class="box" >成功不是打败别人,而是改变自己。</div>
    <h1>成功不是打败别人,而是改变自己。</h1>
    <p>成功不是打败别人,而是改变自己。</p>
</body>

</html>
  • 结果图

后代元素选择器#

  • 让我们进入后代元素选择器实践,实践内容如:将class属性值为.box的后代元素文本颜色设置为红色,给大家介绍下结构:class属性值为.box中一共有三个子元素,第一个h1标签、第二个h1标签、第三个div标签、但是第三个子元素为div标签里面还有一个子元素为h1标签或者我们可以理解为class属性值为.box的孙子辈元素。
  • 代码块

Copy

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>后代元素选择器</title>
</head>
    <style>
        .box h1{
           color: red;
        }
    </style>
<body>
    <div class="box" >
        <h1>成功不是打败别人,而是改变自己。</h1>
        <h1>微笑是最初的信仰</h1>
        <div>
            <h1>成功不是打败别人,而是改变自己。</h1>
        </div>
    </div>

</body>

</html>
  • 结果图

  • 注意:后代选择器只能包含在class属性值为.box里面的所有属性。


子元素选择器#

  • 让我们进入子元素选择器实践,实践内容如:将class属性值为.box的子元素文本颜色设置为红色,给大家介绍下结构:class属性值为.box中一共有三个子元素,第一个h1标签、第二个h1标签、div标签、但是第三个子元素为div标签里面还有一个子元素为h1标签或者我们可以理解为class属性值为.box的孙子辈元素。
  • 代码块

Copy

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>子元素选择器</title>
</head>
    <style>
        .box > h1{
           color: red;
        }
    </style>
<body>
    <div class="box" >
        <h1>成功不是打败别人,而是改变自己。</h1>
        <h1>微笑是最初的信仰</h1>
        <div>
            <h1>成功不是打败别人,而是改变自己。</h1>
        </div>
    </div>

</body>

</html>
  • 结果图

  • 注意:子元素选择器和后代元素选择器是不样的,子元素选择器是将class属性值为.box中的子元素设置CSS样式,后代元素选择器是将class属性值为.box中的所有元素设置CSS样式,现在大家应该明白了,为什么div标签中的h1标签文本颜色没有被渲染的原因了吧,因为div标签中的h1标签是孙子辈。


相邻元素选择器#

  • 相邻元素选择器必须满足以下条件才会匹配。
  • E元素与F元素必须是兄弟关系,意思就是平辈关系。
  • E元素与F元素必须要紧挨着,就是之间不能有任何元素阻挡。
  • 要求F元素一定是在E元素的下面。
  • 让我们进入相邻元素选择器实践,实践内容如:将HTML页面中的class属性值为.box的相邻元素文本颜色设置为红色。
  • 代码块

Copy

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>相邻元素选择器</title>
</head>
    <style>
        .box + h1{
           color: red;
        }
    </style>
<body>
    <h1>我在上面学习</h1>
    <div class="box" >
        <h1>成功不是打败别人,而是改变自己。</h1>
    </div>
    <h1>我在下面学习</h1>
</body>
</html>
  • 结果图

  • 注意:大家一定要注意以上的2个必须和1个一定的规则,否则CSS样式不会被渲染。

原文地址:https://www.cnblogs.com/lonelyxmas/p/11964795.html

时间: 2024-11-10 16:25:10

CSS复合选择器是什么?复合选择器是如何工作的相关文章

CSS样式表-------第二章:选择器

二 .选择器 内嵌.外部样式表的一般语法: 选择器 { 样式=值: 样式=值: 样式=值: ...... } 以下面html为例,了解区分一下各种样式的选择器 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link href="file:///E|/网页

css代码中的加号(+)相邻选择器的作用

css代码中的加号(+)相邻选择器的作用:本章节介绍一下css中相邻选择器的作用,此选择器用加号(+)表示.此选择器能够匹配前面的选择器紧邻的兄弟元素.代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> &l

css基础篇(六)——选择器优先级计算

1.css选择器计算方法 场景描述:如下代码,你认为文字会显示什么颜色,原因是什么? <style> #box .item{     color:blue; } .lbox .list .item{     color:red; } </style> <div id="box" class="lbox">     <ul class="list">         <li class=&quo

Css3之高级-1 Css复杂选择器(兄弟选择器 、属性选择器、伪类选择器、伪元素选择器)

一.兄弟选择器 相邻兄弟选择器 - 相邻兄弟选择器匹配指定元素的相邻兄弟元素 - 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器 - 使用加号(+)作为结合符 通用兄弟选择器 - 通用兄弟选择器匹配某元素后面的所有兄弟元素 - 使用符号(~)作为结合符,即 element1~element2 - 两种元素必须拥有相同的父元素,但是element2不必直接紧随element1 二.属性选择器 属性选择器 - 属性选择器能够将元素附带的属性用于选择器中,从而对带

CSS基础学习四:元素选择器

在上一篇的博客中我们已经熟悉CSS语法,对于CSS代码格式也有了一些认识.下面我就来说一下CSS代码式: 选择器名称 { 属性名:属性值:属性名:属性值:......} 属性与属性之间用分号隔开:属性与属性值直接使用冒号连接:如果一个属性有多个属性值的话,那么多个属性值用空格隔开. 上述提到了我这一篇博客所要说的主题,就是选择器.选择器就是指定CSS语法要作用的标签,那个标签的名称 就是选择器. 基本的选择器可分为三种: a)html标签名选择器:使用的是html的标签名,又叫元素选择器. b)

css知多少(6)——选择器的优先级

1. 引言 上一节<css知多少(5)--选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的,而且两个设置的颜色不一样,这里的<span>到底听从谁的命令? 上面还是比较简单的,下面在来一个复杂的: 上图中的<li>该显示成什么颜色呢? 2. 特指度 要解决以上问题,我们需要引入一个概念--特指度(specificity).特指度表示一个css选择器表达式的重要程度,可以通过

css知多少(5)——选择器

1. 引言 从本节开始,就进入本系列的第二个部分——css和html的结合——说白了就是选择器. CSS中定义了样式,如何将这些样式设置到相应的html节点上?就不得不通过选择器.让浏览器知道css选择了哪一个dom节点,浏览器就会乖乖的把相应的样式渲染成视图. 至于css能把页面渲染成什么样子,这是本系列的第三部分. 第一部分讲css样式的加载和层叠,第二部分讲选择器以及选择器的等级,第三部分讲呈现的各种样式(背景.字体.定位.浮动等).这样一个思路,也正式浏览器使用css的流程,是最有效的学

css中最基本几个选择器

css中有四种不同的选择器 ①类选择器,又叫class选择器.类选择器{属性名:属性值:...}/*类选择器*/.s1{ font-weight:bold;font-size:16px;}②id选择器#id选择器名{属性名:属性值;}/*id选择器*/#id1{ font-size:40px;}③html元素选择器html元素名称{属性名:属性值;}④通配符选择器 检索或设置对象四边的外补丁.默认值为 0 0.如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边.如果只提供一个,将用于全部

css知多少(6)——选择器的优先级(转)

1. 引言 上一节<css知多少(5)--选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的,而且两个设置的颜色不一样,这里的<span>到底听从谁的命令? 上面还是比较简单的,下面在来一个复杂的: 上图中的<li>该显示成什么颜色呢? 2. 特指度 要解决以上问题,我们需要引入一个概念--特指度(specificity).特指度表示一个css选择器表达式的重要程度,可以通过

css知多少(5)——选择器(转)

1. 引言 从本节开始,就进入本系列的第二个部分--css和html的结合--说白了就是选择器. CSS中定义了样式,如何将这些样式设置到相应的html节点上?就不得不通过选择器.让浏览器知道css选择了哪一个dom节点,浏览器就会乖乖的把相应的样式渲染成视图. 至于css能把页面渲染成什么样子,这是本系列的第三部分. 第一部分讲css样式的加载和层叠,第二部分讲选择器以及选择器的等级,第三部分讲呈现的各种样式(背景.字体.定位.浮动等).这样一个思路,也正式浏览器使用css的流程,是最有效的学