CSS 选择器

选择器(Selector)

选择器 demo
元素选择器 p{color:black;}
类选择器 .important{color:black;}
ID选择器 #important{color:black;}
属性选择器 a[href]{color:black;}
后代选择器 h1 p{color:black;}
子元素选择器 h1>p{color:black;}
相邻兄弟选择器 h1+p{color:black;}
通用兄弟选择器 h1~p{color:black;}
伪元素选择器 :before{color:black;}
伪类选择器 a:link{color:black;}

属性选择器的各种匹配规则

属性 描述
[attr] 带有attr属性
[attr=value] 带有attr属性,且值为value
[attr~=value] 带有attr属性, 以空格作为分隔的值列表,其中至少一个值为”value”
[attr\ =value] 带有attr属性,以空格作为分隔的值列表,其中至少一个值为”value”或者”value-“
[attr^=value] 带有attr属性,且值以”value”开头
[attr$=value] 带有attr属性,且值以”value”结束
[attr*=value] 带有attr属性,且值包含”value”

伪元素和伪类选择器

伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到。

伪元素选择器

属性 描述
::first-letter 元素第一个字母添加内容
::first-line 元素第一个行添加内容
::before 元素第一个子元素前添加内容
::after 元素最后一个子元素后添加内容
::selection 应用于文档中被用户高亮的部分
  • CSS2spec中伪元素选择器前面是:,css3spec中伪元素选择器前面是::。
  • ::selection选择器前面必须是::
  • ::first-letter,::first-line只能作用在block-container box,比如display:inline-block;display:block;

伪类选择器

状态伪类
属性 描述
:link 未访问链接
:visited 已访问链接
:hover 鼠标悬停处状态
:focus 选取获得焦点的元素状态(input,a)
:active 被激活元素状态
  • 状态伪类修改样式要按照顺序:link->:visited->:hover->:focus->:active
表单标签伪类
属性 描述
:checked 选中状态(radio,checkbox,option)
:disabled 表示被禁用的元素
:enabled 表示被启用的元素
结构化伪类
child类 type类
:first-chid :first-of-type
:last-child :last-of-type
:only-child :only-of-type
:nth-child :nth-of-type
:nth-last-child :nth-last-of-type
  • type/child类伪类可以选用odd(单数)even(偶数)n+1(表达式,n初始为0)

eg:

1
2
3
4
5
6
7
8
/--!h1:first-child匹配不到任何元素,
h1:first-of-type匹配到的是h1元素--/
<div>
<p>第一个子元素</p>
<h1>第二个子元素</h1>
<span>第三个子元素</span>
<span>第四个子元素</span>
</div>

:first-child 匹配的是某父元素的第一个子元素,可以说是结构上的第一个子元素。
:first-of-type 匹配的是某父元素下相同类型子元素中的第一个。

其他伪类
属性 描述
:empty 没有子元素的元素
:root 匹配根元素
:not 否定元素样式
:target 锚点元素
:lang 语言相关元素
  • :empty子元素,只计算元素结点及文本(包括空格),注释、运行指令不考虑在内。
  • not不更改选择器优先级

参考:伪类和伪选择器

继承( Inheritance )

特定的CSS属性向下传递到子孙元素

常用的继承属性

  1. 文字相关属性: font,font-family,font-size,font-style
  2. 文本相关属性: text-align,text-indent,line-height,direction,color,word-spacing,letter-spacing,text-transform
  3. 表格布局属性: caption-side,border-collapse、border-spacing,empty-cells,table-layout
  4. 列表布局属性: list-style-type,list-style-image,list-style-position,list-style
  5. 元素可见性: visibility
  6. 光标属性: cursor

inherit可以使子元素继承父元素的属性。

层叠( Specificity )

相同的属性会覆盖(优先级,先后顺序),不同的属性会合并

  1. 内联样式
  2. 内部样式表
  3. 外部样式表
  4. 用户样式
  5. 浏览器样式(优先级逐级递减)

样式优先级机制

选择器 加权
行内样式 1000
ID选择器的数量 100
类、伪类和属性选择器的数量 10
标签选择器和伪元素选择器的数量 1

!important可以提升样式的优先级。