覆盖特定html元素的CSS属性

那是CSS的特殊性问题。

.main_section article具有比.special-bg选择器更高的特异性值。

按价值计算： Inline Style> IDs> Classes, Attributes, and Pseudo-classes>Element Types and Pseudo-elements，因此这两个CSS选择器的特异性的计算是：

.special-bg

Inline Style ID (Pseudo-)Class (Pseudo-)Element 0 0 1 0@H_301_27@

.main_section article

Inline Style ID (Pseudo-)Class (Pseudo-)Element 0 0 1 1@H_301_27@

您可以使用以下内容：

.main_section .special-bg {
  /* Styles goes here... */
}
@H_301_27@
   

          解决方法 

                
   
                    
    我有以下几点：

    <section class="main_section">
    <article>
    ...
    </article>
</section>


    在我的样式表中，我有：

    .main_section article {
    background-color:#fff;
    /* ... */
}


    这篇文章的样式，我对此感到高兴。现在，对于的 单个 实例article，我想执行以下操作：

    <section class="main_section">
    <article class="special-bg">
    ...
    </article>
</section>


    我已经定义了：

    .special-bg {
    background-color: #276a7f;
}


    但是该类未设置背景色。似乎html标记的样式article优先，无论样式表中CSS规则的顺序如何。

    如何通过使用样式类覆盖样式化html标签的CSS属性？这是可能吗？还有其他选择吗？
                
   

                
   


   
    
   

   

   

    
     喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！
    

    
      编程之家官方1群
    
    
      编程之家官方2群
    
    
      编程之家官方3群
    
    
      编程之家官方4群

Inline Style ID (Pseudo-)Class (Pseudo-)Element 0 0 1 1@H_301_27@

您可以使用以下内容：

.main_section .special-bg {
  /* Styles goes here... */
}
@H_301_27@
  

          解决方法 

                
  
                    
   我有以下几点：

   <section class="main_section">
    <article>
    ...
    </article>
</section>


   在我的样式表中，我有：

   .main_section article {
    background-color:#fff;
    /* ... */
}


   这篇文章的样式，我对此感到高兴。现在，对于的 单个 实例article，我想执行以下操作：

   <section class="main_section">
    <article class="special-bg">
    ...
    </article>
</section>


   我已经定义了：

   .special-bg {
    background-color: #276a7f;
}


   但是该类未设置背景色。似乎html标记的样式article优先，无论样式表中CSS规则的顺序如何。

   如何通过使用样式类覆盖样式化html标签的CSS属性？这是可能吗？还有其他选择吗？
                
  

                
  


  
   
  

  

  

   
    喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！
   

   
     编程之家官方1群
   
   
     编程之家官方2群
   
   
     编程之家官方3群
   
   
     编程之家官方4群

.main_section .special-bg {
  /* Styles goes here... */
}
@H_301_27@
 

          解决方法 

                
 
                    
  我有以下几点：

  <section class="main_section">
    <article>
    ...
    </article>
</section>


  在我的样式表中，我有：

  .main_section article {
    background-color:#fff;
    /* ... */
}


  这篇文章的样式，我对此感到高兴。现在，对于的 单个 实例article，我想执行以下操作：

  <section class="main_section">
    <article class="special-bg">
    ...
    </article>
</section>


  我已经定义了：

  .special-bg {
    background-color: #276a7f;
}


  但是该类未设置背景色。似乎html标记的样式article优先，无论样式表中CSS规则的顺序如何。

  如何通过使用样式类覆盖样式化html标签的CSS属性？这是可能吗？还有其他选择吗？
                
 

                
 


 
  
 

 

 

  
   喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！
  

  
    编程之家官方1群
  
  
    编程之家官方2群
  
  
    编程之家官方3群
  
  
    编程之家官方4群

<section class="main_section">
    <article>
    ...
    </article>
</section>

.main_section article {
    background-color:#fff;
    /* ... */
}

<section class="main_section">
    <article class="special-bg">
    ...
    </article>
</section>

.special-bg {
    background-color: #276a7f;
}

.main_section article

您可以使用以下内容：

我有以下几点：

在我的样式表中，我有：

这篇文章的样式，我对此感到高兴。现在，对于的单个实例article，我想执行以下操作：

我已经定义了：

但是该类未设置背景色。似乎html标记的样式article优先，无论样式表中CSS规则的顺序如何。

如何通过使用样式类覆盖样式化html标签的CSS属性？这是可能吗？还有其他选择吗？

.main_section article

Inline Style ID (Pseudo-)Class (Pseudo-)Element 0 0 1 1@H_301_27@

您可以使用以下内容：

.main_section .special-bg {
  /* Styles goes here... */
}
@H_301_27@
  

          解决方法 

                
  
                    
   我有以下几点：

   <section class="main_section">
    <article>
    ...
    </article>
</section>


   在我的样式表中，我有：

   .main_section article {
    background-color:#fff;
    /* ... */
}


   这篇文章的样式，我对此感到高兴。现在，对于的 单个 实例article，我想执行以下操作：

   <section class="main_section">
    <article class="special-bg">
    ...
    </article>
</section>


   我已经定义了：

   .special-bg {
    background-color: #276a7f;
}


   但是该类未设置背景色。似乎html标记的样式article优先，无论样式表中CSS规则的顺序如何。

   如何通过使用样式类覆盖样式化html标签的CSS属性？这是可能吗？还有其他选择吗？
                
  

                
  


  
   
  

  

  

   
    喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！
   

   
     编程之家官方1群
   
   
     编程之家官方2群
   
   
     编程之家官方3群
   
   
     编程之家官方4群

.main_section .special-bg {
  /* Styles goes here... */
}
@H_301_27@
 

          解决方法 

                
 
                    
  我有以下几点：

  <section class="main_section">
    <article>
    ...
    </article>
</section>


  在我的样式表中，我有：

  .main_section article {
    background-color:#fff;
    /* ... */
}


  这篇文章的样式，我对此感到高兴。现在，对于的 单个 实例article，我想执行以下操作：

  <section class="main_section">
    <article class="special-bg">
    ...
    </article>
</section>


  我已经定义了：

  .special-bg {
    background-color: #276a7f;
}


  但是该类未设置背景色。似乎html标记的样式article优先，无论样式表中CSS规则的顺序如何。

  如何通过使用样式类覆盖样式化html标签的CSS属性？这是可能吗？还有其他选择吗？
                
 

                
 


 
  
 

 

 

  
   喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！
  

  
    编程之家官方1群
  
  
    编程之家官方2群
  
  
    编程之家官方3群
  
  
    编程之家官方4群

<section class="main_section">
    <article>
    ...
    </article>
</section>

.main_section article {
    background-color:#fff;
    /* ... */
}

<section class="main_section">
    <article class="special-bg">
    ...
    </article>
</section>

.special-bg {
    background-color: #276a7f;
}

您可以使用以下内容：

我有以下几点：

在我的样式表中，我有：

这篇文章的样式，我对此感到高兴。现在，对于的单个实例article，我想执行以下操作：

我已经定义了：

但是该类未设置背景色。似乎html标记的样式article优先，无论样式表中CSS规则的顺序如何。

如何通过使用样式类覆盖样式化html标签的CSS属性？这是可能吗？还有其他选择吗？

您可以使用以下内容：

.main_section .special-bg {
  /* Styles goes here... */
}
@H_301_27@
 

          解决方法 

                
 
                    
  我有以下几点：

  <section class="main_section">
    <article>
    ...
    </article>
</section>


  在我的样式表中，我有：

  .main_section article {
    background-color:#fff;
    /* ... */
}


  这篇文章的样式，我对此感到高兴。现在，对于的 单个 实例article，我想执行以下操作：

  <section class="main_section">
    <article class="special-bg">
    ...
    </article>
</section>


  我已经定义了：

  .special-bg {
    background-color: #276a7f;
}


  但是该类未设置背景色。似乎html标记的样式article优先，无论样式表中CSS规则的顺序如何。

  如何通过使用样式类覆盖样式化html标签的CSS属性？这是可能吗？还有其他选择吗？
                
 

                
 


 
  
 

 

 

  
   喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！
  

  
    编程之家官方1群
  
  
    编程之家官方2群
  
  
    编程之家官方3群
  
  
    编程之家官方4群

<section class="main_section">
    <article>
    ...
    </article>
</section>

.main_section article {
    background-color:#fff;
    /* ... */
}

<section class="main_section">
    <article class="special-bg">
    ...
    </article>
</section>

.special-bg {
    background-color: #276a7f;
}

我有以下几点：

在我的样式表中，我有：

这篇文章的样式，我对此感到高兴。现在，对于的单个实例article，我想执行以下操作：

我已经定义了：

但是该类未设置背景色。似乎html标记的样式article优先，无论样式表中CSS规则的顺序如何。

如何通过使用样式类覆盖样式化html标签的CSS属性？这是可能吗？还有其他选择吗？

CSS 2022/1/1 18:23:26 有358人围观

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进，让解决方法与时俱进

请先登录

覆盖特定html元素的CSS属性

解决方法

解决方法

解决方法

解决方法

解决方法

解决方法

撰写回答

推荐问题

禁用LESS-CSS覆盖calc（）

用RGBBA背景色覆盖背景图片

响应大小的图像引导程序上的图像覆盖

覆盖Django管理中的默认查询集

适用于iOS的Appium的代码覆盖率

在YouTube iframe上覆盖不透明div

使用JPA批注映射java.util.Map时，键和值列名称将被覆盖

在Mocha中为ts节点覆盖tsconfig.json

internalContentSize（）-方法不会覆盖其超类中的任何方法

Mocha的代码覆盖率

webkit-transform覆盖Chrome 13中的z-index排序

推送正在覆盖数组中的先前数据

如何排列N个矩形以覆盖最小面积

可以进行Java泛型（模板）专业化（使用特定类型覆盖模板类型）

Java泛型名称冲突，方法未正确覆盖

使用反射调用覆盖的基本方法

如何衡量Golang中的代码覆盖率？

我可以使用C＃/。NET的高质量代码覆盖率做什么？[关闭]

如何在速记背景属性中包括背景覆盖值？

Chrome开发者工具：如何找出覆盖CSS规则的内容？

分类汇总

您的鼓励是对我最大的支持