CSS问class为main的div的高度

发布于
2019-08-26

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .main div {
      font-size: 14px;
      height: 12px;
    }
    .title {
      position: absolute;
      height: 20px;
    }
    .test {
      height: 20px;
    }
    .test2 {
      visibility: hidden;
    }
    .test3 {
      display: none;
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="title">title</div>
    <div class="test">test</div>
    <div class="test2">test2</div>
    <div class="test3">test3</div>
  </div>
</body>

main的高度是24px，请问这题要怎么分析，类选择器的优先级不是要比标签选择器更高吗

css

阅读 4.4k

4 个回答

得票最新

切图妞

1.9k5

发布于
2019-08-26

✓ 已被采纳

　css权重可以这么算：

!important,权值为10000；
内联样式，如 style=""，权值为1000；
ID选择器，如 #id="", 权值为 100；
class |伪类 | 属性选择器，如 .class | :hover,:link,:target | [type], 权值 10;
标签 | 伪元素选择器，如 p | ::after, ::before, ::fist-inline, ::selection, 权值 1；
通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~），权值为0

.main div权值为10+1=11，.test为10，所以div为.main div的12px
.title有属性 position: absolute;所以不计入值；.test3的display: none;也不计入；
.test和.test2都为12px（visibility: hidden即使不可见的元素也会占据页面上的空间），所以main的高度是24px