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

然而它出现了这样的:

所以我有这个:

<ul>
    <li>Line 1</li>
    <li class="disabled">Line 2</li>
</ul>

相应的CSS是:

ul li:hover {
    color: red;
}

这允许两个'li'被悬停并且颜色改变.但如果我想要其中一个被"禁用",我会使用以下内容:

.disabled {
    color: grey;
}

但是其他CSS代码的'hover'伪类仍然会开始......我可以覆盖这个吗？

作为标题,我正在使用添加图标.icon-*.向超链接添加图标时:

<a href="#" class="icon-email icon-large">Email me!</a>

按content属性插入的内容在悬停时显示下划线文本修饰.我想禁用text-decoration之前的内容:

[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: 'IcoMoon';
    font-style: normal;
    speak: none;
}
.icon-mail:before {
    content: "\37";
}
[class^="icon-large-"]:before, [class*=" icon-large"]:before {
    font-size: 48px;
    line-height: 48px;
}
a[class^="icon-"]:before, a[class*=" icon-"]:before {
    margin-right: 5px;
    vertical-align: middle;
}

我试过这个,但它不起作用(装饰仍然可见):

a[class^="icon-"]:hover:before, a[class*=" icon-"]:hover:before {
    text-decoration: none;
    color: white;
}

我有一个文本链接,在悬停时加下划线.我正在>使用以下代码在链接的开头添加一个符号:

.box.blueb a { color: #0098aa; }
.box.blueb a:hover { text-decoration: underline; }
.box.blueb a:before { content: "> "; }
.box.blueb a:before:hover { text-decoration: none; }

但是,>当链接悬停时,我不希望该符号加下划线.我该如何实现这一目标？

我正在尝试使用p::first-letter选择器从第一个字母中删除文本修饰.但由于某种未知的原因,我无法做到这一点.

p::first-line {
  font-weight: bold;
  text-decoration: overline;
}
p::first-letter {
  text-decoration: none;
  /*text-decoration-color: rgba(59, 119, 191, 0.68);*/
  display: block;
  color: red;
  font-weight: bold;
  background-color: rgba(59, 119, 191, 0.68);
  margin: 0px 2px 1px 0;
  padding: 5px 13px 5px 11px;
  color: #b1ffea;
}

<h2>Heading <a href="#"><span class="anchor">#</span></a></h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur eaque enim eveniet facere incidunt inventore necessitatibus non quas, repellat sed ullam unde ut vitae! Asperiores ducimus laborum magnam officia repellendus.
Lorem ipsum dolor …

看来IE不关心text-decoration: none;的定义a:before伪元素(或伪类).

这是一个JS小提琴:http://jsfiddle.net/9N35f/
我希望">"失去下划线.它适用于FF,Chrome和Safari,但不适用于IE.用IE10和IE9测试.

问题:

我可以尝试使:before元素失去下划线的任何变通方法？理想情况下在IE9 +中

这个地方有错误报告吗？或者它是否符合标准？

我想对标签内的<td>标签除了标签之外的<a>标签内容应用直通.我申请的风格似乎不起作用......任何想法？

这是一个可以玩的例子(我在IE8中测试): http ://jsfiddle.net/9qbsq/

这是标记的样子......

HTML

<table border=1>
  <tr class="highlight">
      <td>hello</td>
      <td><a href="#">world</a></td>
  </tr>
  <tr>
      <td>foo</td>
      <td>bar</td>
  </tr>
</table>

CSS

.highlight td { text-decoration:line-through; }
.highlight td a { text-decoration:none; }

我有以下链接:

<a href="#">Link text<span>Link sub-text</span></a> 

当悬停我需要跨度内的文本没有下划线(但主链接文本是).可能吗？我试过了:

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

这不起作用.

这有什么解决方案吗？

有人知道是否可以防止标签的子项下划线,同时强调标签内容的其余部分？

这是一个例子 - 你可以在JSFiddle上看到这个.我已经尝试了所有我能想到的内容,但文本下划线仍然适用于链接中的所有文本.我在Chrome上查看,但我确信这适用于所有浏览器.

a {
    font-size: 32px;           
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a div {
    color: pink;
}

a:hover div,
a:active div,
a:focus div {
    text-decoration: none !important;
}?

<a href="http://news.bbc.co.uk">
<div class="inner">I don't want this bit underlined on hover. What's the big deal?</div>
This bit should be underlined on hover. Underlining here is fine. I have no objections to underlinining in this bit.
</a>?

我正在尝试删除伪连接器中的链接:hover行为:after.但我认为这是不可能的.

http://jsfiddle.net/3N9vs/

可能吗？

以下是基于此HTML的两个示例.

<a href="#">
    <div class="foo">
        hello
        <span class="bar">world</span>
    </div>
</a>

在第一个中,我在悬停时使链接不加下划线,然后使链接的子部分加下划线,这样可以正常工作:

a {
    text-decoration:none;
}
a:hover {
    text-decoration: none;
}
a:hover .bar {
    text-decoration: underline;
}

http://jsfiddle.net/3qPyX/1/

在第二个中,我现在反转选择器,以便第二个单词应该是un -underlined.然而,现在发生了一些奇怪的事 尽管选择器看起来应该从第二个单词中删除下划线,但整个链接仍然带有下划线. < - (这是问题.为什么会发生这种情况？)

a {
    text-decoration:none;
}
a:hover {
    text-decoration: underline;
}
a:hover .bar {
    text-decoration: none;
}

http://jsfiddle.net/EAmwt/

有人可以解释第二个例子中出了什么问题吗？使用Chrome进行检查显示其span.bar具有计算的样式text-decoration:none.

更新:解释如何解决问题的几个答案,这很好,除了这不是我的问题.我想知道的是为什么这种行为与粗体不同？例如,如果我用粗体尝试第二个例子,我会得到预期的结果:http://jsfiddle.net/3qPyX/4/

更新#2有人可以解释一下downvotes吗？

更新#3我为了清晰起见而进行了编辑,但如果您认为需要重新编写而不仅仅是低调,请花一点时间来改进问题.谢谢!

代码如下:

<h1 class="slide-title">
<span class="slider-category">
<a href="/test/test.html"> Blocking irritating text</a>
</span>
Hong Kong Trip Nov 2015 – Day 3 Itinerary
</h1>

使用h1.slide-title:hover也会影响span元素中的"阻止刺激性文本".

我只希望在悬停强调以下文本"港行2015年11月-第3天行程",我不要想了"阻止刺激性文本"当我将鼠标悬停在它出现下划线.

这可能与CSS或jQuery？

编辑:问题不重复,因为我不想编辑HTML.另外作为旁注,我希望<span>元素也可以单独悬停下划线.

我遇到了与每个主要浏览器相同的奇怪问题:一个元素使用两个text-decoration属性进行样式设置.

第一个装饰来自父元素,第二个装饰来自元素本身.这是相关的HTML:

<div style="text-decoration: underline">
    <span style="text-decoration: line-through">Hello</span>
</div>

如何覆盖第一个声明,而不是添加它？