css的选择器
1、id选择器
2、派生选择器（元素标签选择）
3、类选择器（class）
4、属性选择器（选择拥有特定属性的元素）[title]
[attribute] 用于选取带有指定属性的元素。 [attribute=value] 用于选取带有指定属性和值的元素。 [attribute~=value] 用于选取属性值中包含指定词汇的元素。 [attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 [attribute^=value] 匹配属性值以指定值开头的每个元素。 [attribute$=value] 匹配属性值以指定值结尾的每个元素。 [attribute*=value] 匹配属性值中包含指定值的每个元素。
1、选择器分组
用逗号（，）串联,形成一个集合
h1, h2, h3, h4, h5, h6 { color:gray; background: white; padding: 10px; border: 1px solid black; font-family: Verdana; }
这里有一个通配符*，选择所有的元素
*{color:red;}
2、类选择器详解
（1）.类名{}；
（2）*.类名{}；通配符表示所有
（3）标签名.类名{}；特定元素下面class
（4）多类选择器
<p
class="important warning"
>This paragraph is a very important warning.</p>
通过把两个类名写在一起，表示仅同时具有这两个类的元素样式
.important.warning{}
3、id选择器，最好不要出现空格选择
4、属性选择器
属性必须完全一致
a[href][title] {color:red;}包含href/title的a标签
planet[moons] {color:red;}
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}必须完全匹配
5、后代选择器
h1 em {color:red;}h1元素下面所有的em元素都标记为红色；推荐少用
6、子选择器
h1
>
strong {color:red;}h1元素下面的子类strong元素，唯一后代；推荐多使用，结构会比较清晰
h1 > strongh1> strongh1 >strongh1>strong（此处空格没有关系，这四种写法都是可行的）
后代与子选择器的结合
table.company td > p
7、相邻兄弟选择器
li + li {font-weight:bold;}紧接在元素后面的元素，并且具有共同的父元素
多种选择器结合：
html > body table + ul {margin-top:20px;}
选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。
8、伪类
常用几个：
（1）超链接：
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 之后，才是有效的。
提示：
伪类名称对大小写不敏感。
（2）fouce的伪类
这个伪类比较有意思，聚焦
input:fouce{
background-color:#000;
}表示聚焦input框是背景变色
（3）:first-child
p:first-child表示第一个p标签
必须声明 DOCTYPE，这样 :first-child 才能在 IE 中生效。
（4）：lang这个很少见啊
q:lang(no)
{
quotes: "~" "~"
}
<p>一些文本 <q lang="no">段落中的引用</q> 一些文本。</p>
显示效果：
一些文本~段落中的引用~一些文本。
9、伪元素
（1）:first-letter向文本的首字母添加特殊的格式
p:first-letter{
font-size:20px;
color:red;
}
注释：
"first-letter" 伪元素只能用于块级元素。
注释：
下面的属性可应用于 "first-letter" 伪元素：
font color background margin padding border text-decoration vertical-align (仅当 float 为 none 时) text-transform line-height float clear
（2）:first-line向文本的首行添加样式
（3）:before向元素的前面添加新的内容
span:before{
content:url(logo.gif);
}
（4）:after向元素后面添加内容
span:after{
content:url(logo.gif);
}
