本文主要和大家分享css 选择器的优先级和权重分析，希望能帮助大家更加掌握学习css选择器。
基本选择器
选择器名 称实 例描 述版 本*通用选择器（Universal selectors）匹配所有的元素2.1E标签选择器（Type selectors）匹配所有的1.class类选择器（Class selectors）匹配所有的元素1#idID选择器（ID selectors）匹配所有的元素1E[attr]属性选择器（Attribute selectors）匹配所有属性的的元素2.1E[attr=val]属性选择器（Attribute selectors）匹配所有属性的的元素2.1E[attr~=val]属性选择器（Attribute selectors）匹配所有属性包含的元素2.1E[attr^=val]属性选择器（Attribute selectors）匹配所有属性以开头的元素3E[attr$=val]属性选择器（Attribute selectors）匹配所有属性以结尾的元素3E[attr*=val]属性选择器（Attribute selectors）匹配所有属性包含的元素3E F后代选择器（Descendant selectors）匹配所有元素下所有元素1E > F子选择器（Child selectors）匹配所有元素下所有子元素2.1E + F相邻兄弟选择器匹配所有元素同级的第一个元素2.1E ~ F兄弟选择器匹配所有元素同级的所有元素3S1,S2,.....选择器分组匹配所有元素1
伪类和伪元素
伪类（Pseudo-classes）用于指定选择器的某种特定状态或条件，伪类在 DOM 中并不存在，但对用户却是可见的。
动态伪类（Dynamic pseudo-classes）
动态伪类对除了其名称、属性或内容之外的特性的元素进行分类，不会显示在文档源或文树中。
选择器实 例描 述版 本:link匹配未被访问的链接1:visited匹配被访问过的链接1:hover匹配鼠标指针在其浮动的元素1:active匹配鼠标指针在其上按下的元素1:focus匹配获得焦点的元素2.1
目标伪类（The target pseudo-classes）
目标伪类指定当前活动的锚，使用目标伪类可以为活动的锚设置样式。
选择器实 例描 述版 本:target匹配活动的锚3
语言伪类（The language pseudo-classes）
语言伪类向带有指定
属性元素添加样式。
立即学习
“
前端免费学习笔记（深入）
”；
选择器实 例描 述版 本:lang(val)匹配带有指定的元素3
UI元素状态伪类（The UI element states pseudo-classes）
UI元素状态伪类主要用于指定表单中的元素状态。
选择器实 例描 述版 本:enabled匹配启动的元素3:disabled匹配禁用的元素3:checked匹配被选中的元素3
display 和 visibility 属性对于UI元素状态伪类匹配 enabled/disabled 状态没有影响。
结构性伪类（Structural pseudo-classes）
结构性伪类用于指定文档的特定结构。
选择器实 例描 述版 本:root匹配文档的根元素3:nth-child(n)匹配其父元素的第 n 个子元素3:nth-last-child(n)匹配其父类倒数第 n 个子元素3:nth-of-type(n)匹配其父类第 n 个有着相同选择器的子元素3:nth-last-of-type(n)匹配其父类倒数第 n 个有着相同选择器的子元素3:first-child匹配其父类元素的第一个子元素3:last-child匹配其父类元素的最后一个子元素3:last-child匹配其父类元素的最后一个子元素3:first-of-type匹配其父类元素第一个有着相同选择器的子元素3:last-of-type匹配其父类元素最后一个有着相同选择器的子元素3:only-child匹配其父类的唯一子元素3:only-of-type匹配其父类的唯一有着相同选择器的子元素3:empty匹配没有子元素（包括文字节点）的元素3
、
、
、
中
n 是从 0 开始的整数，表达式可写成， a 和 b 是 0 或正整数，表达式的写法相当于把每 a 个子元素分成一组，取每组的第 b 个元素；取第奇数、偶数个子元素可写表达式为、
。
否定伪类是用来选择所有非指定类型元素的其他元素。
选择器实 例描 述版 本:not(s)匹配所有非指定类型的其他元素3
伪元素
伪元素（Pseudo-elements）是指不存在与文档树中的抽象。
选择器实 例描 述版 本::first-line匹配元素文本内容的首行1::first-letter匹配元素文本内容的首个字母1::before元素之前2.1::after元素之后2.1
在 CSS 1 和 CSS 2 中，伪类选择器中只有一个 ":"，而 CSS 3 变为两个 "::"，是为了区分伪类与伪元素，目前这两个写法效果一致。
与
必须设置
属性，否则元素不能生效。
优先级和权重
CSS 中的权重分别为 4 个等级：
内联样式（HTML 文档中的 style 属性）
ID 选择器
类、伪类、属性选择器
元素、伪类元素
这 4 个等级由高到低代表不同的优先级，
写在 CSS 规则后，可以将对应的规则提升到最高权重。
相关推荐：
css选择器实例分享
CSS选择器的新用法详解
CSS选择器字段解析的实现方法
*p.navclass="nav"#wrapperid="wrapper"a[data-url]data-urla[data-url='http']data-url="http"a[data-url~='http']data-urlhttpa[data-url^='http']data-urlhttpa[data-url$='http']data-urlhttpa[data-url*='http']data-urlhttpp pp plabel + input label ~ input label,input a:linka:visiteda:hovera:activeinput:focus#tab1:targetlang#p:lang(en)lange="en"input:enabledinput:disabledinput:checked:root:nth-child(n):nth-last-child(n):nth-of-type(n):nth-last-of-type(n):first-child :last-child :last-child :first-of-type:first-of-type:only-child:only-child:empty:nth-child(n):nth-last-child(n):nth-of-type(n):nth-last-of-type(n)an+b2n+1 或 even2n 或 oddinput:not([type="text"])::first-line::first-letter::before::after::before::aftercontent!important