选择器
CSS选择器的主要作用是：将符合条件的元素选择出来，以便于为其设置样式。
CSS选择器基本选择器、复合选择器、伪类选择器和伪元素选择器，这里主要介绍基本选择器。基本选择器只能选中某个或某类元素，不涉及到多个元素之间的关系。
元素选择器
元素选择器又叫标签选择器，语法为tag_name{}，用于给某一标签设置样式。例如：
1
2
3
p {
color: red;
}
上述css语句就将所有p标签内的元素设置成红色。
类选择器
类选择器的语法为.class_name{}，用于给某个类设置样式，标签中的属性class用于指定类名。例如：
1
2
3
.red {
color: red;
}
所应用的的HTML代码：
1
2
3
4
5
<div>
<span class="red">1</span>
<span>2</span>
<span>3</span>
</div>
上述代码将文字1设置为红色。
多类名
CSS可以给一个标签指定多个类，类名之间用空格隔开。
1
2
3
4
5
6
7
.red {
color: red;
}
.big {
font-size: 30px;
}
所应用的的HTML代码：
1
2
3
4
5
<div>
<span class="red big">1</span>
<span>2</span>
<span>3</span>
</div>
上述代码将文字1设置为红色，并将其字体设置为30px。
元素选择器+类选择器
CSS选择器可以选择指定类名的指定元素，语法为tag_name.class_name{}，例如：
1
2
3
p.red {
color: red;
}
所应用的的HTML代码：
1
2
3
4
5
<div>
<p class="red">1</p>
<span class="red">2</span>
<span>3</span>
</div>
上述代码将p元素内的文字1设置为红色，而span虽然指定了red类，但由于不为p元素，因此不会变色。
ID选择器
ID选择器又称身份选择器，语法为#Id{}，用于给某一ID的元素设置样式。例如：
1
2
3
#red {
color: red;
}
1
2
3
4
5
<div>
<span id="red">red</span>
<span id="blue">blue</span>
<span id="yellow">yellow</span>
</div>
上述代码将文字red设置为红色。
注意，通常情况下，每一个元素有且仅能有一个ID。
属性选择器
类选择器和ID选择器本质上讲都是对属性值进行选择，属性选择器能同时选择属性和值，可看作前者的推广。
属性选择器主要分为：简单属性选择器、精准属性值选择器、部分匹配属性值选择器。
简单属性选择器
如果想要选择具有某个属性的特定元素，而不管属性值是什么，可以使用tag_name[attribute]；更简单的，如果只想选择具有某个属性的元素，不管属性值，甚至不管元素是什么，可以直接使用[attribute]，例如：
1
2
3
[href] {
color: red;
}
1
2
3
4
<div>
<span>span</span>
<a href="http://github.com">a</a>
</div>
上述代码将文字a设置为红色，因为它具有href属性。
属性选择器可以串联，如果想选出同时具有href和title属性的元素，可以使用：
1
2
3
4
a[href][title] {
color: red;
}
精准属性值选择器
如果想选择指定属性是某个精确值的元素，可以使用[attribute=value]，例如。
1
2
3
[href="http://www.baidu.com"] {
color: red;
}
1
2
3
4
<div>
<a href="http://www.baidu.com">Baidu</a>
<a href="http://github.com">Github</a>
</div>
上述代码将文字Baidu设置为红色，因为它具有href属性，并且href属性的值为http://www.baidu.com。
与简单属性选择器一样，精准属性选择器也可以串联。
部分匹配属性值选择器
如果想要匹配部分属性值，则可以使用部分匹配属性值选择器：
[foo|="bar"]：元素具有foo属性，并且其值以bar-开头或者为bar本身[foo~="bar"]：元素具有foo属性，并且其值是包含bar这一词的词组（空格分开）[foo*="bar"]：元素具有foo属性，并且其值包含bar这一子串[foo^="bar"]：元素具有foo属性，并且其值以bar开头[foo$="bar"]：元素具有foo属性，并且其值以bar结尾
属性选择器比较复杂，理解记忆即可。
通配选择器
通配选择器的语法为*{}，为页面的所有元素统一设定样式。例如：
1
2
3
* {
color: red;
}
1
2
3
4
5
<div>
<span>1</span>
<p>2</p>
<div>3</div>
</div>
上述代码将文字1、2、3均设置为红色。
通配选择器常用于为页面清除默认样式：
1
2
3
4
* {
margin : 0;
padding: 0;
}
