摘要：五后代选择器包含选择器后代选择器可以选择作为某元素后代的元素。匹配下所有的元素匹配所有为的下所有的元素匹配成功匹配失败注意有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。子元素选择器，选择其子元素。

CSS选择器是学习CSS的一个核心部分，HTML页面中的元素就是通过CSS选择器来进行控制的，熟练使用CSS选择器能迅速根据文档结构对文档样式进行一对一，一对多或者多对一的控制和调整。

文档的元素是最基本的选择器也是最常见的选择器，如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身，如：

html {margin: 0; padding: 0;}
h1 {font-family: "华文楷体"; color:blue;}
a {font-size:16px; text-decoration: none;}

在 W3C 标准中，元素选择器又称为类型选择器（type selector）。类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例，所以类似HTML, XML等标记语言都可以通过类型选择器来匹配，甚至一些自定义标签都会生效。

类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以多带带使用，也可以与其他元素结合使用。

提示： 只有适当地标记文档后（指定claess属性），才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。

语法： 类选择器前面有个"."。

/* 基本语法 */
.important {color:red;}
/* 结合通配符使用 */
*.important {color:red;}
/* 结合元素使用，解释为：其 class 属性值为 important 的所有 p 元素 */
p.important {color:red;}

CSS多类选择器

HTML元素的class属性可以包含一个词列表，各个词之间用空格分隔，词的顺序无关紧要。如：

    This paragraph is a very important.



    This paragraph is a very warning.



    This paragraph is a very important warning.

设置class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。就可以写作：

.important {font-weight:bold;}
.warning {font-style:italic;}
/* 注意：在HTML元素的class属性中的两个词需要用“空格”隔开，在CSS中不能用“空格”隔开 */
.important.warning {background:silver;}

注意： 把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限），如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。如：

p.important.urgent {background:silver;}

这个选择器将只匹配 class 属性中同时包含词 important 和 urgent 的 p 元素。因此，如果一个 p 元素的 class 属性中只有词 important 和 warning，将不能匹配。不过，它能匹配以下元素：

    This paragraph is a very important.




    This paragraph is a very important.

语法： ID选择器前面有个"#"。

/* 基本语法 */
#intro {font-weight:bold;}
/* 配合通配符使用 */
*#intro {font-weight:bold;}

与Javascript的区别：

/* 在同一个页面中能匹配所有 ID 为 mostImportant 的元素 */
#mostImportant {color:red; background:yellow;}

/* 在同一个页面中只能获取文档中第一个 ID 为 mostImportant 的内容 */
document.getElementById("mostImportant").innerHTML;

This is important!
This is important!
This is important!

与类选择器的区别：

区别 1：只能在文档中使用一次
不同于类选择器，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。

区别 2：不能使用 ID 词列表
不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。

注意：

关于命名：id和class属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用；

关于大小写：id和class在HTML和XHTML中是区分大小的。

CSS 2 引入了属性选择器。属性选择器可以根据元素的属性及属性值来选择元素。

简单属性选择：

/* 通过单个属性选择 */
*[title] {color:red;}
a[href] {color:red;}

/* 通过多个属性选择，注意：匹配同时含有多个属性的元素 */
a[href][title] {color:red;}
img[alt][title] {border: 5px solid red;}

根据完全匹配的属性值选择：

/* 通过单个属性值选择 */
a[href="http://xiachengwei5.coding.me"] {color: red;}

/* 通过多个属性值选择 */
a[href="http://xiachengwei5.coding.me"][title="颭的博客"] {color: red;}

根据部分属性值选择

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

语法： 父元素和后代元素从左至右排列，中间用空格隔开。

/* 匹配 h1 下所有的 em 元素 */
h1 em {color:red;}

/* 匹配所有 class 为 "maincontent" 的 div下所有的 a 元素 */
div.maincontent a {color:blue;}

This is a important heading


This is a important paragraph.

注意： 有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。

例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。

因此，ul em 将会选择以下标记中的所有 em 元素：

  
  0
  
List item 1
    

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

          
List item 1-3-1
          
          
List item 1-3-2
          
List item 1-3-3
        
      
      
List item 1-4
    
  
  
List item 2
  
List item 3

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

如果你不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，那就要使用子元素选择器。

后代元素： 所有由其包裹的元素；

子代元素： 由其包裹，层级结构只比其小一级的元素；

语法： 父元素和子元素从左至右排列，中间用 > 隔开。

/* 选择只作为 h1 元素子元素的 strong 元素 */
h1 > strong {color:red;}

This is very very important.

This is really very important.

结合后台选择器和子选择器

/* 选择所有 class 为 "company" 的 table 的所有后代 td 的子元素 p */
table.company td > p

可选择紧接在另一元素后的元素，且二者有相同父元素。

语法：兄弟元素从左至右排列，中间用 + 隔开。

/* 选择紧接在 h1 后（前面的元素不能匹配）的元素，而且二者有相同的父元素 */
h1 + p {color: red;}

第一个段落
标题

第二个段落

第二个段落

总结：

用于向某些选择器添加特殊的效果。

语法： 选择器和伪类之间通过 : 隔开。

/* 选择器 : 伪类 */
selector : pseudo-class {property: value}
/* CSS 类也可与伪类搭配使用 */
selector.class : pseudo-class {property: value}

锚伪类

a:link {color: #FF0000}        /* 未访问的链接 */
a:visited {color: #00FF00}    /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}    /* 选定的链接 */

在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

伪类名称对大小写不敏感。

:first-child 伪类和:laft-child伪类

可以使用 :first-child 伪类来选择元素的第一个子元素。

  
  
These are the necessary steps:
    

         
        
Intert Key
        
Turn key
            
            clockwise
         
        
Push accelerator
    
     
    
Do
      
      not
      push the brake at the same time as the accelerator.
    

/* 选择的就是第一个 p 元素，而不是 p 元素的第一个子元素 */
p:first-child {font-weight: bold;}
/* 选择的就是最后一个 p 元素，而不是 p 元素的最后一个子元素 */
p:last-child {font-weight: bold;}
/* 选择的就是第一个 li 元素，而不是 li 元素的第一个子元素 */
li:first-child {text-transform: uppercase;}
/* 通过CSS设置字母的大小写 */
li:first-child {text-transform: lowercase;}

伪类汇总

伪元素

伪元素可用于定位文档中包含的文本，为与伪类进行区分，伪元素使用双冒号 :: 定义，但单冒号 : 也能被识别。

W3School CSS 选择器

CSS选择器详解

十分钟搞定CSS选择器