定位页面上的特定H2

时间:2019-12-11 06:31:49

标签: html css

我有一些这样的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。

7 个答案:

答案 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>