什么是CSS 选择器？都有哪些？
写在前面CSS 选择器是 CSS 样式表中最告急的部分之一。它们允许你准确地选择 HTML 文档中的元素，并应用样式。理解和掌握 CSS 选择器是成为一名优秀的前端开辟者的关键。
根本选择器
[*] 元素选择器：选择特定的 HTML 元素。比方，p 选择器将选择所有的 <p> 元素。
p {
color: blue;
}
[*] 类选择器：选择具有特定类名的元素。比方，.my-class 选择器将选择所有具有 my-class 类名的元素。
.my-class {
font-size: 18px;
}
3. **ID 选择器**：选择具有特定 ID 的元素。例如，`#my-id` 选择器将选择具有 `my-id` ID 的元素。
```css
#my-id {
background-color: yellow;
}
[*] 通配符选择器：选择所有元素。比方，* 选择器将选择文档中的所有元素。
* {
margin: 0;
padding: 0;
}
组合选择器
[*] 后代选择器：选择某个元素的所有后代元素。比方，div p 选择器将选择所有在 <div> 元素内的 <p> 元素。
div p {
line-height: 1.5;
}
[*] 子元素选择器：选择某个元素的直接子元素。比方，ul > li 选择器将选择所有直接在 <ul> 元素内的 <li> 元素。
ul > li {
list-style: none;
}
[*] 相邻兄弟选择器：选择紧跟在某个元素后面的兄弟元素。比方，p + span 选择器将选择所有紧跟在 <p> 元素后面的 <span> 元素。
p + span {
font-weight: bold;
}
[*] 一样平常兄弟选择器：选择某个元素后面的所有兄弟元素。比方，p ~ span 选择器将选择所有在 <p> 元素后面的 <span> 元素。
p ~ span {
color: red;
}
属性选择器
[*] 存在和值选择器：选择具有特定属性或属性值的元素。比方， 选择器将选择所有具有 href 属性的元素，而 选择器将选择所有 href 属性值为 https://www.google.com 的元素。
{
text-decoration: none;
}
{
color: green;
}
[*] 部分值选择器：选择属性值包罗特定字符串的元素。比方， 选择器将选择所有类名中包罗 my-class 字符串的元素。
{
border: 1px solid black;
}
伪类选择器
[*] :hover：选择鼠标悬停在其上的元素。比方，a:hover 选择器将选择所有鼠标悬停在其上的 <a> 元素。
a:hover {
color: red;
}
[*] :active：选择正在被激活的元素。比方，button:active 选择器将选择所有正在被点击的 <button> 元素。
button:active {
background-color: gray;
}
[*] :focus：选择当前有焦点的元素。比方，input:focus 选择器将选择所有当前有焦点的 <input> 元素。
input:focus {
outline: none;
border: 2px solid blue;
}
[*] :nth-child()：选择某个元素的第 n 个子元素。比方，ul li:nth-child(2) 选择器将选择所有 <ul> 元素中的第二个 <li> 元素。
ul li:nth-child(2) {
background-color: lightgray;
}
伪元素选择器
[*] ::before：在元素的内容之前插入天生的内容。比方，p::before 选择器将在所有 <p> 元素的内容之前插入天生的内容。
p::before {
content: '>';
font-size: 20px;
color: red;
}
[*] ::after：在元素的内容之后插入天生的内容。比方，p::after 选择器将在所有 <p> 元素的内容之后插入天生的内容。
p::after {
content: '<';
font-size: 20px;
color: red;
}
布局伪类选择器
[*] :first-child：选择某个元素的第一个子元素。比方，ul li:first-child 选择器将选择所有 <ul> 元素中的第一个 <li> 元素。
ul li:first-child {
font-weight: bold;
}
[*] :last-child：选择某个元素的最后一个子元素。比方，ul li:last-child 选择器将选择所有 <ul> 元素中的最后一个 <li> 元素。
ul li:last-child {
border-bottom: none;
}
总结
CSS 选择器是前端开辟中不可或缺的工具。通过深入理解和灵活使用各种选择器，你可以准确地选择和样式化 HTML 元素，创建出美观、交互性强的网页。记住，选择器的优先级和特异性也非常告急，需要根据实际情况进行选择和调解。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]