层次关系选择器

后代选择器  空格

子代选择器 大于号

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

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


一沙一世界,一花一天堂。君掌盛无边,刹那成永恒。