当前位置： 文江博客话题详情

如何让 CSS 文本装饰覆盖起作用？

发布于 2024-08-13 19:38:39 字数 763 浏览 9 评论 0原文

有些日子我发誓我要疯了。这是那些日子之一。我认为我的 CSS 在这里相当简单，但它似乎不起作用。我缺少什么？

我的 CSS 看起来像这样：

ul > li {
    text-decoration: none;
}
ul > li.u {
    text-decoration: underline;
}
ul > li > ul > li {
    text-decoration: none;
}
ul > li > ul > li.u {
    text-decoration: underline;
}

我的 HTML 看起来像这样：

<ul>
  <li>Should not be underlined</li>
  <li class="u">Should be underlined
    <ul>
      <li>Should not be underlined</li>
      <li class="u">Should be underlined</li>
    </ul>
  </li>
</ul>

但它是这样的：

Image

原文

Some days I swear I'm going mad. This is one of those days. I thought my CSS was fairly straight-forward here, but it just doesn't seem to be working. What am I missing?

My CSS looks like this:

ul > li {
    text-decoration: none;
}
ul > li.u {
    text-decoration: underline;
}
ul > li > ul > li {
    text-decoration: none;
}
ul > li > ul > li.u {
    text-decoration: underline;
}

And my HTML looks like this:

<ul>
  <li>Should not be underlined</li>
  <li class="u">Should be underlined
    <ul>
      <li>Should not be underlined</li>
      <li class="u">Should be underlined</li>
    </ul>
  </li>
</ul>

Yet it comes up like this:

Image

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（7）

筱果果 2024-08-20 19:38:39

text-decoration 的行为与其他与字体/文本相关的样式（如 font-weight）不同。应用 text-decoration 也会影响所有嵌套元素。

看看这个：
http://www.w3.org/TR/CSS21/text .html#propdef-text-decoration

摘录：

内联框中的文本装饰是
绘制在整个元素上，
跨越任何后代元素而不
关注他们的
在场。 “文字装饰”
后代元素的属性不能
对装修有没有影响
元素
。 。 。 .
一些用户代理
已经实现了文本修饰
将装饰传播到
后代元素而不是
简单地画出装饰
如上所述的元素。这
可以说是被宽松者允许的
CSS2 中的措辞。

我从以下位置获取信息： http://csscreator.com/node/14951

text-decoration does not behave the same as other font/text related styling like font-weight. Applying text-decoration will affect all nested elements as well.

Check this out:
http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration

Excerpt:

Text decorations on inline boxes are
drawn across the entire element, going
across any descendant elements without
paying any attention to their
presence. The 'text-decoration'
property on descendant elements cannot
have any effect on the decoration of
the element
. . . .
Some user agents
have implemented text-decoration by
propagating the decoration to the
descendant elements as opposed to
simply drawing the decoration through
the elements as described above. This
was arguably allowed by the looser
wording in CSS2.

I've got the info from: http://csscreator.com/node/14951

回复 原文
逐鹿 2024-08-20 19:38:39

在这些情况下，您可以摆脱应用于父元素的 text-decoration：

  • 不流动的元素，例如浮动元素和绝对定位元素

    li {
  浮动：向左； /* 避免从 ul 传播文本修饰 */
  明确：两者； /* 每行一里 */
}
ul { 溢出：隐藏； } /* 清除修复 */


    ul {
  溢出：隐藏； /* 清除修复 */
}
李{
  浮动：向左； /* 避免从 ul 传播文本修饰 */
  明确：两者； /* 每行一里 */
}
li.u {
  文本装饰：下划线；
}
      ;
  
    • 不应加下划线
      • 
  
    • 应加下划线
    
        
      
      • 不应加下划线
        • 
      
      • 应加下划线
        • 
    
      
  
      •

  • 原子内联级元素，例如内联块和内联表格

    但是如果您使用li{display:inline-block}，那么您就没有项目符号（您会丢失display:list-item）并且项目会出现一个挨着一个。

    然后，要每行一个项目，您可以使用

    li {
  显示：内联块； /* 避免从 ul 传播文本修饰 */
  宽度：100%； /* 每行一里 */
}

    要添加项目符号，您可以使用 ::before 伪元素。但是，项目符号不应该带有下划线，因此您需要将它们排除在外，或者将它们设置为原子内联级别。

    li {
  显示：内联块； /* 避免从 ul 传播文本修饰 */
  宽度：100%； /* 每行一里 */
}
李：之前{
  内容： '• '; /* 插入项目符号 */
  显示：内联块； /* 避免来自 li 的文本装饰传播 */
  空白：预换行； /* 不要折叠空白 */
}
li.u {
  文本装饰：下划线；
}
      ;
  
    • 不应加下划线
      • 
  
    • 应加下划线
    
        
      
      • 不应加下划线
        • 
      
      • 应加下划线
        • 
    
      
  
      • 


    li {
  显示：内联块； /* 避免从 ul 传播文本修饰 */
  宽度：100%； /* 每行一里 */
}
李：之前{
  内容： '•'; /* 插入项目符号 */
  位置：绝对； /* 避免来自 li 的文本装饰传播 */
  左边距：-.75em；
}
li.u {
  文本装饰：下划线；
}
      ;
  
    • 不应加下划线
      • 
  
    • 应加下划线
    
        
      
      • 不应加下划线
        • 
      
      • 应加下划线
        • 
    
      
  
      •

此行为在 CSS 2.1 和 CSS 文本装饰模块级别 3：

请注意，文本装饰不会传播到任何流出的内容
后代，也不是原子内联级后代的内容
例如内联块和内联表。

You get rid of text-decoration applied to a parent element in those cases:

  • Out-of-flow elements, such as floated and absolutely positioned ones

    li {
  float: left; /* Avoid text-decoration propagation from ul */
  clear: both; /* One li per line */
}
ul { overflow: hidden; } /* Clearfix */


    ul {
  overflow: hidden; /* Clearfix */
}
li {
  float: left; /* Avoid text-decoration propagation from ul */
  clear: both; /* One li per line */
}
li.u {
  text-decoration: underline;
}
    <ul>
  <li>Should not be underlined</li>
  <li class="u">Should be underlined
    <ul>
      <li>Should not be underlined</li>
      <li class="u">Should be underlined</li>
    </ul>
  </li>
</ul>

  • Atomic inline-level elements, such as inline blocks and inline tables

    But if you use li{display:inline-block}, then you don't have bullets (you lose display:list-item) and the items appear one next to the others.

    Then, to have one item per line, you can use

    li {
  display: inline-block; /* Avoid text-decoration propagation from ul */
  width: 100%;           /* One li per line */
}

    And to add the bullets, you can use ::before pseudo-elements. However, bullets shouldn't be underlined, so you will need to take them out-of-flow or make them atomic inline-level too.

    li {
  display: inline-block; /* Avoid text-decoration propagation from ul */
  width: 100%;           /* One li per line */
}
li:before {
  content: '• ';         /* Insert bullet */
  display: inline-block; /* Avoid text-decoration propagation from li */
  white-space: pre-wrap; /* Don't collapse the whitespace */
}
li.u {
  text-decoration: underline;
}
    <ul>
  <li>Should not be underlined</li>
  <li class="u">Should be underlined
    <ul>
      <li>Should not be underlined</li>
      <li class="u">Should be underlined</li>
    </ul>
  </li>
</ul>

    li {
  display: inline-block; /* Avoid text-decoration propagation from ul */
  width: 100%;           /* One li per line */
}
li:before {
  content: '•';          /* Insert bullet */
  position: absolute;    /* Avoid text-decoration propagation from li */
  margin-left: -.75em;
}
li.u {
  text-decoration: underline;
}
    <ul>
  <li>Should not be underlined</li>
  <li class="u">Should be underlined
    <ul>
      <li>Should not be underlined</li>
      <li class="u">Should be underlined</li>
    </ul>
  </li>
</ul>

This behavior is specified in CSS 2.1 and CSS Text Decoration Module Level 3:

Note that text decorations are not propagated to any out-of-flow
descendants, nor to the contents of atomic inline-level descendants
such as inline blocks and inline tables.

回复 原文
静谧幽蓝 2024-08-20 19:38:39

okw的回答上面完美地解释了为什么如果不做一些其他改变就不能做你所要求的事情。不，你不会生气！

可能的解决方法：

  • 尝试 border-bottom？
  • 将想要加下划线的文本包含在 span class="u" 标记中？ （为了防止文本装饰装饰嵌套元素）
  • 如果您无法更改标记，您可以添加一些脚本来完成与我之前的建议相同的任务。

祝你好运！

o.k.w.'s answer above explains perfectly why you can't do what you are asking without some other changes. No, you're not going mad!

Possible workarounds:

  • try border-bottom?
  • wrap the text you want underlined in a span class="u" tag? (to prevent the text-decoration from decorating nested elements)
  • if you aren't able to change the markup, you could add some scripting to accomplish the same as my previous suggestion.

Best of luck!

回复 原文
稀香 2024-08-20 19:38:39

您看到所看到内容的原因是您的规则

ul > li.u

优先于：

ul > li > ul > li

因为指定了一个类，并且该类的权重比元素选择器总和的权重更大。

编辑：你可以尝试的是：

.u ul {
        text-decoration: none;
}
.u {
        text-decoration: underline;
}

并尝试一下（也许你必须使用li.u而不仅仅是.u） 。

但是，根据内容，您可能希望将带下划线的部分包含在 q、em 或 strong 标签中，并且设置这些标签的样式而不是使用类。这样你就可以描述你的内容并设计它的样式。

The reason you´re seeing what you're seeing is that your rule

ul > li.u

takes preference over:

ul > li > ul > li

as a class is specified and that has more weight than the element selectors together.

Edit: What you could try is:

.u ul {
        text-decoration: none;
}
.u {
        text-decoration: underline;
}

and play around with that (perhaps you will have to use li.u instead of just .u).

However, depending on the content you might want to wrap the underlined parts in q, em or strong tags and style these tags instead of using a class. That way you would be describing your content as well as styling it.

回复 原文
沩ん囻菔务 2024-08-20 19:38:39

我在使用外部主题/CSS 时遇到了类似的问题，因此我无法修改它以删除 text-decoration: none;。就我而言，我有一个带有链接的子元素，但该链接没有按预期加下划线。我尝试使用 display: inline-block; 正如其他人提到的，但它没有效果。

对我有用的是像您所做的那样覆盖 text-decoration ，但还包括 !important 来强制它覆盖父级的 text-decoration >。

// Defined in an external CSS, so I couldn't modify it.
.footer {
    text-decoration: none;
}

// In my CSS file.
.footer a {
    text-decoration: underline !important;
}

因此，对于您的特定示例，我想这可能会起作用（我没有测试它来确认）：

ul > li > ul > li {
    text-decoration: none !important;
}

I ran into a similar issue when using an external theme/CSS, so I couldn't modify it to remove the text-decoration: none;. In my case, I had a child element with a link, but the link wasn't being underlined as expected. I tried using display: inline-block; as others mentioned, but it has no effect.

What worked for me was overriding the text-decoration as you had done, but also including !important to force it to override the parent's text-decoration.

// Defined in an external CSS, so I couldn't modify it.
.footer {
    text-decoration: none;
}

// In my CSS file.
.footer a {
    text-decoration: underline !important;
}

So for your particular example, I imagine this may do the trick (I did not test it to confirm):

ul > li > ul > li {
    text-decoration: none !important;
}
回复 原文
一曲爱恨情仇 2024-08-20 19:38:39

我发现的最简洁的方法是将下划线设置为背景颜色。

The cleanest approach I’ve found is just to set the underline to the background’s colour.

回复 原文
天邊彩虹 2024-08-20 19:38:39
.u {text-decoration: underline;}

.u {text-decoration: underline;}
回复 原文
~没有更多了~

关于作者

难理解

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

佚名

文章 0 评论 0

羁客

文章 0 评论 0

天天爱笑的徐老师

文章 0 评论 0

星

文章 0 评论 0

夏日落

文章 0 评论 0

隐诗

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文