我有一些这样的HTML。
<div class="platform-content">
<div class="content-wrapper">
<section class="entry">
<article class="post-type-page id123 page type-page status-private hentry" id="id123">
<section class="entry-header">
<h2 class="entry-title">Heading Text</h2>
</section>
我只需要定位一个h2元素即可使用CSS更改其颜色。我尝试执行以下操作。
#id123 h2 {
color: red;
}
它起作用,除了页面上的每个h2变为红色。我也不能直接将h2作为目标,因为它也会影响其他页面。我无法弄清楚如何只针对该页面上的一个特定h2,而不是针对页面上的每个h2。
在页面的下方,我有一些表单域,其中像这样包含h2元素。我不希望它们变成红色。
<li id='field_18_75' class='gfield gsection field_sublabel_below field_description_below gfield_visibility_visible'>
<h2 class='gsection_title'>Title Text</h2>
</li>
麻烦的是,所有这些html都是生成的,对此我没有任何控制权。因此,例如,我无法向该元素添加自定义ID。
答案 0 :(得分:3)
您应该只能使用 nth-child(n)
捕获元素
#id123 section h2:nth-child(1) {
color: orange;
}
<div class="content-wrapper">
<section class="entry">
<article class="post-type-page id123 page type-page status-private hentry" id="id123">
<section class="entry-header">
<h2 class="entry-title">Heading Text</h2><h2 class="entry-title">Heading Text</h2>
</section>
</article>
</section>
</div>
答案 1 :(得分:0)
如果您希望特定标签为红色,请为其指定唯一的ID,然后将其设置为红色。
#uniqueId {
color : red
}
<h2 id = "uniqueId">Heading Text</h2>
答案 2 :(得分:0)
为该特定h2
元素提供ID:
<h2 class="entry-title" id="my-id">Heading Text</h2>
然后在CSS中输入
:#my-id {
color: red;
}
答案 3 :(得分:0)
<h2 id="idA" class="entry-title">Heading Text</h2>
在h2标签上放置特定ID。
#idA{
color : red
}
答案 4 :(得分:0)
使用:nth-child来实现这一目标。像这样检查我的答案。
.entry-header h2:nth-child(1){
color:red;
}
.entry-header h2:nth-child(2){
color:blue
}
.entry-header h2:nth-child(3){
color:yellow
}
<div class="platform-content">
<div class="content-wrapper">
<section class="entry">
<article class="post-type-page id123 page type-page status-private hentry" id="id123">
<section class="entry-header">
<h2 class="entry-title">Heading Text1</h2>
<h2 class="entry-title">Heading Text2</h2>
<h2 class="entry-title">Heading Text3</h2>
<h2 class="entry-title">Heading Text4</h2>
</section>
答案 5 :(得分:0)
David Angulo-如果条目标题是唯一的,则可以改用#id123 h2.entry-title。
答案 6 :(得分:0)
由于您在id
元素上指定了<h2>
,所以您指定的代码应该可以使用。请记住,每个页面上的ID应该是唯一的,因此CSS指令#id123 h2 { color: red; }
应该只影响<h2 id="id123"></h2>
元素。
示例:
h2 {
color: blue;
}
#id123 h2 {
color: red;
}
<div class="platform-content">
<div class="content-wrapper">
<section class="entry">
<article class="post-type-page id123 page type-page status-private hentry" id="id123">
<section class="entry-header">
<h2 class="entry-title">Heading Text</h2>
</section>
</article
</section>
</div>
</div>
<div class="platform-content">
<div class="content-wrapper">
<section class="entry">
<article class="post-type-page id123 page type-page status-private hentry" id="id124">
<section class="entry-header">
<h2 class="entry-title">Heading Text</h2>
</section>
</article
</section>
</div>
</div>