HTML5选择器学习

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

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

2、ID选择器
     通常在编写页面的时候设定某些标签元素的ID,同一个HTML中ID不允许重复，例如，

,后来使用的时候就用#wrapper，这里的”#wrapper“就是ID选择器，在CSS中以”#“开头。

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

这个段落是红色。
这个段落是绿色。

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

.center {text-align: center}

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

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

This heading will be center-aligned



This paragraph will also be center-aligned.

4、后代选择器

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

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

外部
 
  
     
内部
     
 
         
列表1
         
列表2
         
列表3
     
 

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

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

5、子元素选择器

      CSS样式设定如下：

div > em {color:red;}

      HTML代码如下：

这个em是div中的元素
p中的是p的子元素

  

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

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

div + p{color:red;}

     HTML代码如下：

与div相邻的上一个p

div中的p

与div相邻的下一个p
不与div相邻的p

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