一些常用CSS选择器

（下面的A / B / X / Y 只是代指 标签名或元素名或属性名等）

1.*选择器

 1）可以用来定义页面所有的元素

* {
 margin: 0;
 padding: 0;
}

2）定义当前元素下所有子元素

#container * {
 border: 1px solid black;
}

2.#选择器

id选择器比较局限，不能重用

#container {
 width: 960px;
 margin: auto;
}

3..选择器

类选择器可以定义多个元素

.error {
    color: red;
}

4.X Y后代选择器

使用空格分隔元素名称（X的所有后代包括孙后面的元素）

div p {
    background-color:yellow;
}

5.X标签选择器

定义页面里所有type标签类型一样的元素

a { color: red; }
ul { margin-left: 0; }

6.X:visited and X:link

使用:link伪类来定义所有还没点击的链接；使用:visited伪类可以给曾经点击过或者访问过的链接添加样式

a:link { color: red; }
a:visted { color: purple; }

7.X + Y邻近元素选择器

只会选中紧接在另一个元素后的元素。示例中，只有每个ul后面的第一个段落是红色的

ul + p {
 color: red;
}

8.X > Y后代选择器

只会选中直接后代（不会包括孙和孙之后的元素）

div#container > ul {
    border: 1px solid black;
}

9.X ~ Y兄弟选择器

只要在ul后的p兄弟元素都会被选中

ul ~ p {
 color: red;
}

10.X[title]属性选择器

//html
<a href="#" title="Some title">consectetur</a>  //Effective
<a href="#">adipisicing</a>  //invalid

//css
a[title] {
 color: green;
}

11.X[href="foo"]

所有指向http://www.baidu.com的链接都是绿色

a[href="http://www.baidu.com"] {
    color: green; 
}

12.X[href*="baidu"]

只要链接中包含baidu都会匹配上

a[href*="baidu"] {
    color: green; 
}

13.X[href^="http"]

匹配以http开头的链接

 a[href^="http"] {
    color: red;
  } 

14.X[href$=".jpg"]

匹配以.jpg结尾的链接

a[href$=".jpg"] {
 color: red;
}

15.X[data-*="foo"]

先用使用自定义属性，然后用属性选择器匹配

//html

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>
<a href="path/to/image.png" data-filetype="image"> Image Link </a>
<a href="path/to/image.gif" data-filetype="image"> Image Link </a>

//css
a[data-filetype="image"] {
 color: red;
}

16.X[foo~="bar"]

波浪符号（~）可以让你定义取值带有空格的属性

//html
<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

//css
/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
     color: red;
}
/* And which contain the value "image" */
a[data-info~="image"] {
    border: 1px solid black;
}

17.X:checked

这个伪类可以用来定义选中（checked）的元素，比如单选按钮（radio）或多选按钮（checkbox）

input[type=radio]:checked {
 border: 1px solid black;
}

18.X:after

伪类before和after分别可以在元素前面和后面添加内容

.clearfix:after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  font-size: 0;
  height: 0;
  }
.clearfix { 
 *display: inline-block; 
 _height: 1%;
}

19.X:hover用户交互伪类

鼠标划过链接，链接会出现下划线（border-bottom）

a:hover {
 border-bottom: 1px solid black;
}

20.X:not(selector)否定伪类

选中所有的div元素，除了一个id为container的div

div:not(#container) {
 color: blue;
}

21.X::pseudoElement

使用伪元素（用::表示）来定义某些片段元素，比如第一行或第一个字母。这只能用于块状（block）元素

匹配段落的第一个字母

p::first-letter {
 float: left;
 font-size: 2em;
 font-weight: bold;
 font-family: cursive;
 padding-right: 2px;
}

匹配段落的第一行

p::first-line {
 font-weight: bold;
 font-size: 1.2em;
}

22.X:nth-child(n)

匹配列表里的第二个元素

li:nth-child(2) {
 color: red;
}

23.X:nth-last-child(n)

匹配第三到最后一个元素

li:nth-last-child(3) {
 color: red;
}

24.X:nth-of-type(n)

只有第三个ul会有边框

ul:nth-of-type(3) {
 border: 1px solid black;
}

25.X:nth-last-of-type(n)

选择倒数第n个元素

ul:nth-last-of-type(n) {
 border: 1px solid black;
}

26.X:first-child

这种伪类可以用于选中母元素的第一个子元素

ul li:first-child {
 border-top: none;
}

27.X:last-child

last-child是first-child的反面，可以匹配最后一个子元素

ul > li:last-child {
 color: green;
}

28.X:only-child

只有当div只有一个p子元素的时候段落字体才是红色的

//html
<div><p> My paragraph here. </p></div>
<div>
 <p> Two paragraphs total. </p>
 <p> Two paragraphs total. </p>
</div>

//css
div p:only-child {
 color: red;
}
第二个div里面的段落不会被选中，只有第一个div的段落才被选中。只要母元素含有超过一个子元素，only-child伪类就会失效

29.X:only-of-type

only-of-type会匹配母元素里没有邻近兄弟元素的子元素。例如，匹配所有只有一个列表元素的ul

li:only-of-type {
 font-weight: bold;
}

30.X:first-of-type

可以用来选择该类型的第一个元素。

31.X,Y

选择所有 X元素和 Y元素

h1,p
{
    background-color:yellow;
}

32.element.class 选择器

选择所有 class="hometown" 的 <p> 元素

p.hometown {
    background-color:yellow;
}

33.AB选择器

匹配所有同时含有 A和B的元素

//html
<div class="hello world"></div>

//css
.hello.world{
    color:red;
}

注意和 A B后代选择器区分，这个是没有空格的