CSS id 选择器根本不起作用

CSS id selectors just won't work

本文关键字：不起作用选择器 id CSS 更新时间：2023-09-26

在我的反应.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>;

我摔跤的样式.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或类。

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

import style from './style.module.css';
<div id={style.Green}>
  Text green
</div>

来自WebStorm的linter说"未解析的变量"，但一切正常。

react-toolbox 使用 CSSModules 进行样式设置，这就是你应该如何使用它们的方式。

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

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

import styles from "./style.css";
...
<li className={styles.result}>{card.deviation}</li>

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 标签上。

<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应该可以解决问题。

根据 CC 模块 GitHub 存储库上的此问题，您可以执行以下选项之一：

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

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

或者在 JSX/TSX 文件中使用样式对象创建的 CSS 模块返回的 id，如下所示：
```
import styles from "./styles.css";
return (<li id={styles.results}></li>)
```

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