There are several derived selectors in css

css中的派生选择器有3种：1、后代选择器，语法“E F{样式代码}”；2、子元素选择器，语法“E > F {样式代码}”；3、相邻兄弟选择器，语法“E + F {样式代码}”。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

CSS之派生选择器（上下文选择器）

选择器（selector）是CSS里面非常重要地一部分知识。

根据我暂时浅薄地理解，CSS就是对一份HTML代码里面的元素进行运用各种样式。

所以，第一步就是要准确地定位你想要运用样式的元素。

CSS里面通过各种选择器来定位元素。 CSS里面选择器有很多种，今天就只想说说 “派生选择器”。

一听“派生选择器”这个名字，我真心做不到见名知义地感觉它是什么选择器。一看英文名叫“contextual selectors” ,如果直译就叫“上下文选择器”。虽然名字不文雅，但是我更偏向这个名字。

contexual selector是通过依据元素在其位置的上下文关系来定义样式的。

上下文选择器的情况有三种：后代选择器，子元素选择器，相邻兄弟选择器。 

后代选择器（descendant selector)

eg:

HTML代码：

    <h1>This is a<em>important</em>heading</h1>

CSS代码： 

    h1 em {color:red;}

语法规则是 h1 和 em 之间有一个空格。那么这一条CSS代码就会运用于包含在

标签内的所有元素。
关于后代选择器，很重要的一点是第一个参数和第二个参数之间的代数是可以无限的。

eg:

HTML代码：

<ul> 
    <li>
        <ul>
            <li>
                <em>This will be styled.</em>
             </li>
        </ul>
    </li>
    <li>
        <em>This will be styled too.</em>
    </li>
</ul>

CSS代码:

ul em{color:red;}

以上css的样式会运用于HTML代码中两处橘色的元素。

子选择器（child selector) 

 子选择器只会选择某个元素的子元素，而不会扩大到任意的后代元素。

eg：

HTML代码：

<h1>This is <strong>This will be styled.</strong> important.</h1>
<h1>This is <em>really <strong>This will not be styled.</strong></em> important.</h1>

CSS代码：

h1 > strong {color:red;}

语法规则是h1和strong之间会有一个“>”符号。而这个“>”和前面的h1或者是后面的strong之间的空格都是可有可无的。

在以上的例子中，第一行HTML代码里，元素是

的子元素，所有h1 > strong这个选择器会选择到它。

第二行HTML代码里， 不是

的子元素，而是

的孙子，所有h1 > strong这个选择器不会选择到它。

相邻兄弟选择器（Adjacent sibling selector）

相邻兄弟选择器会选择某一元素紧随其后的元素，但是前提是他们拥有相同的父级。 

eg：

HTML代码：

<h1>
    <h2>This is a heading<h2>
    <strong>This will be styled.</strong>
    <strong>This will not be styled.</strong>
<h1>

CSS代码：

h2 + strong {color:red;}

语法规则是h2和strong之间有一个“＋”，“＋”和前面的h1或者后面的strong之间的空格都是可有可无的。

在 以上例子中，第一个strong紧邻着h2并且他们拥有相同的父级(h1)，所以h2 + strong会选择到第一个而不会选到第二个.

eg2:

HTML代码：

<p> 
    <ul>     
        <li>List item 1</li> 
        <li>List item 2</li> 
        <li>List item 3</li> 
    </ul> 
     <ol> 
         <li>List item 1</li> 
         <li>List item 2</li> 
         <li>List item 3</li> 
    </ol> 
</p>

CSS代码：

li + li {color:red;}

在以上的例子中li+li是选择紧挨着li后面的第一个

，所以第一个

不会被选择；而第二个

是紧挨着第一个li的，所有会被选择；第三个

是紧挨着第二个

的，也会被选择。

（学习视频分享：css视频教程）

The above is the detailed content of There are several derived selectors in css. For more information, please follow other related articles on the PHP Chinese website!