CSS 选择器

样式优先级

行内样式 > Id > Class > Tag > *
元素声明的样式 > 浏览器默认样式 > 元素继承的样式
!important 无敌

选择器

元素选择器

ID选择器#id {}
类选择器.class {}
标签选择器div {}
组合选择器.header, .footer {}

关系选择器

后代选择器div p {}
父子选择器div > p {}
相邻选择器.test + p {}查找.test后的第一个p标签
兄弟选择器.test ~ p {}查找.test后所有的同级p标签

属性选择器

[class]查找有class属性的标签
p[class]查找有class属性的p标签
p[class="header"]查找有class属性，并且class属性只能是header的p标签
1
p[class~="header"]查找有class属性，并且class的多个属性中有header即可的p标签
1
2
p[class^="header"]查找有class属性，并且class必须以header开头的p标签
1
2
3
p[class$="header"]查找class属性，并且class必须以header结尾的p标签
1
2
3

p[class*="header"]查找class属性，并且class属性值中包含header的p标签

<p class="header"></p>
<p class="xyzheader"></p>
<p class="headerabc"></p>
<p class="header-title"></p>
<p class="abcheader-title"></p>

p[class|="header"]查找有class属性，并且class属性值是header，或者header-开头的p标签

1
2
3

<p class="header"></p>
<p class="header-title"></p>
<p class="headerabc">不是以header-开头，匹配不到</p>

伪类选择器

链接伪类选择符
a:link链接未点击之前的样式
a:visited链接点击之后的样式
a:hover鼠标移入链接的样式
a:active鼠标按下去时的样式

:hover 和 :active 可以针对所有的标签做鼠标移入和鼠标点击的样式设置
结构性伪类选择器
:first-child匹配父元素的第一个子元素
:last-child匹配父元素的最后一个子元素
:only-child匹配父元素仅有的一个子元素
:nth-child(n)匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效
:nth-last-child(n)匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效

:first-of-type匹配同类型中的第一个同级兄弟元素
:last-of-type匹配同类型中的最后一个同级兄弟元素
:only-of-type匹配同类型中的唯一的一个同级兄弟元素
:nth-of-type(n)匹配同类型中的第n个同级兄弟元素
:nth-last-of-type(n)匹配同类型中的倒数第n个同级兄弟元素

:root匹配元素在文档的根元素；在HTML中，根元素永远是HTML
:empty匹配没有任何子元素的元素body *:empty {}

奇数n 偶数2n
奇数odd 偶数even
用户界面（UI）元素状态伪类选择器
:checked匹配用户界面上处于选中状态的元素（用于input框 type 为 radio 与 checkbox）
:enabled匹配用户界面上处于可用状态的元素
:disabled匹配用户界面上处于禁用状态的元素
目标伪类选择符
:target匹配相关URL指向的元素（通过锚点可以指向的目标）
用户行为伪类选择符
:focus匹配input聚焦时的样式
语言伪类选择符
:lang匹配使用特殊语言的元素
否定伪类选择符
:not(p)匹配不是P标签的元素

伪元素选择器

::before在对象内的前面添加内容

::after在对象内的后面添加内容

/* <a href="https://www.5207.fun/"></a> */
a::after {
  /* 元素属性 */
  content: attr(href);
}

/* 引用媒体文件 */
content: url('xxx');

/* 常用写法 */
div::after {
  content: "\f2ba";
  font: 14px / 1 FontAwesome;
  display: inline-block;
}

::first-letter设置对象内的第一个字符的样式
::first-line设置对象内的第一行的样式

::placeholder设置对象文字占位符的样式

1
2
3

input::-webkit-input-placeholder {}
input::-moz-placeholder {}
input:-ms-input-placeholder {}

::selection设置对象被选择时的样式

样式优先级

选择器

元素选择器

关系选择器

属性选择器

伪类选择器

伪元素选择器

* 通配符