HTML5选择器学习

HTML选择器
1、标签选择器
     直接将HTML元素中的标签作为选择器，可以是html、h1、a、strong等HTML标签，在CSS中直接展现。

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

2、ID选择器
     通常在编写页面的时候设定某些标签元素的ID,同一个HTML中ID不允许重复，例如，<div id="wrapper">,后来使用的时候就用#wrapper，这里的”#wrapper“就是ID选择器，在CSS中以”#“开头。

#red {color:red;}
#green {color:green;}

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

3、类选择器
      CSS里面用”.“开头的表示类选择器，如有如下的CSS代码

.center {text-align: center}

      在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。

      在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。

<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>

4、后代选择器

      后代选择器（descendant selector）又称为包含选择器。

     后代选择器可以选择作为某元素后代的元素。

<h3>外部</h3>
 <div id="sider">  
     <h3>内部</h3>
     <ul> 
         <li>列表1</li>
         <li>列表2</li>
         <li>列表3</li>
     </ul>
 </div>

    在这里，可以定义如下的CSS样式，就可以实现分层调用

h3 {color:green;}
#sider h3 {color:red;}
#sider ul {color:red;}
#sider ul li{color:red;}

5、子元素选择器

      CSS样式设定如下：

div > em {color:red;}

      HTML代码如下：

<div>
<em>这个em是div中的元素</em>
<p>p中的<em>是p的子元素</p>
</div>  

     显示效果为第一个<em>标签显示红色，而第二个<em>标签的子元素将不会应用此样式。

6、相邻兄弟选择器
     表示样式应用于与该元素相邻的下一个元素

div + p{color:red;}

     HTML代码如下：

<p>与div相邻的上一个p</p>
<div>
<p>div中的p</p>
</div>
<p>与div相邻的下一个p</p>
<p>不与div相邻的p</p>

只有与div相邻的下一个p才会应用此样式.