前端记记看

Appearance

css选择器 ​

简单选择器（根据名称、id、类来选取元素） ​

css
p {}

#id {}

.class {}

组合器选择器（根据它们之间的特定关系来选取元素） ​

后代选择器 ​

后代选择器匹配属于指定元素后代的所有元素。下面的例子选择 <div> 元素内的所有 <p> 元素

css
div p {
  background-color: yellow;
}

子选择器 ​

子选择器匹配属于指定元素子元素的所有元素。下面的例子选择属于 <div> 元素子元素的所有 <p> 元素

css
div > p {
  background-color: yellow;
}

相邻兄弟选择器 ​

相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。下面的例子选择紧随 <div> 元素之后的所有 <p> 元素

css
div + p {
  background-color: yellow;
}

通用兄弟选择器 ​

通用兄弟选择器匹配属于指定元素的同级元素的所有元素。下面的例子选择属于 <div> 元素的同级元素的所有 <p> 元素

css
div ~ p {
  background-color: yellow;
}

伪类选择器（根据特定状态选取元素） ​

选择器例子例子描述
:activea:active选择活动的链接。
:checkedinput:checked选择每个被选中的 <input> 元素。
:disabledinput:disabled选择每个被禁用的 <input> 元素。
:emptyp:empty选择没有子元素的每个 <p> 元素。
:enabledinput:enabled选择每个已启用的 <input> 元素。
:first-childp:first-child选择作为其父的首个子元素的每个 <p> 元素。
:first-of-typep:first-of-type选择作为其父的首个 <p> 元素的每个 <p> 元素。
:focusinput:focus选择获得焦点的 <input> 元素。
:hovera:hover选择鼠标悬停其上的链接。
:in-rangeinput:in-range选择具有指定范围内的值的 <input> 元素。
:invalidinput:invalid选择所有具有无效值的 <input> 元素。
:lang(language)p:lang(it)选择每个 lang 属性值以 "it" 开头的 <p> 元素。
:last-childp:last-child选择作为其父的最后一个子元素的每个 <p> 元素。
:last-of-typep:last-of-type选择作为其父的最后一个 <p> 元素的每个 <p> 元素。
:linka:link选择所有未被访问的链接。
:not(selector):not(p)选择每个非 <p> 元素的元素。
:nth-child(n)p:nth-child(2)选择作为其父的第二个子元素的每个 <p> 元素。
:nth-last-child(n)p:nth-last-child(2)选择作为父的第二个子元素的每个 <p> 元素，从最后一个子元素计数。
:nth-last-of-type(n)p:nth-last-of-type(2)选择作为父的第二个<p>元素的每个 <p> 元素，从最后一个子元素计数
:nth-of-type(n)p:nth-of-type(2)选择作为其父的第二个 <p> 元素的每个 <p> 元素。
:only-of-typep:only-of-type选择作为其父的唯一 <p> 元素的每个 <p> 元素。
:only-childp:only-child选择作为其父的唯一子元素的 <p> 元素。
:optionalinput:optional选择不带 "required" 属性的 <input> 元素。
:out-of-rangeinput:out-of-range选择值在指定范围之外的 <input> 元素。
:read-onlyinput:read-only选择指定了 "readonly" 属性的 <input> 元素。
:read-writeinput:read-write选择不带 "readonly" 属性的 <input> 元素。
:requiredinput:required选择指定了 "required" 属性的 <input> 元素。
:rootroot选择元素的根元素。
:target#news:target选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:validinput:valid选择所有具有有效值的 <input> 元素。
:visiteda:visited选择所有已访问的链接。

伪元素选择器（选取元素的一部分并设置其样式） ​

选择器例子例子描述
::afterp::after在每个 <p> 元素之后插入内容。
::beforep::before在每个 <p> 元素之前插入内容。
::first-letterp::first-letter选择每个 <p> 元素的首字母。
::first-linep::first-line选择每个 <p> 元素的首行。
::selectionp::selection选择用户选择的元素部分。

属性选择器（根据属性或属性值来选取元素） ​

CSS [attribute] 选择器 ​

[attribute] 选择器用于选取带有指定属性的元素。下例选择所有带有 target 属性的 <a> 元素

css
a[target] {
  background-color: yellow;
}

CSS [attribute="value"] 选择器 ​

[attribute="value"] 选择器用于选取带有指定属性和值的元素。下例选取所有带有 target="_blank" 属性的 <a> 元素

css
a[target="_blank"] { 
  background-color: yellow;
}

CSS [attribute~="value"] 选择器 ​

[attribute~="value"] 选择器选取属性值包含指定词的元素。下例选取 title 属性包含 "flower" 单词的所有元素

css
[title~="flower"] {
  border: 5px solid yellow;
}

CSS [attribute|="value"] 选择器 ​

[attribute|="value"] 选择器用于选取指定属性以指定值开头的元素。下例选取 class 属性以 "top" 开头的所有元素

TIP

值必须是完整或单独的单词，比如 class="top" 或者后跟连字符的，比如 class="top-text"。

css
[class|="top"] {
  background: yellow;
}

CSS [attribute^="value"] 选择器 ​

[attribute^="value"] 选择器用于选取指定属性以指定值开头的元素。下例选取 class 属性以 "top" 开头的所有元素

TIP

值不必是完整单词！

css
[class^="top"] {
  background: yellow;
}

CSS [attribute$="value"] 选择器 ​

[attribute$="value"] 选择器用于选取指定属性以指定值结尾的元素。下例选取 class 属性以 "test" 结尾的所有元素

TIP

值不必是完整单词！

css
[class$="test"] {
  background: yellow;
}

CSS [attribute*="value"] 选择器 ​

[attribute*="value"] 选择器选取属性值包含指定词的元素。下例选取 class 属性包含 "te" 的所有元素

TIP

值不必是完整单词！

css
[class*="te"] {
  background: yellow;
}

CSS 滚动条选择器 ​

你可以使用以下伪元素选择器去修改基于 webkit 的浏览器的滚动条样式：

  • ::-webkit-scrollbar——整个滚动条。
  • ::-webkit-scrollbar-button——滚动条上的按钮（上下箭头）。
  • ::-webkit-scrollbar-thumb——滚动条上的滚动滑块。
  • ::-webkit-scrollbar-track——滚动条轨道。
  • ::-webkit-scrollbar-track-piece——滚动条没有滑块的轨道部分。
  • ::-webkit-scrollbar-corner——当同时有垂直滚动条和水平滚动条时交汇的部分。通常是浏览器窗口的右下角。
  • ::-webkit-resizer——出现在某些元素底角的可拖动调整大小的滑块。

TIP

::-webkit-scrollbar CSS 伪类元素会影响设置了 overflow:scroll; 的元素的滚动条样式。

相关链接 ​

W3school CSS 选择器