时间戳

首页 > 解决方案 > 样式表样式不适用于一个特定的

html - 样式表样式不适用于一个特定的

问题描述

我在一个 React 应用程序中工作，并且有一个呈现大量span标签的组件。这些标签都有不同的类名，并从链接的样式表中接收它们的所有样式。除了一个类，如下所示actions。出于某种原因，我无法弄清楚如何通过样式表更新这一类。

如果我进入 Chrome 开发工具并将样式更改为actions，则将呈现更改。如果我在组件中创建一个customStyle对象并应用指向该对象actions的style属性，则该类将按预期设置样式。

但是，如果我将 ID 添加到actionsspan 标记并尝试从链接的样式表中设置样式，则问题会再次出现，并且我的自定义样式均未应用于actions. 我已经尝试删除actions该类的所有样式并仅渲染 a background-colorof red，但即使这样也不会。

是否有一些原因我可能会丢失，允许该组件中的所有其他类通过样式表设置样式，但actions不能？

提前感谢您的任何回复，如果我可以提供更多其他信息，请告诉我。

下面是组件代码：

import React from 'react';

const ListHeaderComponent = (props) => {  
  return (
    <span className='header'>
      <span className='subheader'}>
        <span className='content'>
          Hello
        </span>
      </span>
      <span className='subcontent'>
        This is where the content goes
      </span>
      <span className='actions' id="what">
        This is where the actions go
      </span>
    </span>
  );
};

export default SplitViewListHeader;

我已经彻底浏览了样式表，并且该类仅被引用一次。下面是我在未更新的类中尝试过的代码示例：

.actions {
  background-color: red;
}

标签： htmlreactjscss

解决方案

当指向一个元素 id 时，CSS 脚本非常讲究。它只会指向那个元素，对嵌套序列没有影响。这就是为什么它们只用于指向具有独立功能的非常具体的元素；或者只是使用一个名字。我认为这就是 id 不起作用的原因。

推荐阅读