Question

我正在使用wordpress的工具箱主题。这是用于在h1标签内的博客页面上显示每个帖子的标题的代码

<h1 class="entry-title"><a href="<?php t he_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'toolbox' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php     the_title(); ?></a></h1>

它正在页面上正确显示标题但是当我尝试使用css编辑这些标题的外观时，没有变化，颜色仍然是蓝色：

.entry-title {color:#000;}

标题下面还有一个奇怪的蓝色下划线，我也希望将其删除。

这是该页面的html输出：

<header class="entry-header">
<h1 class="entry-title">
<a rel="bookmark" title="Permalink to Haley Joel Osment to Try Acting As a Grown Up in New…" href="http://localhost/wordpress/featured/haley-joel-osment-to-try-acting-as-a-grown-up-in-new-6/">Haley Joel Osment to Try Acting As a Grown Up in New…</a>
</h1>
<div class="entry-meta">
</header>

Answer 1

如果<a>标记中有<h1>并且<h1>样式，则<a>将使用其继承的样式，并且可能不遵循{{1}的样式1}}。

也许您可能只想在<h1中设置<a>元素的样式：

.entry-title

如果它仍然没有响应，则可能存在特异性问题，在这种情况下，您需要使用.entry-title a{ //styles }样式的!important。

修改要在悬停时从链接下方删除蓝线，您可能需要删除链接文本修饰：

.entry-title

Answer 2

类声明.entry-title不会影响h1元素中的链接。如果您要解决h1元素中的链接，则必须使用选择器h1.entry-title a。

删除下划线并明确设置颜色的示例：

h1.entry-title a { text-decoration:none; color:red; }

PS：在此上下文中，前缀h1.可能是可选的，但它提供了更具体的区分。

Answer 3

您遇到的问题是，出于可访问性原因，浏览器会将其默认样式放在<a>内的<h1>上，可能还有其他内容。

理想情况下，<a>应该超出<h1>，如下所示：

<a href="<?php t he_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'toolbox' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark">
    <h1 class="entry-title"><?php the_title(); ?></h1>
</a>

Answer 4

听起来有另一条规则更大的specificity规则会覆盖你的规则。在您的规则!important）中添加.entry-title {color:#000 !important;}或将选择器（.entry-title）部分更改为specificity。

例如，使用Chrome，您可以通过右键单击元素并从上下文菜单中选择 Inspect element 来检查元素。您应该能够看到正在应用于元素的其他CSS规则，这将有助于跟踪可能适用于该元素的其他规则以及覆盖您的样式。大多数其他现代浏览器都有类似的开发工具，用于检查HTML，CSS和JavaScript。

在h1中定义的类没有响应css

4 个答案: