问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

多个css选择器组合问题

头像
前端spark
    567215
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .after{
            width: 300px;
            height: 200px;
            margin: 10px;
            box-shadow: 0px 10px 30px #cfcfcf;
        }
        #container .after {
          background: red;
        }
        .container #after {
          background: blue;
        }
    </style>
</head>
<body>
    <div class="container" id="container">
      <div class="after" id="after"></div>
    </div>
</body>
</html>

    为什么这个div出来的时蓝色 不是红色

    html5css3css选择器
    阅读 3.5k
    5 个回答
    得票最新
    头像
    疯子蝈蝈
      1.2k1110
      ✓ 已被采纳

      这个CSS执行顺序的问题，就近原则。
      因为 #container .after 和 .container #after 优先级是相同的，都是 id + class
      但是 #container .after 定义的红色被 .container #after 覆盖，所以显示的是蓝色；

      头像
      Reachel
        2.6k1114
         #container .after {
     background: red;
}
.container #after {
     background: blue;
}

        你这两个选择器都是选择的<div class="after" id="after"></div>这个div
        css样式表里css代码跟html一样是从上向下、从左到右执行的，对于同样的选择器，后定义的样式会把先定义的样式覆盖掉，首先样式赋值是红色，后面你又写了蓝色的背景，覆盖了之前写的，所以最后div呈现出蓝色背景。

        头像
        天涯忆归人
          50715

          优先级不同的情况下，会应用优先级高的样式；优先级相同的情况下，后面的样式会覆盖前面的样式。你这种情况属于后者。id的优先级比类更高，如果你的css是下面这样的：

          #container #after {
  background: red;
}
.container #after {
  background: blue;
}

          上面的优先级比下面更高，所以会显示红色。

          头像
          范洋
            1934

            按照优先级算法，你这2个选择器的权重是一样的，所以浏览器渲染时是从上到下执行，也就是说先把div染成了红色，再把div染成了蓝色。

            头像
            Just_do
              2426

              优先级相同的，后面的会覆盖前面的css样式

              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题