CSS 选择器

CSS ：层叠样式表，是一种用来布局和美化网页的样式表语言。

选择器权重

• 内联样式（HTML 文档中的 style 属性）
• ID选择器
• 类、伪类、属性选择器
• 元素、伪元素选择器

选择器包含

• 基本选择器
• 选择器分组
• 伪类选择器
• 伪元素选择器

1， 基本选择器

• 通用选择器（*）- 匹配所有的元素
• 标签选择器（p）- 匹配所有的 p 元素
• 类选择器（.nav）- 匹配所有 class = “nav” 的元素
• ID选择器（#wapper）- 匹配所有的 id = “wapper” 选择器
• 属性选择器
• 后代选择器（.blog p）- 匹配所有 class=’blog’ 元素的后代 p 元素
• 子选择器（.nav>button）- 匹配所有 class=”nav” 元素的子 button 元素
• 相邻兄弟选择器（label input）- 匹配所有紧跟在 label 元素后 input 元素
• 兄弟选择器（header~div）- 匹配所有 header 元素后边的同级 div 元素

其中 属性选择器 有以下方法

• a[href] - 匹配所有带有属性 href 的 a 元素
• a[href=”round”] - 匹配所有属性 “href” 为 “round” 的 a 元素
• a[href~=”round”] - 匹配所有属性 “href” 中包含 “round” 的 a 元素
• a[href*=”round”] - 匹配所有属性 “href” 中包含 “round” 的 a 元素
• a[href^=”round”] - 匹配所有属性 “href” 以 “round” 开头的 a 元素
• a[href|=”round”] - 匹配所有属性 “href” 以 “round” 开头的 a 元素
• a[href$=”round”] - 匹配所有属性 “href” 以 “round” 结尾的 a 元素

2， 选择器分组

• 选择器分组（input, select, textarea）- 匹配所有 input , select , textarea 元素

3， 伪类选择器

用来指定选择器的某种特定状态或者条件，伪类在 DOM 中并不存在，但对用户是可见的。

3.1 动态伪类

• a:link- 匹配未被访问过的链接
• a:hover - 匹配鼠标在其上浮动的元素
• a:active - 匹配鼠标在其上按下的元素
• a:visited- 匹配被访问过的元素
• input:focus - 匹配获得焦点的元素

3.2 结构性伪类

n 从 1 开始

• :root - 匹配文档的根元素
• :nth-child(n) - 匹配其父元素下的第 n 个子元素
• :nth-last-child(n) - 匹配其父元素下的倒数第 n 个子元素
• :nth-of-type(n) - 匹配其父元素下，第 n 个有着相同选择器的子元素
• :nth-last-of-type(n) - 匹配其父元素下，倒数第 n 个有着相同选择器的子元素
• :first-child - 匹配其父元素下的第一个子元素
• :last-child - 匹配其父元素下的最后一个子元素
• :first-of-type - 匹配其父元素下第一个有着相同选择器的子元素
• :last-of-type - 匹配其父元素下最后一个有着相同选择器的子元素
• :only-child - 匹配其父元素下唯一的子元素
• :only-of-type - 匹配其父元素下唯一有着相同选择器的子元素
• :empty - 匹配没有子元素（包括文本节点）的元素

3.3 否定伪类

• input:not([type=”text”]) - 匹配所有非指定类型的其他元素

3.4 目标伪类

• #tab:target - 匹配活动的锚

3.5 语言伪类

• p:lang(en) - 匹配带有指定 lang 属性的元素

4， 伪元素选择器

伪元素选择器，是指不存在于文档树中的抽象内容

• p::first-line - 匹配元素文本内容的首行
• p::first-letter - 匹配元素文本内容的首字母
• div::before - 元素之前
• div::after - 元素之后

注：使用 ::before 和 ::after 两个伪元素时，content 属性必须设置，否则伪元素不能生效。