当名称的开头保持相同而结尾不同时，将 CSS 样式应用于 ID 元素

Posted 2023-03-06

【中文标题】当名称的开头保持相同而结尾不同时，将 CSS 样式应用于 ID 元素

【英文标题】：Applying a CSS style to an ID element when the beginning of its name stays identical and the end varies

【发布时间】：2011-07-07 22:25:37

【问题描述】：

在 WordPress 中，博客文章的标题通常会使用一个 ID 元素进行格式化，该 ID 元素由一个前缀（如“post”）组成，该前缀永远不会改变，后跟 WordPress 生成的可变数字后缀，对应于连续的文章编号每个帖子都是独一无二的。

在 WordPress 主题 single.php 文件中，使用 html 5（但问题与 HTML 4 相同），博客文章标题的代码如下所示：

<article id="post-<?php the_ID(); ?>" role="main">

这会生成以下 html，比如说：

<article id="post-5434">

我在将样式应用于 ID 时遇到困难，因为除非我弄错了，否则似乎没有办法在元素名称的一部分变化时将样式应用于元素。在这种情况下，我需要做的是将 ID 设置为如下样式：

#post-[sequential number] 
    position: relative;


#post-[sequential number] blockquote,#post-[sequential number] ul,#post-[sequential number] ol 
    color: #555;
    margin: 0 14px 5px;
    line-height: 1.5;


#post-[sequential number] ul li,.entry ul li 
    list-style-type: disc;
    margin: 0 20px 5px;


#post-[sequential number] ol li 
    list-style: decimal;
    margin: 0 20px 5px;


#post-[sequential number] blockquote 
    font-style: italic;
    border-left: 1px solid #ccc;
    margin-left: 21px;
    padding-left: 10px;

为了将上面列出的样式应用于#post-[sequential number] ID 的后代。

在这种情况下，向 ID 添加一个类（例如，<article id="post-[sequential number]" class="blog-post"> 是行不通的，因为必须将 position:relative 应用于块元素。

当然，通过在#post-[sequential number] 及其后代之间添加一个额外的块元素（例如，<div class="blog-post">）并对其应用所需的样式，可以轻松实现此结果。但是使用 html 5 的全部意义在于删除不必要的 div 元素以进行更多语义标记，所以我想找到一个没有这个的解决方案。

我已经在我的沙箱中保存了一份简单的 index.html 和 style.css 文件（没有 WordPress 标记）的工作副本，这些文件反映了上述描述（即，html 中的 ID 为“#post-5434”）和#post（在css中带有'position：absolute'）：它们可以访问here。如您所见，显然，所需的样式并未应用于后代的 blockquote 和 ul 元素。

更新 有三种可能的解决方案，在某些情况下都同样有效和适当。见下文。

【参考方案1】：

您可以使用div[id*='post-'] ... 或更好的div[id^='post-'] ... 选择帖子

第一个将选择 id 包含引号中的值的所有 div 元素。第二个将选择所有 id 以引号中的值开头的 div 元素。

示例： http://jsfiddle.net/Lx8tW/2/

【讨论】：

感谢您的及时回复。我猜某种通配符可能会起作用，但是当我用谷歌搜索它时，我找不到解决这个问题的通配符。您的意思是将通配符应用于html吗？因为<article id*="post-5434"> 而不是<article id="post-5434"> 仍然不起作用。还是您的意思是将通配符应用于CSS？ #post-* 和 #*post 也不起作用。

@Donald 你在你的 CSS 中使用它。无需更改 html 中的任何内容。用示例检查更新的答案。

我将 jsFiddle 示例更新为 jsfiddle.net/Lx8tW/3。这只是为了展示它如何与article 标签一起工作，以防出现混淆。

@Sotiris，@anothershrubery，我已经尝试将您的建议应用到我的问题上，但显然仍然没有正确：http://jsfiddle.net/astorg/9zYeH/

@Donald 没有理由编辑您的 html 并添加星号。这在css中有它的作用。检查它：jsfiddle.net/utw8y/1

【参考方案2】：

@Sotiris 的答案是使用 CSS 的方式。但是，如果您可以编辑 WordPress 主题，则可以将 class="post" 添加到 HTML，例如

<article class="post" id="post-<?php the_ID(); ?>" role="main">

要生成此 HTML：

<article class="post" id="post-5434">

然后在你的 CSS 中使用这个类：

.post 
    position: relative;


/* and so on... */

此 CSS 具有在 IE 6 中工作的优势。

编辑：

在这种情况下，添加一个类（例如，<article id="post-[sequential number]" class="blog-post"> 到 ID）是行不通的，因为 position:relative 必须应用于块元素。

<article> 是块级元素。如果它没有在您的浏览器中显示，请将其弹出到您的 CSS 文件中：

article 
    display: block;

HTML5-aware reset stylesheets like Eric Meyer’s 这样做。

【参考方案3】：

您应该真正使用的不仅仅是将帖子类别添加到文章中：

<?php post_class(); ?>

这将为您提供帖子类别以及其他一些针对粘性帖子、自定义帖子类型、附件、自定义页面的帖子...

【讨论】：

谢谢，一个很好的建议。实际上，我有一个非常简单的设置，不需要为不同的帖子类别设置特殊样式。但实际上，您的解决方案可以与 CSS 相结合，为某些样式提供标准化组合，为其他样式提供更精细的定制。基本上，所有三个答案在某些情况下都同样适用。

wordpress 的“推荐”方式是使用 post_class，因为某些插件会挂钩包含的类，以便在您的帖子中设置其元素的样式。他们可能没有挂钩 .post，因此他们可能无法在您的网站上完全正常工作。