如果H3同时也是超链接，如何对其应用样式？

Question

嘿SO，我的CSS有点生疏，请多包涵 :)

我正在使用一个布局，它具有对h2、h3、h4、h5、h6的border-bottom属性。我的一个页面使用h3来显示FAQ列表的标题，并且由于有一个展开/收缩脚本（点击标题，FAQ出现在标题下方），因此它具有锚标签。我不希望这些特定的h3元素具有边框。是否有一种特定的CSS语法可以实现这一点？也许像这样：

#content a,h3 {
    border-bottom:none;
}

这显然是错误的，因为它只会清除我的内容容器中任何a/h3元素的底部边框。

谢谢！

澄清：

文本

- Anders

Answer 1

没有CSS选择器可以根据父元素选择元素。最好的解决方案是给FAQ容器添加一个ID或类，然后：

#faq h3 {
    border-bottom: none;
}

- Ionuț G. Stan

---

我在想，有人发布正确答案需要多长时间。+1 - Paolo Bergantino

那么，只有我（和其他回答者）认为子选择器存在是我的想象吗？ - Meep3D

我想这就是我必须做的，但由于我的CSS不像以前那样简单（当它更简单时:P），所以我想问问看是否有什么花哨的东西可以做。谢谢！ - Anders

@Meep3D并不是在寻找子元素选择器，而是父元素选择器。我们所知道的CSS版本、草案或已批准的版本中都没有可用的父元素选择器。请注意，这是翻译后的内容，没有任何解释和额外的信息。 - Ionuț G. Stan

@Meep3D，我第一次阅读时也犯了同样的错误。虽然可以将<h*n*>元素包含在<a>元素中，但这是无效的（因为块级元素不应包含在内联元素中），因此编写选择器的正确方法是h3 a，这不会选择父元素（<h3>）。 - David Thomas

Answer 2

以下是每个CSS选择器匹配的演示。请注意，将h3放在a标签中不符合Web标准。

a h3 { styles }
<a href=""><h3>Hello</h3></a>

h3 a { styles }
<h3><a href="">Hello</a></h3>

- Sampson

---

在<a>中不允许出现<h3>。 - Greg

我正在演示选择器的含义差异，而不是建议他将h3放在a标签内。 - Sampson

Answer 3

使用这个代替：

h3>a { text-decoration: none; }

这样你就可以针对每个'h3'的'a'子元素进行操作。

尽可能使用类和标签选择器，而不是id选择器，因为定位id会使你的CSS代码变得不够灵活和可扩展。考虑面向对象编程中的继承。

如需进一步阅读和完整覆盖CSS选择器，请参考： http://www.w3.org/TR/2009/CR-CSS2-20090423/selector.html#child-selectors

干杯

- user105813

Answer 4

#content a>h3 {  border-bottom:none; } 

应该这样做。 > 符号表示“下一个标签必须是”。

#content a h3 {  border-bottom:none; }

可能也会起作用。

您可以将逗号用于多个规则，例如

h1, h2, h3 {
color: red;
}

针对红色的h1到h3标签

- Meep3D

---

您不应该在 A 标签内部使用标题元素。 - Ionuț G. Stan

真的，但与问题不完全相关。 - Meep3D

嗯，我不知道它有多相关。从问题中并不清楚A是否位于H3内部或反之亦然。无论如何，我们不应该将不良实践作为建议（相对而言，HTML5也允许A标签包含块元素）。 - Ionuț G. Stan