CSS3选择器大全，详细介绍，有例子

CSS样式由两部分组成：选择器（Selector）和声明块（Declaration Block），声明块中包含属性和属性值，属性和属性值之间由冒号隔开，声明块被一对{}括起起来，花括号之间可以包含多个声明，多个声明被分号（;）隔开。

选择器 {属性:属性值;属性:属性值;……}

eg:

p{
  color:red;
  text-align:center;
  font-size:27px;
}

根据选择器的用途可以把选择器分为标签选择器、类选择器、id选择器、伪类选择器等。

1.通用选择器

它对网页中的所有HTML元素起作用，由于许多HTML标签的边界和填充值默认不为零，所以通过通用选择器在开始时将网页中HTML标签的默认边界和填充值设为零，如果某些元素需要设置边界、填充和边框时在进行单独设置，便于控制。
它的基本语法为：

*{属性:属性值;}

eg：

*{
  margin:0px;
  padding:0px;
  border:0px;
}

2.标签选择器

用来控制页面中的HTML标签，它的基本语法为：

标签名称{属性:属性值;}

eg:

/*这里控制整个页面的<p>标签样式*/
p{
  font-family:黑体;
  font-size:15px;
  color:blue;
}

3.类选择器

类（class）选择器用来给一类标签添加样式效果，以此来达到对某些特殊网页元素的样式设置。类选择器定义的样式可以被不同元素同时使用，类选择器包括HTML文档中不同类型的一些元素（就像是一种分类），一个类选择器在一个HTML文档中可以多次使用。

.类选择器名称{属性:属性值;}

类选择器中的类名定义由“.”（英文句点）开始，具体名称由设计人员自定义。类的名称可以是任意英文字符串，也可以是以英文字母开头与数字组合的名称，通常情况下，这些名称尽量做到见名知意的自定义，名称应该是其效果和功能的简要缩写。可以使用HTML标签的class属性来引用类选择器。
eg:

.font1{color:blue;}
.font2{color:red;}

HTML文档中引用

<p class="font1">我是蓝色</p>
<p class="font2">我是红色</p>
<h1 class="font1">我是蓝色一级标题</h1>

4.id选择器

id选择器与类选择器类似，都是用于定义网页上特定元素的样式，不同的是id选择器要求**只能在网页中使用一次,**也就是说id选择器所定义的CSS样式特定指向页面中唯一元素。其基本语法如下：

#id选择器名称{属性:属性值;}

id选择器中的id名称由“#”开始，具体的id名称由设计人员自定义。
eg:

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

HTML标签的id属性来引用类选择器。

  <p id="g">我是绿色</p>
  <p id="r">我是红色</p>
  <h1 id="g">我是蓝色一级标题</h1>

这里两个标签使用了同一个id选择器，样式是可以显示出来的，但是实际上是有语法错误的。只在使用CSS来添加样式时不会出现问题，但是当使用JavaScript时由于DOM中要通过getElementById获取元素如果同一个页面中出现了同样的id名称到时候获取元素会出错。

类选择器和id选择器可能是区分大小写的，这取决于文档的语言。

5.伪类选择器

CSS伪类用于向某些选择器添加特殊的效果。伪类也属于选择器的一种，包括:first-child、:link、:visited、:hover、:active、:focus、:lang等，但是由于不同的浏览器支持不同的伪类，因而没有一个统一的标准，许多伪类并不常用到，其中有一组伪类是浏览器都支持的，那就是超链接伪类，包括:hover、:link、:visited、:active。
利用伪类定义的CSS样式并不是作用在标签上，而是作用在标签的状态上。
最常应用在标签<a>上，表示超链接的4种不同状态：

• link表示超链接热点在没有被点击时的样式
• visited表示超链接热点已经被访问时的样式
• active表示超链接热点被激活瞬间的样式
• hover表示当鼠标悬停在超链接热点上面时的样式

在CSS定义中，伪类名称对大小写不敏感；,a:hover必须被置于a:link和a:visited之后才是有效的；a:active必须被置于a:hover之后才是有效的。

eg:

a:link{color:#FF0000;}
a:visited{color:#00FF00;}
a:hover{color:#FF00FF;}
a:active{color:#0000FF;}

伪类选择器不仅可以应用在a标签上，也可以应用在其他网页元素上。最常用的是:hover伪类，该伪类是当鼠标移至页面元素上的状态。

p:hover{font-size:150%;}
/*当鼠标移至标签p影响的文字上时，段落的文字放大为原来字体大小的1.5倍*/

伪类选择器还可以用在一些表单元素上，但表单元素的应用浏览器IE7以下不支持

/*IE8（以及更高版本）支持:focus伪类。而且必须规定！DOCTYPE*/
input:focus{
    background-color:yellow;
}
/*向拥有键盘输入焦点的元素添加背景样式如果网页中包含form表单的文本框元素，则文本框获取焦点时其背景变为黄色*/

6.群组选择器

当几个元素样式属性一样时可以共同调用一个声明，元素之间用逗号分隔。
eg：

h1,h2,h3,h4,h5,h6{
    color:red;
}
/*将所有标题元素的颜色设为红色*/

7.派生选择器

派生选择器通过依据元素在其位置上下文关系来定义样式，可以使标签更加简洁。
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。在派生选择器中，每个选择器对象之间使用空格作为分隔符，除了可以派生一级后代，也可以派生多级后代。

li strong{
    font-style:italic;
    font-weight:normal;
}
/*这里将li标签下的strong元素设为斜体，而普通的strong则不发生变化*/

HTML中

<p><strong>我是粗体但不是斜体</strong></p>
<ol>
    <li><strong>我是斜体字</strong></li>
    <li>正常字体</li>
</ol>

8.属性选择器

属性选择器可以为拥有指定属性的HTML元素设置样式，而不仅局限于class和id属性。

只有规定了！DOCTYPE时，IE7及以上版本才支持属性选择器

1.属性选择器

下面例子为带有title属性的所有元素设置样式

[title]
{
  color:red;
}

2.属性和值选择器

下面的例子为title="W3School"的所有元素设置样式

[title="W3School"]
{
     border:5px solid blue;
}

3.属性和值选择器：多个值

下面例子为包含指定值title属性的所有元素设置样式。适用于有空格分隔的属性值的情况。

[title~=hello] { color:red; }

下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：

[lang|=en] { color:red; }

4.属性选择器设置表单样式

属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}


input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}

5.CSS属性选择器参考表

9.组合选择器

CSS的组合选择器说明了两个选择器直接的关系，包含各种简单选择器的组合方式。在CSS3中包含了四种组合方式：后代选择器（以空格分隔）、子元素选择器（以大于号分隔）、相邻兄弟选择器（以加号分隔）和普通兄弟选择器（以波浪号分隔）。

1.后代选择器

后代选择器（descendant selector）又称为包含选择器。该元素与其后元素之间以空格分隔，该选择器以前面的派生选择器类似。
eg：
假设有一个文档，其中有一个边栏，还有一个主区。边栏的背景为蓝色，主区的背景为白色，这两个区都包含链接列表。不能把所有链接都设置为蓝色，因为这样一来边栏中的蓝色链接都无法看到。
解决方法是使用后代选择器。在这种情况下，可以为包含边栏的 div 指定值为 sidebar 的 class 属性，并把主区的 class 属性值设置为 maincontent。然后编写以下样式：

div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}

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

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

2.子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong {color:red;}

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

3.相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一个元素后的元素，且二者有同父元素。该元素与其相邻兄弟元素之间以“+”号分隔。

div+p{
    background-color:yellow;
}

/该实例选取了所有位于div元素后的第一个p元素设置其背景为黄色/

相邻兄弟结合符还可以结合其他结合符：

html > body table + ul {margin-top:20px;}

这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。
注意下面这种相邻兄弟选择器用法

li + li {font-weight:bold;}

在上面的片段中，div 元素中包含两个列表：一个无序列表，一个有序列表，每个列表都包含三个列表项。这两个列表是相邻兄弟，列表项本身也是相邻兄弟。不过，第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟，因为这两组列表项不属于同一父元素（最多只能算堂兄弟）。li与li之间是相邻兄弟，3个列表项中第一个与第二个，第二个与第三个之间都是相邻选择器，所以第一个列表项没有样式而第二、三个列表项有。

4.普通兄弟选择器

普通兄弟选择器选取所有指定元素的相邻兄弟元素。

div~p{background-color:yellow;}