图解CSS3----1-关系选择器

CSS3----关系（层次）选择器

 

 

1、代码：

        <h1>包含选择符（Descendant）</h1>
        <h3>选取在div1内包含的li元素</h3>
        <div class='div1'>
            <p>Sunlike阿理旺旺</p>
            <ul>
                <li>Sunlike阿理旺旺</li>
                <li>Sunlike阿理旺旺</li>
                <li>
                    <ul>
                        <li>Sunlike阿理旺旺</li>
                        <li>Sunlike阿理旺旺</li>
                    </ul>
                </li>
            </ul>
        </div>

    .div1 li {
           color: red;
    }

 

效果： 

1、包含（后代）选择符（Descendant combinator）

选取在div1内包含的li元素

Sunlike阿理旺旺

• Sunlike阿理旺旺
• Sunlike阿理旺旺
• • Sunlike阿理旺旺
  • Sunlike阿理旺旺

 

结论：包含选择符选中的内容是：直接或间接包含的内容

 

 

 

 

2、代码：

<h1>子选择器（Child combinator）</h1>
        <p>选择所有作为div2的子元素ul</p>
        <div class='div2'>
            <p>Sunlike阿理旺旺</p>
            <ul>
                <li>Sunlike阿理旺旺</li>
                <li>Sunlike阿理旺旺</li>
                <li>
                    <ul>
                        <li>Sunlike阿理旺旺</li>
                        <li>Sunlike阿理旺旺</li>
                    </ul>
                </li>
            </ul>
            <div>
                <ul>
                    <li>Sunlike阿理旺旺</li>
                    <li>Sunlike阿理旺旺</li>
                </ul>
            </div>
        </div>

.div2>ul {
     color: gray;
}

　　

 效果：

子选择符（Child combinator）

选择所有作为div2的子元素ul

Sunlike阿理旺旺

• Sunlike阿理旺旺
• Sunlike阿理旺旺
• • Sunlike阿理旺旺
  • Sunlike阿理旺旺

• Sunlike阿理旺旺
• Sunlike阿理旺旺

 

结论：子选择符，选中的是直接的儿子，后代不算

 

 

 

 3、代码：

 <h1>子选择器（Child combinator）</h1>
        <p>选择所有作为div2的子元素ul</p>
        <div class='div2'>
            <p>Sunlike阿理旺旺</p>
            <ul>
                <li>Sunlike阿理旺旺</li>
                <li>Sunlike阿理旺旺</li>
                <li>
                    <ul>
                        <li>Sunlike阿理旺旺</li>
                        <li>Sunlike阿理旺旺</li>
                    </ul>
                </li>
            </ul>
            <div>
                <ul>
                    <li>Sunlike阿理旺旺</li>
                    <li>Sunlike阿理旺旺</li>
                </ul>
            </div>
        </div>

.div3-1+div {
     color: red;
}

　　

 效果：

相邻兄弟选择符（Adjacent combinator）

选择紧贴在选择的元素之后的元素

div3-1 Sunlike阿理旺旺

div3-2 Sunlike阿理旺旺

div3-3 Sunlike阿理旺旺

 

结论：选择相邻的元素

 

 

 

4、代码：

 <h1>相邻选择器（Adjacent combinator）</h1>
        <p>选择紧贴在选择的元素之后的元素</p>
        <div class="div3">
            <div class="div3-1">
                div3-1 Sunlike阿理旺旺
            </div>
            <div class="div3-2">
                div3-2 Sunlike阿理旺旺
            </div>
            <div class="div3-3">
                div3-3 Sunlike阿理旺旺
            </div>
        </div>
        <h1>兄弟选择器（General combinator）</h1>
        <p>选择该元素所有兄弟元素</p>
        <div class="div4">
            <div class="div4-1">
                div4-1 Sunlike阿理旺旺
            </div>
            <div class="div4-2">
                div4-2 Sunlike阿理旺旺
            </div>
            <div class="div4-3">
                div3-3 Sunlike阿理旺旺
            </div>
        </div>

.div4-1~div {
       color: red;
}

　　

 

效果：

 

通用兄弟选择符（General combinator）

选择该元素所有兄弟元素

div4-1 Sunlike阿理旺旺

div4-2 Sunlike阿理旺旺

div3-3 Sunlike阿理旺旺

 

结论：选择所有兄弟元素