Question

这很简单，但它只是出现在我身上;并且，我无法相信我无法对文本修饰继承做任何事情。

我知道如果有<div>，那里的所有内容都必须加下划线。但是对于具有单独的类或id的嵌套<div>来进行继承，即使选择了（none）？！？我不买。这也发生在文本样式上，但不是颜色。

#hello {
  font-weight: bold;
}
#me {
  text-decoration: underline;
  color: #cc33cc;
}
.home {
  text-decoration: none !important;
  color: black;
}

<p id="hello">hello</p>
<div id="me">me
  <div class="home">go</div>
</div>

Answer 1

您可以绝对定位.home以防止文字修饰应用：

＆＃13;

#hello {
  font-weight: bold;
}
#me {
  text-decoration: underline;
  color: #cc33cc;
}
.home {
  position: absolute;
  color: black;
}

＆＃13;

<p id="hello">hello</p>
<div id="me">me
  <div class="home">go</div>
</div>

＆＃13;

来自CSS2.1 spec：

请注意，文本修饰不会传播到浮动和绝对定位的后代，也不会传播到原子内联级后代（如内联块和内联表）的内容。

您也可以将其浮动或显示为内联块，但这样做会将元素放在父元素中的文本旁边，而不是像块级元素一样放在它下面。绝对定位（没有偏移）不会移动元素。

由于绝对定位元素会将其从流中取出（这就是为什么它会阻止父文本装饰应用），这意味着在.home后需要了解的任何其他流入元素它的位置，你需要相应的风格。例如，下一个元素需要具有等于其高度的上边距，或沿着这些线的某些内容。

Answer 2

只需使用以下CSS代码替换您的样式。

.home {  
  color: black;
  display: inline-block;
}

Answer 3

您应该尝试在css中添加组合器

#home {
      text-decoration: underline;  
      color: #cc33cc;
      float:Right;
}


.noDecoration, #home ~ p { 
        text-decoration: none;
        color: black;        
}

你必须写这样的hmtl

<div id="home">
    <p>Home-1</p>
</div>   

<div id="home .noDecoration">
    <p>Home-2</p>
</div>

我希望这能解决你的问题

Answer 4

您可以使用> *选择#me中的所有元素，

#me > * {
  text-decoration: underline;
  color: #cc33cc;
}

父文本修饰的继承

4 个答案: