什么是CSS 选择器？都有哪些？

写在前面

CSS 选择器是 CSS 样式表中最告急的部分之一。它们允许你准确地选择 HTML 文档中的元素，并应用样式。理解和掌握 CSS 选择器是成为一名优秀的前端开辟者的关键。
根本选择器

• 元素选择器：选择特定的 HTML 元素。比方，p 选择器将选择所有的 <p> 元素。
  
  1. p {
  2.   color: blue;
  3. }

  复制代码
• 类选择器：选择具有特定类名的元素。比方，.my-class 选择器将选择所有具有 my-class 类名的元素。
  
  1. [/code]
  2. [/list] .my-class {
  3. font-size: 18px;
  4. }
  5. [code]
  6. 3. **ID 选择器**：选择具有特定 ID 的元素。例如，`#my-id` 选择器将选择具有 `my-id` ID 的元素。
  8. ```css
  9. #my-id {
  10.   background-color: yellow;
  11. }

  复制代码
  
  
  • 通配符选择器：选择所有元素。比方，* 选择器将选择文档中的所有元素。
    
    1. * {
    2.   margin: 0;
    3.   padding: 0;
    4. }

    复制代码
  组合选择器
  
  
  
  
  • 后代选择器：选择某个元素的所有后代元素。比方，div p 选择器将选择所有在 <div> 元素内的 <p> 元素。
    
    1. div p {
    2.   line-height: 1.5;
    3. }

    复制代码
  • 子元素选择器：选择某个元素的直接子元素。比方，ul > li 选择器将选择所有直接在 <ul> 元素内的 <li> 元素。
    
    1. ul > li {
    2.   list-style: none;
    3. }

    复制代码
  • 相邻兄弟选择器：选择紧跟在某个元素后面的兄弟元素。比方，p + span 选择器将选择所有紧跟在 <p> 元素后面的 <span> 元素。
    
    1. p + span {
    2.   font-weight: bold;
    3. }

    复制代码
  • 一样平常兄弟选择器：选择某个元素后面的所有兄弟元素。比方，p ~ span 选择器将选择所有在 <p> 元素后面的 <span> 元素。
    
    1. p ~ span {
    2.   color: red;
    3. }

    复制代码
  属性选择器
  
  
  
  
  • 存在和值选择器：选择具有特定属性或属性值的元素。比方，[href] 选择器将选择所有具有 href 属性的元素，而 [href="https://www.google.com"] 选择器将选择所有 href 属性值为 https://www.google.com 的元素。
    
    1. [href] {
    2.   text-decoration: none;
    3. }
    5. [href="https://www.google.com"] {
    6.   color: green;
    7. }

    复制代码
  • 部分值选择器：选择属性值包罗特定字符串的元素。比方，[class~="my-class"] 选择器将选择所有类名中包罗 my-class 字符串的元素。
    
    1. [class~="my-class"] {
    2.   border: 1px solid black;
    3. }

    复制代码
  伪类选择器
  
  
  
  
  • :hover：选择鼠标悬停在其上的元素。比方，a:hover 选择器将选择所有鼠标悬停在其上的 <a> 元素。
    
    1. a:hover {
    2.   color: red;
    3. }

    复制代码
  • :active：选择正在被激活的元素。比方，button:active 选择器将选择所有正在被点击的 <button> 元素。
    
    1. button:active {
    2.   background-color: gray;
    3. }

    复制代码
  • :focus：选择当前有焦点的元素。比方，input:focus 选择器将选择所有当前有焦点的 <input> 元素。
    
    1. input:focus {
    2.   outline: none;
    3.   border: 2px solid blue;
    4. }

    复制代码
  • :nth-child()：选择某个元素的第 n 个子元素。比方，ul li:nth-child(2) 选择器将选择所有 <ul> 元素中的第二个 <li> 元素。
    
    1. ul li:nth-child(2) {
    2.   background-color: lightgray;
    3. }

    复制代码
  伪元素选择器
  
  
  
  
  • ::before：在元素的内容之前插入天生的内容。比方，p::before 选择器将在所有 <p> 元素的内容之前插入天生的内容。
    
    1. p::before {
    2.   content: '>';
    3.   font-size: 20px;
    4.   color: red;
    5. }

    复制代码
  • ::after：在元素的内容之后插入天生的内容。比方，p::after 选择器将在所有 <p> 元素的内容之后插入天生的内容。
    
    1. p::after {
    2.   content: '<';
    3.   font-size: 20px;
    4.   color: red;
    5. }

    复制代码
  布局伪类选择器
  
  
  
  
  • :first-child：选择某个元素的第一个子元素。比方，ul li:first-child 选择器将选择所有 <ul> 元素中的第一个 <li> 元素。
    
    1. ul li:first-child {
    2.   font-weight: bold;
    3. }

    复制代码
  • :last-child：选择某个元素的最后一个子元素。比方，ul li:last-child 选择器将选择所有 <ul> 元素中的最后一个 <li> 元素。
    
    1. ul li:last-child {
    2.   border-bottom: none;
    3. }

    复制代码
  总结
  
  CSS 选择器是前端开辟中不可或缺的工具。通过深入理解和灵活使用各种选择器，你可以准确地选择和样式化 HTML 元素，创建出美观、交互性强的网页。记住，选择器的优先级和特异性也非常告急，需要根据实际情况进行选择和调解。
  
  免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。