CSS选择器
CSS选择器
基本选择器
通配符选择器
* {
border: 1px solid black;
}
标签选择器
p {
border: 1px solid black;
}
id选择器
唯一性（每个元素标签有且仅有一个，但css中不同元素标签可以用相同的id，但是我们编码时应注意不同元素标签不使用相同的id），<p id="txt"></p>
#txt {
border: 1px solid black;
}
class选择器
不具有唯一性，如：<p class="txt1 txt2"></p>
.txt1{
border: 1px solid black;
}
.txt2{
color:red;
}
组合选择器
把基本选择器通过特殊符号连接，形成有意义的可作用于内容（改变样式）的选择器
分组选择器
把两个或多个选择器用“，”隔开，下例中div和p标签背景均为红色；
div,p {
background: red;
color: #fff;
}
p {
font-size: 50px;
}
嵌套选择器（后代选择器）
多个标签用空格隔开，指定父标签下的子元素。下例中，所有div中的p的背景为红色，而div外的p的背景则不变；div为p的祖先元素，可以不是最近的父元素。
div p {
background: red;
}
子元素选择器
多个标签用“>”隔开，前面标签必须为后面标签的父元素，祖先元素不行。
div>p {
background: red;
}
相邻兄弟选择器
多个标签用“+”隔开，相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。下例中与div平级的p背景为红色，但div的背景未设置。
div+p {
background: red;
}
属性选择器
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。实例1为带有 title 属性的所有元素设置样式
[title]
{
color:red;
}
[属性] 如：[title]
基本选择器[属性] 如：p[title]
[属性=值]
如: [title=W3School] <div title="W3School"></div>
[属性~=值] : 用于选取属性值中包含指定词汇的元素。用空格隔开
如：[title~=ool] <div title="ool School"></div>
[属性^=值] ：匹配属性值以指定值开头的每个元素。
如：[title^=ool] <div title="ooll"></div>
[属性$=值] ：匹配属性值以指定值结尾的每个元素。
如：[title$=ool] <div title="wool"></div>
[属性*=值] ：匹配属性值中包含指定值的每个元素。
[属性|=值] ：用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
伪元素选择器
语法：
selector:pseudo-element {property:value;}
CSS 类也可以与伪元素配合使用：
selector.class::pseudo-element {property:value;}
:first-letter 向文本的第一个字母添加特殊样式。（只能用于块级元素）
下面的属性可应用于 "first-letter" 伪元素：
- font
- color
- background
- margin
- padding
- border
- text-decoration
- vertical-align (仅当 float 为 none 时)
- text-transform
- line-height
- float
- clear
:first-line 向文本的首行添加特殊样式。（只能用于块级元素）
下面的属性可应用于 "first-line" 伪元素：
- font
- color
- background
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<p>SSS</p>
</body>
</html>
p:before{
content: url(cat.jpg);
}
p:after{
content: after;
}
p{
color:green;
}
:before 在元素之前添加内容
:after 在元素之后添加内容。
伪类选择器
参考：w3school
伪类的语法：
selector : pseudo-class {property: value}
CSS 类也可与伪类搭配使用
elector.class : pseudo-class {property: value}
锚伪类
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
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 之后，才是有效的。 伪类名称对大小写不敏感。
:first-child 伪类
使用 :first-child 伪类来选择元素的第一个子元素，实例如下：
p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}
注意：第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。第二个规则将作为某个元素（在 HTML 中，这肯定是 ol 或 ul 元素）第一个子元素的所有 li 元素变成大写。
