CSS id 选择器不起作用答案

【问题标题】：CSS id selectors just won't workCSS id 选择器不起作用
【发布时间】：2016-01-16 07:50:20
【问题描述】：

在我的 react.JS 项目中，我有一个 div。这个 div 有一个按钮和一个列表。这个列表清楚地标有 id="results"。

return <div>
    <Button label="Combine Cards" disabled={!this.props.combineReady} onClick={this.handleClick} accent primary raised />
	     <br />
	     <ul > 
	        { JSON.parse(this.state.data).resultCards.map(function(card){
	            return <li id="results">{card.deviation} <img src={'https://image.deckbrew.com/mtg/multiverseid/123456.jpg'}/></li>;                     
	        }) }
	    </ul>
	</div>;

我不满意的styles.css文件看起来像这样；

/* The list container. */
ul{
    list-style: none;
    display: inline-block;
    width: 263px;
    text-align: left;
}

/* The individual list items. */
ul li{
    display: block;
    padding: 15px 20px;
    background-color: #F8F8F8;
    color: #7B8585;
    margin-bottom: 3px;
    position: relative;
    
    transition: 0.3s;
}

/* The card images within the list items. */
ul li img{
    /*height: 200px;*/
    transform: scale(0.6, 0.6);
    -ms-transform: scale(0.6, 0.6);
    -webkit-transform: scale(0.6, 0.6);
    align: top;
    padding: 3px;
    transition: 0.3s;
}

/* Those images when hovered over. */
ul li img:hover{
    /*height: 311px*/
    transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
}

ul li a{
    position: absolute;
    left: 160px;
    font-size: 12px;
    line-height: 16px;
    color: #969d9d;
}

/* The individual list items when hovered over. */
ul li:hover{
    background-color:#d8f2f1;
}

li#results{
    display: inline !important; 
    background-color: #7B8585 !important;
    color: #F8F8F8 !important;
    height: 200px !important;
    overflow: visible !important;
}

底部是一个名为 li#results 的样式。我尝试了 ul#results li、#results、ul li#results，但没有什么能让该死的结果列表风格发生变化。我什至告诉它这很重要。我尝试将列表容器标记为<ul 'id=results' /> 并关闭它。那也失败了。以晦涩的 CSS 名义，我做错了什么？

（我还有两个不是结果的列表，所以我也不能只更改列表样式。）

这是生成的 html：

<div data-reactid=".0.0.0.1.0">
  <button class="style__raised___3-PWA style__primary___zmQdT" data-react-toolbox="button" data-reactid=".0.0.0.1.0.0">
    <span data-reactid=".0.0.0.1.0.0.1">Combine Cards</span>
    <span data-react-toolbox="ripple" class="style__wrapper___VXsUA" data-reactid=".0.0.0.1.0.0.2:1">
      <span role="ripple" class="style__normal___K1YSF" style="transform: translate3d(-207.688px, -199.32px, 0px) scale(1); width: 398.25px; height: 398.25px;" data-reactid=".0.0.0.1.0.0.2:1.0"></span>
    </span>
  </button>
  <br data-reactid=".0.0.0.1.0.1">
  <ul data-reactid=".0.0.0.1.0.2" id="results">
    <li data-reactid=".0.0.0.1.0.2.0">
      <span data-reactid=".0.0.0.1.0.2.0.0">0.8743035007251114</span>
      <span data-reactid=".0.0.0.1.0.2.0.1"> </span>
      <img src="https://image.deckbrew.com/mtg/multiverseid/126204.jpg" data-reactid=".0.0.0.1.0.2.0.2">
    </li>
    <li data-reactid=".0.0.0.1.0.2.1">
      <span data-reactid=".0.0.0.1.0.2.1.0">0.8663643850889716</span>
      <span data-reactid=".0.0.0.1.0.2.1.1"></span>
      <img src="https://image.deckbrew.com/mtg/multiverseid/373708.jpg" data-reactid=".0.0.0.1.0.2.1.2">
      ...8 more lines.
    </li>
  </ul>
</div>

那是<ul id="results"/>。使用<li id="results"/>，id 标签只会移动到所有行元素。使用<ul class="results"/> 我什么都看不到，根本看不到 id 或 class。

【问题讨论】：

ID 应该是唯一的，使用类代替。
@Tushar：虽然这一点是正确的，但 CSS 通常会使用 id 设置所有元素的样式，即使使用相同的 id 也是如此。我觉得这里可能还有其他问题。
@IronWaffleMan：您能否获取（从控制台）生成的最终 HTML 并将其包含在内或创建一个演示？如果我用一个虚拟列表（即使所有的 id 相同）尝试你的 CSS，它也可以工作。
添加了包含列表的 div 的 html。
我刚刚根据您的 css 和生成的 html 创建了 a fiddle，将 li#results 更改为 #results li 并应用了样式。还可以在 lis 上设置 id="results" 并使用您发布的 css 工作。所以不确定到底是什么问题......我可以看到background-color 没有应用于整个li，但这是因为display:inline !important;

标签： javascript html css reactjs

【解决方案1】：

我意识到模块中的 id 也变成了唯一的 id，就像类一样你可以用这个

import style from './style.module.css';

<div id={style.Green}>
  Text green
</div>

来自 WebStorm 的 linter 显示“未解析的变量”，但一切正常。

【讨论】：

【解决方案2】：

react-toolbox 使用 CSSModules 进行样式设置，这是 how，您应该使用它们。

/* style.css */
.result {
  color: green;
}

从 JS 模块导入 CSS 模块时，它会导出一个对象，其中包含从本地名称到全局名称的所有映射。

import styles from "./style.css";

...
<li className={styles.result}>{card.deviation}</li>

【讨论】：

【解决方案3】：

你在 css 中的 id #results 指向一个具有该 ID 的 li：

li#results{
  display: inline !important; 
  background-color: #7B8585 !important;
  color: #F8F8F8 !important;
  height: 200px !important;
  overflow: visible !important;
}

您的 id 结果在 ul-tag 上。

<ul data-reactid=".0.0.0.1.0.2" id="results">
    <li data-reactid=".0.0.0.1.0.2.0">
      <span data-reactid=".0.0.0.1.0.2.0.0">0.8743035007251114</span>
      <span data-reactid=".0.0.0.1.0.2.0.1"> </span>
      <img src="https://image.deckbrew.com/mtg/multiverseid/126204.jpg" data-reactid=".0.0.0.1.0.2.0.2">
    </li>
    <li data-reactid=".0.0.0.1.0.2.1">
      <span data-reactid=".0.0.0.1.0.2.1.0">0.8663643850889716</span>
      <span data-reactid=".0.0.0.1.0.2.1.1"></span>
      <img src="https://image.deckbrew.com/mtg/multiverseid/373708.jpg" data-reactid=".0.0.0.1.0.2.1.2">
      ...8 more lines.
    </li>
</ul>

将您的 CSS 选择器更改为 ul#results 应该可以解决问题。

【讨论】：

在我的问题中，我声明我已经在 ul 和 li 组件上尝试了#results 标签和 id。你说的我试过了，还是不行。

【解决方案4】：

根据this issue on the CC Modules GitHub repo，您可以执行以下选项之一：

使用以下语法在 .css 文件中使其全局化：
```
:global(#results){ /* Your css rules here */}
```

但是请注意，这违背了 CSS 模块的本地化概念。

或者在你的 JSX/TSX 文件中使用样式对象返回的 id 创建 CSS 模块，如下：
```
import styles from "./styles.css";

return (<li id={styles.results}></li>)
```

但是请注意，ID 将不再是result，而是一些生成的 id，因此请相应地处理它。

【讨论】：