CSS复合选择器是什么？复合选择器是如何工做

时间  2019-11-20
标签 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标签、中的文本颜色设置为红色。

  • 代码块html

<!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为例，其他的你们能够本身尝试。ui

  • 代码块code

<!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>

  • 结果图htm

后代元素选择器

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

  • 代码块blog

<!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>

  • 结果图get

  • 注意：后代选择器只能包含在class属性值为.box里面的全部属性。it

子元素选择器

  • 让咱们进入子元素选择器实践，实践内容如：将class属性值为.box的子元素文本颜色设置为红色，给你们介绍下结构：class属性值为.box中一共有三个子元素，第一个h1标签、第二个h1标签、div标签、可是第三个子元素为div标签里面还有一个子元素为h1标签或者咱们能够理解为class属性值为.box的孙子辈元素。table

  • 代码块class

<!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的相邻元素文本颜色设置为红色。

  • 代码块

<!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样式不会被渲染。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程