相关疑难解决方法(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>

然而它出现了这样的:

说你有这个HTML:

<a href="#">
    This is underlined
    <span>
        This isn't.
    </span>
</a>

这个css:

a:hover {
    text-decoration: underline; /* I know, this is enabled by default. */
}

a:hover span {
    text-decoration: none !important;
}

为什么a> span元素仍然有下划线.我很确定你应该通过使用'none'来取消装饰.我知道你可以用这个来达到我想要的结果:

<a href="#">
    <span class="underlined">
        This is underlined
    </span>
    <span>
        This isn't.
    </span>
</a>

再加上这个css:

a:hover {
    text-decoration: none;
}

a:hover span.underlined {
    text-decoration: underline;
}

但是......这对我来说没有意义,为什么你不能取消子元素的文本修饰.所以为什么...？

编辑:内联块

根据@amosrivera,当你使用内联块时,它确实有效.我可以确认这适用于Safari和Chrome!

a:hover span{
    text-decoration:none;
    display:inline-block;
}

如上所述,这适用于Safari和Chrome,但不适用于Firefox.以下解决方案适用于Firefox,但不适用于Safari和Chrome ...

a:hover span{
    text-decoration:none;
    display:block;
}

小桌子:

    CSS-Rule            |    Webkit    | …

是否可以使用除文本颜色之外的颜色为锚标记加下划线？任何例子将不胜感激.

编辑: 是否可以将颜色指定为十六进制,例如#8f867c？

可能重复:
如何使CSS文本修饰问题起作用？

我正在使用jquery切换效果来显示或隐藏有关列表元素的更多信息:

jQuery(document).ready(function($) {
    $("ul p").hide();
    $("ul li").addClass("link");
    $("ul li").click(function () {
    $("p", this).toggle(300);
    });
});

这适用于以下结构:

<ul>
<li>List element 1<p>Additional info 1</p></li>
<li>List element 2<p>Additional info 2</p></li>
</ul>

为了使它看起来"可点击"我是造型.link与css:

ul li.link {
    color: #0066AA;
}

ul li.link:hover {
    text-decoration: underline;
    cursor: pointer;
}

但我不希望显示的文本看起来像一个链接所以:

ul li.link p{
    color: black;
    text-decoration: none;
}

ul li.link p:hover {
    cursor: text;
    text-decoration: none;
}

但是<p>在悬停时仍有下划线(蓝色),尽管投掷文字装饰:无; 在每个自由空间!根据我的理解,这是因为子样式应用于父级之上,所以我实际上正在尝试将"无"放在下划线之上并让它消失.

所以我的问题(最终!)是这样的:有什么办法来摆脱下划线没有采取<p>出来的<li>(我不希望因其他原因做)？