HTML+CSS之选择器

CSS选择器是CSS规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。选择器所选择的元素，叫做“选择器的对象”。

一 基本选择器

1.1 通配符选择器（*）

通配符选择器是用来选择所有元素，也可以选择某个元素下的所有元素

//选择文档中的所有元素
*{
    margin: 0px;
    padding: 0px;
 }
 
 // 选择demo容器下的所有元素
.demo * {
    border:1px solid blue;
}

1.2 元素选择器（E）

元素选择器就是选择文档的元素，如html,body,p,div等等。

li {
    backgroundcolor: red;
}

1.3 类选择器（.className）

类选择器是以一独立于文档元素的方式来指定样式，需要保证类名在html标记中存在.

 // 给标记有demo类名的元素添加属性
.demo {
    border:1px solid blue;
}

// 类选择器可以结合元素选择器来使用(以下代码选择p元素且有一个类名叫demo的元素)
p.items {
    color: red;
}

// html中可用空格分隔多个属性名，选择器也可以使用多类连接在一起（以下代码只有同时包含两个属性名的元素可以被选择）
.important.items {
    background:#ccc;
}

1.4 id选择器（#ID）

ID选择器和类选择器很相似的，在使用ID选择器之前也需要先在html文档中加注ID名称，在名称前使用"#"如(#id)。其使用的注意事项如下：

1. 一个文档中一个id选择器只充许使用一次，因为id在页面中是唯一的
2. id选择器不能像类选择器一样多个合并使用，一个元素只能命名一个id名

#demo {
    border:1px solid blue;
}

1.5 群组选择器（selector1,selectorN）

当所要设置的元素样式相同时，可将每一个选择器匹配的元素集合并，并用逗号隔开。

#demo1, #demo2 {
    border:1px solid blue;
}

二 层次选择器法

2.1 后代选择器（Ｅ Ｆ）

后代选择器可以选择某元素的后代元素，比如说:E F，前面E为祖先元素，Ｆ为后代元素，所表达的意思就是选择了Ｅ元素的所有后代Ｆ元素，注意他们之间需要一个空格隔开。这里不论Ｆ在Ｅ中有多少层关系，都将被选中：

// 以下代码表示选中.demo后代中所有的li元素
.demo li {
    color: blue;
}

2.2 子元素选择器（E>F）

子元素选择器只能选择某元素的子元素，其中：E为父元素，F为子元素，E>F所表示的是选择了Ｅ元素下的所有子元素Ｆ。与后代选择器（Ｅ Ｆ）不同的是子元素选择器中Ｆ只可以是Ｅ的子元素。

// 以下代码表示选择ul下的所有子元素li
ul > li {
    background: green;
}

2.3 相邻兄弟元素选择器(E + F)

相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素，换句话说，EF两元素具有一个相同的父元素，而且Ｆ元素在Ｅ元素后面，而且相邻，这样我们就可以使用相邻兄弟元素选择器来选择Ｆ元素。

// 以下代码代表选择.demo后面相邻的li元素（有且仅有一个）
.demo + li {
    background: green;
}

2.4 通用兄弟选择器（Ｅ 〜 Ｆ）

通用兄弟元素选择是CSS3新增加一种选择器，这种选择器将选择某元素后面的所有兄弟元素，即：E和F元素是属于同一父元素之内，并且F元素在Ｅ元素之后，那么E ~ F 选择器将选择中所有Ｅ元素后面的Ｆ元素。
通用兄弟选择器和相邻兄弟选择器极其相似，只不过，相邻兄弟选择器仅选择是元素的仅与其相邻的后面元素（选中的仅一个元素）；而通用兄弟元素选择器，选中的是元素相邻的后面兄弟元素。

三 伪类选择器

:link 所有未被访问的链接(a标签的默认样式)。
:visited 所有已被访问的链接。
:active 点击后没有松开鼠标的链接。
:hover 鼠标指针位于其上的链接。
:focus 选择元素具有焦点后的样式

四 伪元素选择器

::after  在每个 <p> 元素之后插入内容
::before  在每个 <p> 元素之前插入内容
::first-letter  匹配每个 <p> 元素中内容的首字母
::first-line  匹配每个 <p> 元素中内容的首行
::selection	 匹配用户选择的元素部分
::placeholder  匹配每个表单输入框（例如 <input>）的 placeholder 属性

其中，::before和::after的使用较为广泛，具体用法及应用参见：::before和::after伪元素用法