css - 将 CSS 样式应用于名称开头相同但结尾不同的 ID 元素

标签 css wordpress html css-selectors

在 WordPress 中,博客文章的标题通常使用一个 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 必须应用于 block 元素。

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

我已经在我的沙箱中保存了一个普通的 index.html 和 style.css 文件(没有 WordPress 标记)的工作副本,它反射(reflect)了上述描述(即 html 中的 ID“#post-5434”和 #post(在 css 中带有 'position:absolute'):可以访问它们 here .如您所见,显然,所需的样式并未应用于后代 blockquote 和 ul 元素。

更新 存在三种可能的解决方案,在某些情况下都同样有效且适用。见下文。

最佳答案

您可以使用 div[id*='post-'] { ... } 或更好的 div[id^='post-'] { .. .

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

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

关于css - 将 CSS 样式应用于名称开头相同但结尾不同的 ID 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5179045/

相关文章:

android - div 内有多个 div 的响应式布局

html - 如何在 CSS 中将一半文本放在 div 内,另一半放在外面?

javascript - 仅使用 HTML 和 CSS 制作一个简单的工具提示

php - WooCommerce 中新订单电子邮件通知的自定义主题

php - 如何在 WordPress 插件中使用命名空间和类

jQuery 可排序仪表板对齐

javascript - 通过单击 href url 加载新页面时不会调用 JavaScript 中的函数

javascript - 如何在显示元素之前从 .load() 获取新高度

html - 使用 CSS 覆盖父元素的背景图片

php - 分页 Wordpress $wpdb 查询?