CSS 选择器内容
元素选择器
为某个元素设置样式
h1 {color:blue;}
类选择器
在 CSS 中，类选择器以一个点号显示：
.center {text-align: center}
id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
#firsrt {color:red;}
属性选择器
对带有指定属性的 HTML 元素设置样式。
属性选择器
为带有title属性的所有元素设置样式
[title]{color:red;}
属性和值选择器
为所有属性title的值为abc的元素设置样式
[title=abc]{color:red};
属性和值选择器 多个值
所有属性值包含制定词汇abc的元素（abc与其他单词用空格隔开）设置样式
[title~=abc] { color:red;}
属性和值选择器 多个值
为所有title属性值包含abc的元素设置样式
[title*="abc"]{color:red;}
属性和值选择器 以某个值开头
为所有title属性值以abc开头的元素设置样式
[title^="abc"]{color:red;}
属性和值选择器 以某个值结尾
为所有title属性值以abc结尾的元素设置样式
[title$="abc"]{color:red;}
后代选择器
后代选择器可以选择作为某元素后代的元素
后代选择器在父元素与子元素之间用空格隔开
div h1{color:red;}
子代选择器
子元素选择器（Child selectors）只能选择作为某元素的直接子元素
div>span{color:red;}
相邻兄弟选择器
可选择紧接在另一元素后的元素，且二者有相同父元素。
div元素后面紧挨着的p元素（且div、p元素必须是兄弟关系）
div+p{color:red;}
全体兄弟选择器
可选择在另一元素后的所有元素，且这些元素有相同父元素。
div元素后面的p元素（且div、p元素必须是兄弟关系）
div~p{color:red;}
选择器组 交集选择器
同时符合所有条件的元素
同时符合2个条件的元素：div元素、class值有one
div.one{color:red;}
所有同时符合3个条件的元素：div元素、class值有one、title属性值等于test
div.one[title="test"]{color:red;}
选择器组 并集选择器
至少符合一个条件的元素，不同条件之间用逗号隔开
所有的div元素 + 所有class值有one的元素 + 所有title属性值等于test的元素
满足这三个条件中的一个就可以
div, .one ,[title="test"]{color:red;}
伪类 动态伪类
链接常用伪类
a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标挪动到链接上
a:active 激活的链接（鼠标在链接上长按住未松开）
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
使用注意
:hover必须放在:link和:visited后面才能完全生效
:active必须放在:hover后面才能完全生效
除了a元素，:hover、:active也能用在其他元素上
:focus
:focus指当前拥有输入焦点的元素（能接收键盘输入）
因为链接a元素可以被键盘的Tab键选中聚焦，所以:focus也适用于a元素
文本输入框一聚焦后，背景变红
input:focus{background:red;}
伪类 结构伪类
:nth-child(n)
父元素中的第n个子元素
父元素下第n个元素，若为p元素则有效
p:nth-child(n){color:red}
:nth-last-child
:nth-last-child()的语法跟:nth-child()类似，不同点是:nth-last-child()从最后一个子元素开始往前计数
倒数第一个子元素
:nth-last-child(1)，
:nth-of-type( )、:nth-last-of-type( )
:nth-of-type()用法跟:nth-child()类似，不同点是:nth-of-type()计数时只计算同种类型的元素
父元素下第n个类型为p的元素
p:nth-of-type(n){color:red;}
否定伪类 :not
:not()的格式是:not(x)
x是一个简单选择器
元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类（除否定伪类）
:not(x)表示除x以外的元素
除了p元素以外的元素
:not(p){color:red}
伪元素
为了区分伪元素和伪类，建议伪元素使用2个冒号，比如::first-line
伪元素 ::first-line、::first-letter
::first-line可以针对首行文本设置属性
div::first-line{color:red;}
::first-letter可以针对首字母设置属性
div::first-letter{color:red;}
伪元素::before和::after
::before和::after用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片）
content属性为必须有的
div前插入一张图片
div::before{content:url("./abc.png")};
div后插入一句话
div::after{content:"ymz";};