常用CSS选择器

最新推荐文章于 2024-09-26 17:57:52 发布

无足鸟丶

最新推荐文章于 2024-09-26 17:57:52 发布

阅读量211

点赞数 4

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_45089709/article/details/142557516

版权

标签选择器（Type Selector）
- 选择所有指定标签的元素。
```
p { color: red; }
```
类选择器（Class Selector）
- 选择具有指定类的所有元素。
```
.highlight { background-color: yellow; }
```
ID 选择器（ID Selector）
- 选择具有指定 ID 的单个元素。
```
#main-header { font-size: 2em; }
```
通用选择器（Universal Selector）
- 选择所有元素。
```
* { margin: 0; padding: 0; }
```
伪类选择器（Pseudo-Class Selector）
- 选择具有特定状态的元素。
```
a:hover { color: blue; }
```

属性选择器

input[type="text"] { border: 1px solid black; }

属性包含值选择器
- 选择具有指定属性值包含特定字符串的元素。
```
[title~=important] { font-weight: bold; }
```
属性开始值选择器
- 选择具有指定属性值以特定字符串开头的元素。
```
[href^="http"] { color: orange; }
```
属性结束值选择器
- 选择具有指定属性值以特定字符串结尾的元素。
```
[class$="footer"] { background-color: lightgray; }
```
属性包含值选择器
- 选择具有指定属性值包含特定子字符串的元素。
```
[class*="sidebar"] { float: right; }
```

第一子元素选择器（First Child）
- 选择父元素的第一个子元素。
```
p:first-child { font-weight: bold; }
```
最后一个子元素选择器（Last Child）
- 选择父元素的最后一个子元素。
```
p:last-child { color: purple; }
```
唯一子元素选择器（Only Child）
- 选择父元素唯一的子元素。
```
p:only-child { font-style: italic; }
```
第一个类型选择器（First of Type）
- 选择父元素第一个特定类型的子元素。
```
p:first-of-type { border-left: 2px solid black; }
```
最后一个类型选择器（Last of Type）
- 选择父元素最后一个特定类型的子元素。
```
p:last-of-type { border-right: 2px solid black; }
```
唯一类型选择器（Only of Type）
- 选择父元素唯一的特定类型子元素。
```
p:only-of-type { background-color: lightblue; }
```

伪元素选择器
- 选择元素的特定部分，如 ::before 或 ::after。
```
p::first-letter { font-size: 1.5em; }
```
伪元素 ::before
- 在元素内容之前插入内容。
```
p::before { content: "Section "; }
```
伪元素 ::after
- 在元素内容之后插入内容。
```
p::after { content: " end."; }
```
伪元素 ::first-line
- 选择元素的第一行。
```
p::first-line { color: red; }
```
伪元素 ::selection
- 选择用户选定的文本。
```
::selection { background: yellow; }
```

否定选择器（Not Selector）
- 选择不匹配指定选择器的元素。
```
p:not(.special) { color: gray; }
```
空白选择器（Empty Selector）
- 选择没有任何子节点的元素。
```
p:empty { display: none; }
```
目标选择器（Target Selector）
- 选择带有特定锚点的目标元素。
```
#section:target { background-color: yellow; }
```

链接伪类
- 选择未访问过的链接。
```
a:link { color: green; }
```
- 选择已被访问过的链接。
```
a:visited { color: purple; }
```

焦点伪类

input:focus { outline: 2px solid blue; }

只读伪类

input:read-only { background-color: lightgray; }

可读伪类

input:read-write { background-color: white; }

这些选择器可以帮助你在网页设计中精确地定位和控制各个元素的样式。熟悉并掌握这些选择器，可以使你的 CSS 更加灵活和强大。

关注