1. IT分享知识网首页
  2. 开发框架
  3. CSS

CSS选择器优先级[亲测有效]

老牧童 • • CSS • 阅读 244

CSS选择器优先级[亲测有效]CSS选择器优先级（1）CSS选择器都有权重值，权重值越大优先级越高。内联样式表的权重值最高，值为1000。id选择器的权重值为100。class选择器的权值为10。类型（元素）选择器的优先级为1。通配符选择器的优先级为0。（2）当权值相等时，后定义的样式表要优于先定义的样式表。（3）在同一组属性设置中表有**“!important”**规则的优先级最大。后代选择器CSS后代选择器指为某标签元素内的特定后代标签元素来定义其样式。在CSS后代选择器中，规则左边的选择器一端包含两个或多个

大家好，欢迎来到IT知识分享网。

CSS选择器优先级

（1）CSS选择器都有权重值，权重值越大优先级越高。

  • 内联样式表的权重值最高，值为1000。
  • id选择器的权重值为100。
  • class选择器的权值为10。
  • 类型（元素）选择器的优先级为1。
  • 通配符选择器的优先级为0。

（2）当权值相等时，后定义的样式表要优于先定义的样式表。

（3）在同一组属性设置中表有**“!important”**规则的优先级最大。

后代选择器

CSS后代选择器指为某标签元素内的特定后代标签元素来定义其样式。在CSS后代选择器中，规则左边的选择器一端包含两个或多个用空格符分隔的选择器，选择器中的空格是一种结合符。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>后代选择器</title>
  <style>
    .ancestor {
      width: 500px;
      height: 300px;
    }

    .parent {
      width: 300px;
      height: 200px;
    }

    .child {
      width: 200px;
      height: 100px;
    }

    /* 
      定位的是 .ancestor 的后代为 div 的元素
      * 后代选择器包含该元素中所有包裹的元素
     */
    .ancestor div {
      background-color: lightcoral;
    }
  </style>
</head>

<body>
  <div class="ancestor">
    this is ancestor.
    <div class="parent">
      this is parent.
      <div class="child">this is child.</div>
    </div>
  </div>
</body>

</html>

子选择器

CSS子选择器指为某标签元素的子元素来定义其样式，这里的子元素仅指第一级后代元素。CSS子选择器使用了符号”大于号（>）“，即子结合符。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>子级选择器</title>
  <style>
    .ancestor {
      width: 500px;
      height: 300px;
    }

    .parent {
      width: 300px;
      height: 200px;
    }

    .child {
      width: 200px;
      height: 100px;
    }

    /*
      定位的是 .ancestor 的子级为 div 的元素
    */
    .ancestor>div {
      background-color: lightcoral;
    }
  </style>
</head>

<body>
  <div class="ancestor">
    this is ancestor.
    <div class="parent">
      this is parent.
      <div class="child">this is child.</div>
    </div>
  </div>
</body>

</html>

相邻兄弟选择器

CSS相邻兄弟选择器指可选择紧接在另一元素后的元素，且二者有相同的父元素。相邻兄弟选择器使用”加号（+）“作为相邻兄弟结合符。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>相邻兄弟选择器</title>
  <style>
    .ancestor {
      width: 500px;
      height: 300px;
    }

    .parent {
      width: 300px;
      height: 200px;
    }

    .child {
      width: 200px;
      height: 100px;
    }

    /* 定位的是 .child1 的后面相邻兄弟为 div 的元素 */
    .child1+div {
      background-color: lightcoral;
    }
  </style>
</head>

<body>
  <div class="ancestor">
    this is ancestor.
    <div class="parent">
      this is parent.
      <div class="child0">this is child0.</div>
      <div class="child1">this is child1.</div>
      <div class="child2">this is child2.</div>
    </div>
  </div>
</body>

</html>

普通兄弟选择器

CSS普通兄弟选择器指可选择紧接在另一元素后的所有元素，且二者有相同的父元素。普通兄弟选择器使用”波浪号（~）“作为普通兄弟结合符。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>普通兄弟选择器</title>
  <style>
    .ancestor {
      width: 500px;
      height: 300px;
    }

    .parent {
      width: 300px;
      height: 200px;
    }

    .child {
      width: 200px;
      height: 100px;
    }

    /* 定位的是 .child1 的后面兄弟为 div 的元素 */
    .child1~div {
      background-color: lightcoral;
    }
  </style>
</head>

<body>
  <div class="ancestor">
    this is ancestor.
    <div class="parent">
      this is parent.
      <div class="child0">this is child0.</div>
      <div class="child1">this is child1.</div>
      <div class="child2">this is child2.</div>
      <div class="child3">this is child3.</div>
    </div>
  </div>
</body>

</html>

并集选择器

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>并集选择器</title>
  <style>
    /* 要求为 <h1> ~ <h6> 元素的文本内容设置相同颜色 */
    /* h1 {
      color: lightcoral;
    }

    h2 {
      color: lightcoral;
    }

    h3 {
      color: lightcoral;
    }

    h4 {
      color: lightcoral;
    }

    h5 {
      color: lightcoral;
    }

    h6 {
      color: lightcoral;
    } */
    /* 通过并集选择器进行改写 */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: lightcoral;
    }
  </style>
</head>

<body>
  <h1>标题一</h1>
  <h2>标题二</h2>
  <h3>标题三</h3>
  <h4>标题四</h4>
  <h5>标题五</h5>
  <h6>标题六</h6>
</body>

</html>

交集选择器

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>交集选择器</title>
  <style>
    p {
      color: lightcoral;
    }

    .cls {
      color: lightskyblue;
    }

    /* 交集选择器 */
    p.cls {
      color: magenta;
    }
  </style>
</head>

<body>
  <p>18级启嘉班</p>
  <p class="cls">19级启嘉班</p>
  <p>20级启嘉班</p>
  <div class="cls">启嘉网</div>
</body>

</html>

伪类选择器

用来表示定位元素的某种状态所显示的样式

语法: “:关键字”

例如 :hover

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>伪类选择器</title>
  <style>
    button:hover {
      background-color: lightcoral;
    }
  </style>
</head>

<body>
  <button>按钮</button>
</body>

</html>

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

否定伪类选择器

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>否定伪类选择器</title>
  <style>
    .fancy {
      text-shadow: 2px 2px 3px gold;
    }

    p:not(.fancy) {
      color: green;
    }

    body :not(p) {
      text-decoration: underline;
    }
  </style>
</head>

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

</html>

伪元素选择器

CSS 伪元素是添加到选择器的关键字，可用于设置所选元素的特定部分的样式。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>伪元素选择器</title>
  <style>
    .p1::first-line {
      color: lightcoral;
    }

    .p2 span {
      color: lightcoral;
    }
  </style>
</head>

<body>
  <p class="p1">19级启嘉班Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, ratione at labore blanditiis
    tempora
    quibusdam, maxime veritatis, ex incidunt et aliquid. Hic incidunt tempore sit alias ullam ut numquam odio.</p>
  <p class="p2"><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt quod</span> aspernatur
    repudiandae nisi ex
    minus repellendus corrupti labore, iste dolores, accusamus aperiam quaerat reiciendis quia soluta corporis!
    Temporibus, quia sapiente!</p>
</body>

</html>

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

before和after伪元素

在CSS中，**::before**创建一个伪元素，该元素是所选元素的第一个子元素。

在CSS中，**::after**创建一个伪元素，该元素是所选元素的最后一个子元素。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>before和after伪元素</title>
  <style>
    p::before {
      content: "♥";
    }

    p::after {
      content: "♥";
    }
  </style>
</head>

<body>
  <p>19级启嘉班</p>
</body>

</html>

参考：:: before（：before）

参考：::after (:after)

first-letter伪元素

样式的第一行的第一个字母块级元素，但仅当没有被其它内容（例如图像或内联表）之前。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>first-letter伪元素</title>
  <style>
    p::first-letter {
      color: lightcoral;
    }
  </style>
</head>

<body>
  <p>19级启嘉班</p>
</body>

</html>

参考：:: first-letter（：first-letter）

selection伪元素

样式已经强调了用户（如点击和整个文本拖动鼠标）文档的一部分。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>selection伪元素</title>
  <style>
    p::selection {
      background-color: #000;
      color: #fff;
    }
  </style>
</head>

<body>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum possimus ipsa dolores neque odit, blanditiis
    accusantium libero nihil dolore porro facere, amet doloribus eum fuga. Delectus, dignissimos nam! Similique, harum?
  </p>
</body>

</html>

参考：::selection

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/26132.html

赞 (0)
老牧童老牧童
0
上一篇 2023-05-20 20:00
下一篇 2023-07-02 20:00

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信