-
小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
-
选择器：根据特征判断是否选中元素
-
伪元素：语法和伪类相似，选出dom树中“不存在”的元素。
简单选择器
全体选择器
*- 选中任意元素，常用在页面样式
reset
标签选择器
- 常见的标签，也可配合命名空间使用
- 对某一种标签的所有原则进行选择
id选择器
#后跟id- 针对特定
id的选择器
class选择器
.后跟class名- 针对特定
class的选择器
属性选择器
- 可以一定程度上替代
id选择器和class选择器 - 根据
HTML元素的属性来选中元素
[attr]
- 直接在方括号中放入属性名，检查元素是否具有这个属性，只要元素有这个属性，不论属性是什么值，都可以被选中
[attr=val]
- 检查元素属性
attr的值是否为val，是val元素被选中
[attr~=val]
- 检查元素属性
attr的值中是否含有val，含有val元素被选中
[attr|=val]
- 检查元素属性
attr的值是否是val或者以val-为前缀，如果是元素被选中
[attr^=val]
- 检查元素属性
attr的值是不是以val开头，如果是元素被选中
[attr$=val]
- 检查元素属性
attr的值是不是以val结尾，如果是元素被选中
[attr*=val]
- 检查元素属性
attr的值中是否有val，如果是元素被选中 - 与
[attr~=val]不同：
<div>
<p title="web param">p1</p>
<p title="web param">p2</p>
<p title="web param">p3</p>
<p title="web para">p4</p>
</div>
// [title~=para] 只选中p4
// [title*=para] p1、p2、p3、p4都会被选中
伪类选择器
- 建议在不得不使用伪类选择器的场景下使用伪类
树结构伪类
:root：树的根元素:empty：没有子节点的元素，这里的没有子节点包括空白符和空格:nth-child和:nth-last-child：从前数和从后数第n个元素- 相似的还有
:first-child、:last-child表示第一个元素和最后一个元素
- 相似的还有
链接相关的伪类
:link：表示未访问过的链接:visited：表示已访问过的链接:active：表示用户正在激活的元素（用户按下按钮，还未抬起，这个按钮就处于激活状态）:focus：表示焦点落在这个元素之上:target：用于选中浏览器URL的href所指定的元素
逻辑伪类
:not：可搭配简单伪类选择器使用，目前不支持嵌套
选择器组合
- 无连接符号
- 且的关系
- 空格
~+>||
- 或的关系
,，多个内容一样的css选择器的简写
选择器的优先级
- 使用一个三元组(
a,b,c)来构成一个复杂选择器的优先级id选择器的数目为a- 伪类选择器和
class选择器的数目为b - 伪元素选择器和标签选择器数目为
c
- 优先级=
base*base*a+base*b+c base是个足够大的正整数- 行内属性的优先级高于
a,b,c !important比行内属性的优先级还高，要谨慎使用
伪元素
已有内容套上一个元素
::first-line
- 元素的第一行（指的是排版后显示的第一行，和
html中的换行没有关系） - 对块级元素起作用，如果是多个块级元素嵌套，对最内层的块级元素起作用
- 可设置的
CSS属性一般是字体相关的属性和背景
::first-letter
- 元素的第一个字母
- 适用所有标签
- 可设置的
CSS属性除了字体相关、背景，也可使用盒模型相关以及浮动
新建一个元素
::before
- 在元素内容前插入一个虚拟元素
- 必须指定
content属性才生效，支持所有CSS属性
::after
- 在元素内容后插入一个虚拟元素
- 必须指定
content属性才生效，支持所有CSS属性
总结
- 在合适的情况下选择使用合适的选择器选择元素和伪元素，可以有效的提高
css的性能和可读性 - 对选择器有更多看法，欢迎留言讨论
