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

在 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 的后代。

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

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

我已在沙箱中保存了普通 index.html 和 style.css 文件（没有 WordPress 标记）的工作副本，该副本反映了上述描述（即 html 和 #post 中的 ID 为“#post-5434”） （在CSS中使用“position:absolute”）：可以访问它们here http://sandbox.donaldjenkins.net/stack-overflow_2011-02-25/index.html。正如您所看到的，显然，所需的样式没有应用于后代 blockquote 和 ul 元素。

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

您可以使用选择帖子div[id*='post-'] { ... }甚至更好div[id^='post-'] { ... }

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

Example: http://jsfiddle.net/Lx8tW/2/ http://jsfiddle.net/Lx8tW/2/