css_3_复合选择器_后代、子代、兄弟选择器

一.元素之间的关系

1. 父元素：直接包含某个元素的元素，就是该元素的父元素。
2. 子元素：被父元素直接包含的元素。
3. 祖先元素：外层包含别的元素的元素，父元素也是祖先元素。
4. 后代元素：内层被包含的元素，子元素也是后代元素。
5. 兄弟元素：拥有相同父元素的元素，互为兄弟元素。

二.后代选择器

• 作用：选中指定元素中指定的后代元素。
• 结构：

选择器1 选择器2 …选择器n { }
先写祖先，再写后代
选择器之间用空格隔开

• 举例：

    <style>
    /* 选中ul中所有的li */
        ul li {
            color: blue;
        }
    </style>

    <ul>
        <li>
            这是在说后代选择器。
        </li>
    </ul>

三.子代选择器

• 作用：选中指定元素中符合要求的子元素。
• 结构：

选择器1>选择器2>…选择器n { }

选择器之间用>隔开

• 举例：

    <style>
		/* div中的子代a元素*/
        div>a {
            color: aquamarine;
        }
    </style>

    <div>
        <a href="#">这是在说子代选择器。</a>
    </div>

• 注意：
  子代可以是后代，后代不一定是子代。

四.兄弟元素

注意：兄弟元素都是指定元素位置下面的元素。

1.相邻兄弟选择器

• 作用：选中指定元素后，指定的，紧挨着的下一个兄弟元素。
• 结构：

选择器1+选择器2 { }

• 举例：

        div+p {
            color: blueviolet;
        }

    <div>
        这是在说相邻兄弟选择器。
    </div>
    <p>
        这是在说相邻兄弟选择器。
    </p>

2.通用兄弟选择器

• 作用：选中指定元素后，符合条件的所有兄弟都选择。
• 结构：

选择器1~选择器2 { }

• 举例：

        div~p {
            color: brown;
        }

    </div>
    <p>
        这是在说通用兄弟选择器。
    </p>
    <p>
        这是在说通用兄弟选择器。
    </p>