CSS选择器详解1——常用选择器

CSS选择器，实现对HTML页面元素的选择控制，为元素精确添加CSS样式。

选择器种类有很多，将其比较分类有利于对选择器进行系统的掌握。每个人都有不同的分类方法，我根据选择器的功能特点及其分支大致将其归为四大类——常用选择器、属性选择器、后代选择器、伪类选择器。

此文中，只对常用选择器进行归类整理。
（元素用字母“E”表示；属性用字母“A”表示；class表示类名；id表示id名）

1.通配选择器
语法规则： * {声明块}
选择对象： HTML文档中的所有元素
eg：

* {color:green;}/*将所有的HTML文档中的元素颜色设置为绿色*/

2.元素选择器
语法规则： E {声明块} / E1，E2{声明块}
选择对象： 对应的元素
eg：

p {font-size:20px;
   color:green;}/*将文档中所有段落字体设置为20，颜色设置为绿色*/

若对其他元素做同样颜色设置，可以将元素直接替换，则替换元素会被设置一样的样式。（将h1做出与p相同样式设置,示例代码如下）

h1 {font-size:20px;
    color:green;}/*h1元素字体设置为20，颜色为绿色*/

若多个元素有相同的样式设置，则可以对其分组。元素名在声明块之间用“，”链接即可。（示例代码如下）

p,h1 {font-size:20px;
      color:green;}

3.类选择器
语法规则： .class {声明块}
选择对象： 具有该类名的元素
attention:在使用该选择器之前需要在html文档中添加class标记。
eg:

（示例代码如下：）

/*html文档*/
<p>this is an simple example</p>
<p class="hello">this is the first example</p>
<p class="world">this is the second example</p>

/*样式表*/
.hello  {font-style:italic;
         color:red;}
/*对类名为hello的元素进行字体和颜色的设置，其他段落不会匹配该样式*/

点号之前可以加元素，用于匹配拥有该类名的指定元素，而与其他类型的元素不匹配。（示例代码如下：）

/*html文档*/
<p>this is an simple example</p>
<p class="hello">this is the first example</p>
<p class="world">this is the <span class="hello">second</span> example</p>

/*样式表*/
p.hello  {font-style:italic;
         color:green;}
         
/*p和span同属hello类，但在选择器之前加了p元素，span不是段落元素，那么span元素就不满足该选择器，所以不会设置该样式*/

4.多类选择器
语法规则： .class1 class2 …classN {声明块} （各词之间空格分隔）
选择对象： 同时满足所有罗列类名的元素
attention:
类名前后顺序无关紧要。
元素的类名列表相比于选择器类名多一个或者少一个，都会匹配失败。属于全串匹配。
eg：

/*html文档*/
<p class="hi">this is an simple example</p>
<p class="hello">this is the first example</p>
<p class="hello hi">this is the <span class="hello">second</span> example</p>

/*样式表*/
.hello  hi {font-style:italic;
            color:green;}
            
/*只有第3个段落满足类名列表，所以该样式表只作用于第3个段落*/

5.id选择器
语法规则： #id {声明块}
选择对象： 具有该id的元素
attention： 类选择器与id选择器类似，但是同一页面内，同一类名class可以设置给多个元素，但同一id只能设置给一个元素。
eg：

/*html文档*/
<p id="happy">the font will be boldfaced.</p> 
<p>the font is normal</p>

/*样式表*/
#happy {font-weight:bold;}

一个元素只能设置一个id，一个id唯一标识一个元素。