css中有哪些派生选择器

这篇文章将为大家详细讲解有关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代码：

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

CSS代码：

    h2 em {color:red;}

语法规则是 h2 和 em 之间有一个空格。那么这一条CSS代码就会运用于包含在<h2></h2>标签内的所有<em>元素。
关于后代选择器，很重要的一点是第一个参数和第二个参数之间的代数是可以无限的。

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代码中两处橘色的<em>元素。

子选择器（child selector)

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

eg：

HTML代码：

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

CSS代码：

h2 > strong {color:red;}

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

在以上的例子中，第一行HTML代码里，<strong>元素是<h2>的子元素，所有h2 > strong这个选择器会选择到它。

第二行HTML代码里，<strong> 不是<h2>的子元素，而是<h2>的孙子，所有h2 > strong这个选择器不会选择到它。

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

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

eg：

HTML代码：

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

CSS代码：

h3 + strong {color:red;}

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

在 以上例子中，第一个strong紧邻着h3并且他们拥有相同的父级(h2)，所以h3 + strong会选择到第一个<strong>而不会选到第二个<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>，所以第一个<li>不会被选择；而第二个<li>是紧挨着第一个li的，所有会被选择；第三个<li>是紧挨着第二个<li>的，也会被选择。

关于“css中有哪些派生选择器”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。