使用哪个 CSS 选择器？答案

【问题标题】：Which CSS selector to use?使用哪个 CSS 选择器？
【发布时间】：2011-02-03 02:47:52
【问题描述】：

抱歉标题含糊不清，我无法在一行中描述我的问题。问题是关于页面标题，它是从通用后端模板生成的，这是

<h2 class='page-title'> {title} </h2>

其中 {title} 由应用程序动态生成。所以我将在我的网站的每个页面上都有一个从同一个模板生成的。

我想要做的是，从 3. 主页中隐藏它，但让它显示在使用 CSS 或 Javascript 的所有其他页面上。我愚蠢地尝试了h1 {display:none}，但这只是隐藏了一切，我只想隐藏<h2 class='page-title'>Home</h2>

你知道怎么做吗？

【问题讨论】：

【解决方案1】：

要么使用后端代码给你的主页标题一个特定的 id，要么使用主页本身的页内 css：

h2.page-title { 
  display:none;
}

【讨论】：

【解决方案2】：

您需要为主页添加一个样式，或者有一个表明您当前正在查看主页的类：

h2.page-title 是选择元素的非常具体的方式，但它会影响所有页面。

.page-title 可以工作，如果您知道该类只会发生在 h2 元素上。

如果您在 body 上使用类，您可以执行以下操作：

body.frontpage h2.page-title

或body.frontpage .page-title，具体取决于您想要的具体程度。

我建议尽可能通用以避免特异性问题。

【讨论】：

【解决方案3】：

我会给你的 <html> 元素一个 id（每个页面都是唯一的）：

<html id='{pageid}'>
...
<h2 class='page-title'> {title} </h2>
...
</html>

然后使用选择器

#home .page-title { display: none }

【讨论】：

【解决方案4】：

如果您有 CMS 或类似的东西，将内容转储到单个模板中，那么我认为您最好使用 javascript。我不知道 css 中用于元素内部文本的选择器。

我通常使用 jquery 库 - 我会推荐类似的东西：

$(document).ready(function() { 
    $("h2.page-title:contains('Home')").css('display', 'none'); 
}

【讨论】：

【解决方案5】：

这最好由用于动态生成的相同服务器端语言完成，您只需添加一个条件，即如果页面为“主页”则不输出任何内容。

如果这不是您的选择，我建议您使用 Mel 的方式，因为它可以简单地工作，并且不需要 javascript。

另外我认为 Mel 的代码应该在你想隐藏的 h2 之上，并包裹在 <style></style> 标签中。

【讨论】：