CSS id选择器刚刚工作

时间:2016-01-16 07:50:20

标签: javascript html css reactjs

在我的react.JS项目中,我有一个div。这个div有一个按钮和一个列表。此列表标有ID ="结果"。



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>;
&#13;
&#13;
&#13;

styles.css文件我不喜欢摔跤看起来像这样;

&#13;
&#13;
/* 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;
}
&#13;
&#13;
&#13;

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

(我还有两个其他列表没有结果,所以我也不能改变列表样式。)

这是生成的html:

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

<ul id="results"/>的对比。使用<li id="results"/>,id标记只会移动到所有行元素。使用<ul class="results"/>我什么也没看到,根本没有内容或类别。

4 个答案:

答案 0 :(得分:0)

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

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

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

import styles from "./style.css";

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

答案 1 :(得分:0)

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

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

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

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

答案 2 :(得分:-1)

你的id #results在css中指向具有该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应该可以解决问题。

答案 3 :(得分:-1)

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

  1. 使用以下语法在 .css 文件中将其设为全局:

    :global(#results){ /* Your css rules here */}
    

但是请注意,这与 CSS 模块的本地化概念背道而驰。

  1. 或者在您的 JSX/TSX 文件中使用由样式对象创建的 CSS 模块返回的 id,如下所示:

    import styles from "./styles.css";
    
    return (<li id={styles.results}></li>)
    

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