WithCoderWithCoderWithCoder

css选择器之关系选择器

在编写css时,要实现对页面中的元素进行一对一,一对多或多对一 控制,就需要用到css选择器。html页面中的元素就是通过css选择器进行控制的。在css中,选择器分为五大种类:

  1. 基础选择器(元素选择器)

  2. 关系选择器

  3. 属性选择器

  4. 伪类选择器

  5. 伪对象选择器

本文介绍关系选择器,它分为以下几种:

    2.1 包含选择符( E F )        

        包含选择符选择所有被E元素包含的F元素,中间用空格隔开。包含选择符会命中所有符合条件后代元素,包括儿子,孙子,. . .。例如:        

<!-- 此例中,0, 1, 2, 3 会被选中并设置边框 -->
<style>
    .demo div { border:1px solid #f00; }
</style>

<div class="demo">
    <div>0
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</div>

    2.2 子选择符(E>F)

        选择所有作为E元素的直接子元素F,用>表示。与包含选择符不同的是,子选择符只能命中直接子元素,不能命中孙辈元素。例如:

<!-- 此例只有.a元素会被命中,.b不会被命中;因为只有.a是.demo元素的直接子元素 -->
.demo > div {
    position: relative;
}

<div class="demo">
    <div class="a">
        <div class="b">子选择符</div>
    </div>
</div>

    2.3 相邻选择符(E+F)

        选择紧贴在E元素之后F元素,元素E与F必须同属一个父级。与 兄弟选择符(E~F) 相同的是,相邻选择符也是选择同级的元素F;不同的是,相邻选择符只会命中符合条件的那个毗邻的兄弟元素(即紧挨着E元素之后的第一个F元素)。     

<!-- 例子中,只有 p1 会变成红色 -->
<style>
    h3+p {
        color#f00;
    }
</style>
<h3>这是一个标题</h3>
<p>p1</p>
<p>p2</p>
<p>p3</p>

    2.4 兄弟选择符(E~F)

        选择E元素后面的所有兄弟元素F,元素E与F必须同属一个父级。需要注意的是,选择的只是同级的元素F,后代中的元素F不会被选择。 而且要注意,兄弟选择符只选择E元素之后的元素F,出现在E元素之前的元素F,不会被选择到。

<!-- 例子中,p1/p2/p3 都会被选中;而 p0 因为在 h3 之前,所以不会被选中 -->
<style>
    h3~p {
        color#f00;
    }
</style>
<p>p0</p>
<h3>这是一个标题</h3>
<p>p1</p>
<p>p2</p>
<p>p3</p>

欢迎分享交流,转载请注明出处:WithCoder » css选择器之关系选择器