当ID元素的开头保持相同并且结尾不同时，对CSS元素应用CSS样式 [英] Applying a CSS style to an ID element when the beginning of its name stays identical and the end varies

问题描述

在WordPress中，博客帖子的标题通常使用由前缀（如'post'）组成的ID元素进行格式化，该元素从不变化，其后是由WordPress生成的可变数字后缀，对应于连续的帖子编号

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

 < article id =post-<？php the_ID（）;？> 。 role =main> 
  

这将生成以下html：

 < article id =post-5434> 
  

我对ID应用样式时遇到困难，因为除非我错了， t似乎是一种在元素名称变化时将样式应用于元素的方法。在这种情况下，我需要做的是如下样式的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-

在这种情况下，添加一个类（例如< article id =post- [sequential number] =blog-post> 到ID不起作用，因为 position：relative 必须应用于块元素。 / p>

当然，这个结果可以很容易地通过添加一个额外的块元素（比如说，< div class =blog-post> ）在＃post- [序列号]和它的后代之间，并应用所需的样式。但是使用html 5的重点是删除不必要的div元素，所以我想找到一个没有这个工作的解决方案。

我保存了一个简单的index.html和style.css文件的工作副本WordPress标记）在我的沙箱中反映上述描述（即，在html中的ID＃post-5434和在css中的#post（与'position：absolute'）：他们可以访问此处。如您所见，很明显，所需的样式不适用于后代blockquote和ul元素。

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

解决方案

@Sotiris的答案是在CSS中的方式。但是，如果您可以编辑WordPress主题，则可以向HTML中添加 class =post，例如

 < article class =postid =post-<？php the_ID（）;？> role =main> 
  

要生成此HTML：

 < article class =postid =post-5434> 
  

然后在CSS中使用类：

  .post {
 position：relative; 
} 
 
 / *等等... * / 
  

编辑：

< blockquote>

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

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

 文章{
 display：块; 
} 
  

HTML5感知型重设样式表（例如Eric Meyer的）。

In WordPress, the title of a blog post will usually be formatted using an ID element composed of a prefix such as 'post', that never varies, followed by variable numerical suffix generated by WordPress, corresponding to the sequential post number that is unique for each post.

In the WordPress theme single.php file, using html 5 (but the issue is the same with HTML 4), the code for the blog post title would look as follows:

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

This generates the following html, say:

<article id="post-5434">

I'm having difficulties applying a style to the ID, because unless I'm mistaken there doesn't seem to be a way of applying a style to an element when part of its name varies. In this instance, what I need to do is to style the ID as follows:

#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;
}

in order to apply the styles listed above to descendants of the #post-[sequential number] ID.

In this instance, adding a class (say, <article id="post-[sequential number]" class="blog-post"> to the ID wouldn't work, since position:relative has to be applied to a block element.

Of course, this result could be easily achieved by adding an extra block element (say, <div class="blog-post">) in between #post-[sequential number] and its descendants, and applying the desired styles to it. But the whole point of using html 5 is to remove unnecessary div elements to make for more semantic markup, so I'd like to find a solution that works without this.

I've saved a working copy of the plain index.html and style.css files (without the WordPress markup) in my sandbox that reflect the above description (i.e., with the ID '#post-5434' in the html and #post (with 'position:absolute') in the css): they can be accessed here. As you can see, obviously, the desired styles aren't applied to the descendant blockquote and ul elements.

UPDATE There are three possible solutions, all equally valid and appropriate in certain circumstances. See below.

解决方案

@Sotiris’ answer is the way to go in CSS. However, if you can edit your WordPress theme, you could add class="post" to the HTML, e.g

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

To produce this HTML:

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

Then use the class in your CSS:

.post {
    position: relative;
}

/* and so on... */

This CSS has the advantage of working in IE 6.

Edit:

In this instance, adding a class (say, <article id="post-[sequential number]" class="blog-post"> to the ID) wouldn't work, since position:relative has to be applied to a block element.

<article> is a block-level element. If it’s not showing up as such in your browser, pop this into your CSS file:

article {
    display: block;
}

HTML5-aware reset stylesheets like Eric Meyer’s do this.

这篇关于当ID元素的开头保持相同并且结尾不同时，对CSS元素应用CSS样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！