在h1中定義的類沒有響應css

我正在使用wordpress的工具箱主題。這是用於顯示h1標籤在h1中定義的類沒有響應css

<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來編輯這些標題的appearence ，沒有變化，顏色仍然藍色：

.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>

來源

2011-07-24 Sheikh Muhammad Umar

類的聲明.entry-title不影響h1元素中的鏈接。如果您想要尋址h1元素內的鏈接，您必須使用選擇器h1.entry-title a。

例如除去下劃線，並明確設置顏色：

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

PS：在此背景下，前綴h1.可能是可選的，但它提供了一個更具體的差異化。

來源

2011-07-24 12:50:03

這似乎已經成功了。謝謝！ –

@Christopher：它不會影響鏈接，不會影響鏈接。另外，'h1.entry-title a'不是一個「類」，它是一個CSS選擇器。 – element119

@ Chromium：我猜你的意思是「它會影響鏈接，而不會影響鏈接」？但是你是對的，我糟糕的選擇短語可能會導致混淆。感謝您的更正。 –

聽起來有更大的specificity是壓倒一切的規則，其他規則。將!important添加到您的規則（.entry-title {color:#000 !important;}）或將選擇器（.entry-title）零件更改爲具有更大的specificity。

例如，Chrome瀏覽器就可以檢查由元素上右擊元素，然後選擇從上下文菜單中檢查元素。您應該能夠看到還有哪些其他CSS規則應用於您的元素，這將有助於追蹤哪些其他規則可能會應用於元素並覆蓋您的樣式。大多數其他現代瀏覽器都有類似的開發工具用於檢查HTML，CSS和JavaScript。

來源

2011-07-24 12:42:42 andyb

如果您在沒有評論的情況下對答案投了反對票，您根本就沒有幫助。 – andyb

謝謝大家對於所有的答案，克里斯托弗的答案爲我做了訣竅！ –

@謝赫：如果你看看我的回答，你會發現它和克里斯托弗一樣，只是我解釋了它爲什麼會起作用。 – element119

如果你有一個<h1>標籤和風格<h1>內<a>，該<a>將使用它繼承的造型和不按照<h1的造型。

也許你會想，只是樣式中.entry-title的<a>元素：

.entry-title a{ 
//styles 
}

如果仍然沒有反應，有可能是有特殊性的問題，在這種情況下，你會想用!important在.entry-title風格。

編輯從懸停在鏈接下方取出藍色的線，你可能會想刪除鏈接文本修飾：

.entry-title a:hover{ 
    text-decoration:none; 
    // other styles 
}

來源

2011-07-24 12:43:36 element119

您在這裏的問題是，瀏覽器會將其默認樣式放置在<h1>內部的<a>中，以便於訪問以及其他可能的情況。

理想情況下，<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>

來源

2011-07-24 12:45:52 Bojangles

這只是HTML5文檔類型的有效標記。 – andyb

在h1中定義的類沒有響應css

回答

相關問題