css中有哪些派生选择器

eg:

HTML代码：

     
        
            
                This will be styled.             
        
    
    
        This will be styled too.    

CSS代码:

ul em{color:red;}

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

子选择器（child selector)

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

eg：

HTML代码：

This is This will be styled. important.
This is really This will not be styled. important.

CSS代码：

h2 > strong {color:red;}

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

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

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

第二行HTML代码里， 不是

的子元素，而是

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

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

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

eg：

HTML代码：

    
This is a heading
    This will be styled.    This will not be styled.

CSS代码：

h3 + strong {color:red;}

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

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

eg2:

HTML代码：

     
             
List item 1
         
List item 2
         
List item 3
     
      
          
List item 1
          
List item 2
          
List item 3
     
 

CSS代码：

li + li {color:red;}

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

，所以第一个

不会被选择；而第二个

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

是紧挨着第二个

的，也会被选择。

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