css选择器

什么是选择器

CSS 选择器的作用是按照 CSS 规则定位 HTML 页面的一个或多个元素。浏览器在解析 HTML 页面时,会根据 CSS 规则中的选择器定位 HTML 页面的元素,并为对应的元素设定样式。

选择器的分类

  • 基本选择器:共有 5 个基本选择器,是 CSS 选择器的最为基本的用法。
  • 层级选择器:共有 4 个层级选择器,是根据 HTML 元素之间的关系来定位 HTML 元素。
  • 组合选择器:具有交集和并集两种用法,是将之前基本选择器和层级选择器进行组合。
  • 伪类选择器:允许未包含在 HTML 页面中的状态信息选定位 HTML 元素。
  • 伪元素选择器:定位所有未被包含 HTML 的实体。

基本选择器

  1. 类型(Type)选择器(有些中文资料中称为“元素选择器”

    简单来说,就是元素选择器

    div {
          color: lightcoral;
          font-size: 24px;
        }
  2. 类(Class)选择器

    类名选择器,以.区分,对应的名称是标签中指定的class

    .demo {
          color: lightcoral;
          font-size: 24px;
        }
  3. ID 选择器

    id选择器,以#区分,一个html文件中id只允许出现一次

    #Demo {
          color: lightcoral;
          font-size: 24px;
        }
  4. 通用选择器(有些中文资料中称为“通配符选择器”

    用于指定html文件中所有元素的属性

    * {
          color: lightcoral;
        }
  5. 属性选择器

    • [attr] 属性选择器:通过 HTML 元素的 attr 属性名来定位具体 HTML 元素,而不关注 attr 属性的值是什么。

      [lang]{
              color: red;
          }
      
      <div lang="pt">哈哈哈哈</div>

  • [attr=value] 属性选择器:通过 HTML 元素的 attr 属性名并且属性值为 value 来定位具体 HTML 元素。

    [lang="pt"] {
          color: green;
        }
  • [attr~=value] 属性选择器:通过 HTML 元素的 attr 属性名,属性值是一个以空格分隔的列表并且 value 值是该值列表中的之一,来定位具体 HTML 元素。

    [lang~='pt']{
            color: red;
        }
    <div lang="pt pp">pt加空格</div>
    <div lang="pt">pt不加空格</div>

    QQ截图20200102232417.png

  • [attr|=value] 属性选择器:通过 HTML 元素的 attr 属性名并且属性值为 value 或者以 value- 为前缀来定位具体 HTML 元素。

    [lang|='zz']{
            color: blue;
        }

    QQ截图20200102232614.png

  • [attr^=value] 属性选择器:通过 HTML 元素的 attr 属性名并且属性值是以 value 为开头来定位具体 HTML 元素。

    [href^='https']{
            background-color: yellow;
        }
    <a href="https://antmoe.com">asdas</a>
  • [attr$=value] 属性选择器:通过 HTML 元素的 attr 属性名并且属性值是以 value 为结束来定位具体 HTML 元素。

    与上一个类似

  • [attr*=value] 属性选择器:通过 HTML 元素的 attr 属性名并且属性值是包含 value 来定位具体 HTML 元素。

    包含即可,不会因为位置而无法匹配

    QQ截图20200102233301.png

优先级

计算法则(后定义的覆盖先定义的

  1. 优先级就是分配给指定的 CSS 声明的一个权重,它由匹配的选择器中的每一种选择器类型的数值决定。
  2. 当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候,CSS 中最后的那个声明将会被应用到元素上。
  3. 当同一个元素有多个声明的时候,优先级才会有意义。

内联样式总会覆盖内嵌样式表和外联样式表的任何样式

!important 例外规则

破坏优先级,被修饰的成为最高级。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>!important规则</title>
  <style>
    div {
      color: blue !important;
    }

    .demo {
      color: red;
    }
  </style>
</head>

<body>
  <div class="demo">这是一个测试内容.</div>
</body>

</html>

最终的颜色为blue

  1. 一定要优化考虑使用样式规则的优先级来解决问题而不是 !important
  2. 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
  3. 永远不要在你的插件中使用 !important
  4. 永远不要在全站范围的 CSS 代码中使用 !important

层级选择器

HTML元素之间的关系

类似于套娃,层与层之间的关系。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>HTML元素之间的关系</title>
</head>

<body>
  <div id="ancestor1">
    <div id="parent1">
      <div id="child11"></div>
      <div id="child12"></div> 

    </div>
    <div id="parent2">
      <div id="child2"></div>
    </div>
  </div>
  <div id="ancestor2"></div>
</body>

</html>

32c2c59d-f95d-4640-9952-86717cc3ec49.png

  • 兄弟元素:ancestor1 元素和 ancestor2 元素、parent1 元素和 parent2 元素,以及 child11 元素和 child12 元素。
  • 父级与子级元素:
    • 如果 `` 元素是父级元素的话,那 ancestor1 元素和 ancestor2 元素就是子级元素。
    • 如果 ancestor1 元素是父级元素的话,那 parent1 元素和 parent2 元素就是子级元素。
    • 如果 parent1 元素是父级元素的话,那 child11 元素和 child12 元素就是子级元素。
  • 祖先与后代元素:
    • 如果 `` 元素是祖先元素的话,那其包含的所有元素都是后代元素。
    • 如果 ancestor1 元素是祖先元素的话,那其包含的所有元素都是后代元素。
    • 如果 parent1 元素是祖先元素的话,那其包含的所有元素都是后代元素。

层级选择器种类

  • 后代选择器

    简单来说,该元素的所有后代元素。

    div span {
          background-color: lightcoral;
        }
    <div>
        <span>Span 1.
          <span>Span 2.</span>
        </span>
      </div>
    <span>Span 3.</span>
    
    这样只会影响到div里的span标签,而div外的标签则不会受到影响
  • 子级选择器

    定位该元素的所有子级元素。并不会影响孙子级元素

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
        span{
            color: teal;
        }
        div>span{
            color: violet;
        }
    
        </style>
    </head>
    <body>
        <div>
            <span>
                哈哈哈
                <span>hahah </span>
                <a href="http://antmoe.com">ce </a>
            </span>
        </div>
    </body>
    </html>

    QQ截图20200102235104.png

  • 相邻兄弟选择器

    定位与该目标元素拥有同一个父级元素的下一个指定元素 不包括当前元素,只包括后边的元素

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
        #a+li{
            color: red;
        }
        </style>
    </head>
    <body>
        <ul>
            <li id="a">1sadsada</li> <!-- 不会变色 -->
    
            <li>555555</li><!-- 变色 -->
        </ul>
    </body>
    </html>
  • 普通兄弟选择器

    简单来说就是p~codep元素之后的元素

    定位与该目标元素拥有同一个父级元素的之后任意指定元素

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>普通兄弟选择器</title>
      <style>
        span {
          background-color: lightgreen;
        }
    
        p~code {
          background-color: lightcoral;
        }
      </style>
    </head>
    
    <body>
      <span>This is not red.</span>
      <p>Here is a paragraph.</p>
      <code>Here is some code.</code> 会变色
      <span>And here is a span.</span>
    </body>
    
    </html>

组合选择器

组合(并集)选择器

h1, h2, h3, h4, h5, h6 { color:blue; }同时定义多个标签的属性。

组合(交集)选择器

p.cls {
    color: blueviolet;
}

表示把所有class名为cls的p标签都设置成blueviolet颜色

伪类选择器

伪类选择器是一种允许通过未包含在 HTML 元素的状态信息来定位 HTML 元素的用法。伪类选择器的具体用法就是向已有的选择器增加关键字,表示定位的 HTML 元素的状态信息。

/* 所有用户指针悬停的按钮 */
button:hover {
  color: blue;
}

否定伪类选择器

:not(selector) {
    属性 : 属性值;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>否定伪类选择器</title>
  <style>
    .fancy {
      text-shadow: 2px 2px 3px gold;
    }

    p:not(.fancy) { /*匹配class名不是fancy的p标签*/
      color: green;
    }

    body :not(p) { /*匹配body中不是p标签的标签*/
      text-decoration: underline;
    }
  </style>
</head>

<body>
  <p>我是一个段落。</p>
  <p class="fancy">我好看极了!</p>
  <div>我不是一个段落。</div>
</body>

</html>

注意

  • 可以利用这个伪类提高规则的优先级。例如, #foo:not(#bar)#foo 会匹配相同的元素。 但是前者的优先级更高。
  • :not(foo) 将匹配任何非 foo 元素,包括 html 和 body 元素。
  • 这个选择器只会应用在一个元素上,你无法用它排除所有父元素。

伪元素选择器

CSS 中伪元素选择器的用法与伪类选择器的用法类似,都是在指定 CSS 选择器增加关键字。但这两者的作用并不相同,伪类选择器是用来描述某个指定元素的状态信息,而伪元素选择器是用来描述某个指定元素的特定部分设定样式。

/* CSS3 语法 */
选择器::伪元素 {
  属性 : 属性值;
}
/* CSS2 过时语法 (仅用来支持 IE8) */
选择器:伪元素 {
  属性 : 属性值;
}

伪元素选择器的语法格式为 ::伪元素,一定不要忘记 ::伪元素选择器只能和基本选择器配合使用,并且一个选择器只能使用一个伪元素选择器,如果要为一个选择器增加多个伪元素选择器需要分别编写。

before和after

::before 伪元素的作用是作为定位的 HTML 元素的第一个子级元素,::after 伪元素的作用是作为定位的 HTML 元素的最后一个子级元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        a::after{
            content: "→";
        }
        a::before{
            content: "♥";
        }
    </style>
</head>
<body>
    <div>
        <a href="https://antmoe.com">这是一个测试内容</a>
    </div>
</body>
</html>

QQ截图20200103001438.png

first-letter

::first-letter 伪元素的作用是为匹配元素的文本内容的第一个字母设置样式内容。 如下示例代码展示了**::first-letter 伪元素**的用法:

p::first-letter {
  font-size: 130%;
}

first-line伪元素

::first-line 伪元素的作用是为匹配 HTML 元素的文本内容的第一行设置样式内容。 如下示例代码展示了**::first-line 伪元素**的用法:

.line::first-line{
            background-color: tomato;
        }

GIF 2020-1-3 0-19-31.gif

::selection 伪元素

::selection 伪元素的作用是匹配用户在 HTML 页面选中的文本内容(比如使用鼠标或其他选择设备选中的部分)设置高亮效果。如下示例代码展示了**::selection 伪元素**的用法:

p::selection {
    color: gold;
    background-color: red;
}

GIF 2020-1-3 0-23-08.gif

只有一小部分 CSS 属性可以用于::selection 伪元素:

  • color 属性
  • background-color 属性
  • cursor 属性
  • caret-color 属性
  • outline 属性
  • text-decoration 属性
  • text-emphasis-color 属性
  • text-shadow 属性