层次关系选择器

后代选择器  空格

子代选择器 大于号

相邻兄弟选择器  加号  向下寻找相邻的第一个兄弟

div + p{
    color:red
}

通用选择器   波浪线  向下寻找后边的所有给定兄弟

div ~ p{
    color:red
}

目标伪类选择器

超链接的四种状态

初始状态 a:link.{属性:属性值;}

鼠标划上状态 a:hover.{属性:属性值;}

鼠标点击未抬起状态（鼠标激活） a:active.{属性:属性值;}

鼠标点击过后的状态 a:visited.{属性:属性值;}

超链接四种状态的顺序： link visited hover active

选择获得焦点的输入字段 :focus

input:focus{
    background-color:yellow;
    Outline:none  //去掉默认获取焦点的蓝色
}

目标伪类选择器

：target  超链接点击的时候可以更改锚点id所在的元素效果

p:target{ 
    border: 2px solid #D4D4D4;
    background-color: #e5eecc;
}

UI元素状态伪类选择器

：disabled 禁用（input）

：enabled启用（input）

：checked 选中（选择器）

结构伪类选择器

：first-child 这个结构中的第一个

：first-of-type这个元素的第一个

：last-child 这个结构中的最后一个

：last-of-type这个元素的最后一个

：nth-child(n) 这个结构中的第几个 n的取值从1开始  可以写n的倍数 2n和even是偶数   2n+1或2n-1或者odd是奇数

：nth-of-type(n) 这个元素的第几个 n的取值从1开始  可以写n的倍数 2n和even是偶数   2n+1或2n-1或者odd是奇数

：nth-last-child(n) 这个结构中倒数第几个

：nth-last-of-type(n) 这个元素的倒数第几个

：only-child 这个结构中只有一个元素

：only-of-type 这个元素只有一个

：empty 元素没有内容时

：root  根

否定选择器

：not()

设置非 <p> 元素的所有元素的背景色：
:not(p){ 
    background-color: #ff0000;
}

属性选择器

[value] 元素中存在此属性

[value=“值”] 元素中存在此属性且值必须是给定值

[value^=“值”] 元素中存在此属性且开头位置包含给定值

[value$=“值”] 元素中存在此属性且结束位置包含给定值

[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

：after 伪元素在元素之后添加内容（这个伪元素是行内元素，不过可以使用属性 display 改变这一点。）

：before 伪元素在元素之前添加内容（这个伪元素是行内元素，不过可以使用属性 display 改变这一点。）

选择器的权重：

继承的权重最小0000

标签选择器的权重为0001

Class选择器的权重为0010

ID选择器的权重为0100

包含关系选择器权重是包含选择器的和

群组选择器权重为选择器本身

内联样式表的权重1000

正无穷大在属性值后边写！important