返回

打破陈规，相见恨晚的33个CSS选择器大揭秘！

前端

『真香警告』这33个超级好用的CSS选择器，你可能见都没见过。


作为一名合格的开发者，熟练掌握CSS选择器是必备技能。今天，我们就来揭秘33个鲜为人知的CSS选择器，助你在编码旅程中更上一层楼。



1. :root

/* 全局样式设置 */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
}

:root选择器用于设置全局样式变量，可以在整个文档中使用。

2. :is()

/* 同时为多个类设置样式 */
.box:is(.red, .blue) {
  color: white;
}

:is()选择器可以同时为多个类设置样式，这使得代码更加简洁。

3. :where()

/* 同时为多个元素设置样式 */
:where(header, footer) {
  background-color: #f5f5f5;
}

:where()选择器可以同时为多个元素设置样式，这使得代码更加简洁。

4. :has()

/* 选择包含特定元素的元素 */
.container:has(.button) {
  border: 1px solid #ccc;
}

:has()选择器可以选择包含特定元素的元素。

5. :not()

/* 选择不包含特定元素的元素 */
.container:not(:has(.button)) {
  background-color: #ccc;
}

:not()选择器可以选择不包含特定元素的元素。

6. :nth-child()

/* 选择元素的第n个子元素 */
.container:nth-child(2) {
  background-color: #ccc;
}

:nth-child()选择器可以选择元素的第n个子元素。

7. :nth-of-type()

/* 选择元素的第n个同类型子元素 */
.container:nth-of-type(2) {
  background-color: #ccc;
}

:nth-of-type()选择器可以选择元素的第n个同类型子元素。

8. :first-child

/* 选择元素的第一个子元素 */
.container:first-child {
  background-color: #ccc;
}

:first-child选择器可以选择元素的第一个子元素。

9. :last-child

/* 选择元素的最后一个子元素 */
.container:last-child {
  background-color: #ccc;
}

:last-child选择器可以选择元素的最后一个子元素。

10. :only-child

/* 选择元素的唯一子元素 */
.container:only-child {
  background-color: #ccc;
}

:only-child选择器可以选择元素的唯一子元素。

11. :empty

/* 选择不包含任何子元素的元素 */
.container:empty {
  background-color: #ccc;
}

:empty选择器可以选择不包含任何子元素的元素。

12. :target

/* 选择被链接指向的元素 */
.container:target {
  background-color: #ccc;
}

:target选择器可以选择被链接指向的元素。

13. :checked

/* 选择被选中的表单元素 */
.checkbox:checked {
  background-color: #ccc;
}

:checked选择器可以选择被选中的表单元素。

14. :disabled

/* 选择被禁用的表单元素 */
.button:disabled {
  background-color: #ccc;
}

:disabled选择器可以选择被禁用的表单元素。

15. :enabled

/* 选择未被禁用的表单元素 */
.button:enabled {
  background-color: #ccc;
}

:enabled选择器可以选择未被禁用的表单元素。

16. :invalid

/* 选择不符合验证规则的表单元素 */
.input:invalid {
  background-color: #ccc;
}

:invalid选择器可以选择不符合验证规则的表单元素。

17. :valid

/* 选择符合验证规则的表单元素 */
.input:valid {
  background-color: #ccc;
}

:valid选择器可以选择符合验证规则的表单元素。

18. :in-range

/* 选择值在指定范围内的表单元素 */
.input:in-range {
  background-color: #ccc;
}

:in-range选择器可以选择值在指定范围内的表单元素。

19. :out-of-range

/* 选择值不在指定范围内的表单元素 */
.input:out-of-range {
  background-color: #ccc;
}

:out-of-range选择器可以选择值不在指定范围内的表单元素。

20. :required

/* 选择必填的表单元素 */
.input:required {
  background-color: #ccc;
}

:required选择器可以选择必填的表单元素。

21. :optional

/* 选择非必填的表单元素 */
.input:optional {
  background-color: #ccc;
}

:optional选择器可以选择非必填的表单元素。

22. ::first-letter

/* 选择元素的第一个字母 */
.container::first-letter {
  color: #ccc;
}

::first-letter选择器可以选择元素的第一个字母。

23. ::first-line

/* 选择元素的第一行 */
.container::first-line {
  color: #ccc;
}

::first-line选择器可以选择元素的第一行。

24. ::selection

/* 选择被选中的文本 */
::selection {
  background-color: #ccc;
  color: #000;
}

::selection选择器可以选择被选中的文本。

25. ::-webkit-scrollbar

/* 选择滚动条 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #f5f5f5;
}

::-webkit-scrollbar选择器可以选择滚动条。

26. ::-webkit-scrollbar-thumb

/* 选择滚动条滑块 */
::-webkit-scrollbar-thumb {
  background-color: #ccc;
}

::-webkit-scrollbar-thumb选择器可以选择滚动条滑块。

27. ::-webkit-scrollbar-track

/* 选择滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

::-webkit-scrollbar-track选择器可以选择滚动条轨道。

28. ::-webkit-resizer

/* 选择可调整大小元素的调整器 */
::-webkit-resizer {
  background-color: #ccc;
}

::-webkit-resizer选择器可以选择可调整大小元素的调整器。

29. ::-webkit-inner-spin-button

/* 选择数字输入框的加号按钮 */
::-webkit-inner-spin-button {
  background-color: #ccc;
}

::-webkit-inner-spin-button选择器可以选择数字输入框的加号按钮。

30. ::-webkit-outer-spin-button

/* 选择数字输入框的减号按钮 */
::-webkit-outer-spin-button {
  background-color: #ccc;
}

::-webkit-outer-spin-button选择器可以选择数字输入框的减