Question

我无法得到：没有工作，在css-tricks上阅读它。

我的Html：

 <div class="small-radio-slider" data-slider="slide" data-slider-active="0" data-slider-resetto="left">
   <div class="wrapper">
     <div class="inner" data-slider-container="true">
       <div class="slider-content">
         <div class="li noTextNoHiddenText" data-slide-index="{{@index}}">
           <div class="spotWrapper hiddenText">Not Me</div>
         </div>
         <div class="li noTextNoHiddenText" data-slide-index="{{@index}}">
           <div class="spotWrapper hiddenText">Not Me</div>
         </div>
         <div class="li noTextNoHiddenText" data-slide-index="{{@index}}">
           <div class="spotWrapper hiddenText">Not Me</div>
         </div>
       </div>
     </div>
   </div>
</div>

<div class="spotWrapper hiddenText">Me</div>

我需要它来点击spotWrapper，但不是当它在NotextNoHiddenText里面时。

但是我无法使用

.li:not(.noTextNoHiddenText) .spotWrapper {
    some styling which should only hit spotwrapper without .noText around it.
 }

澄清

SpotWrapper是部分框的一部分，我使用网站上的其他地方。我也有一个滑块，使用这些盒子。

我需要对框进行样式更改，但不要在滑块内部。所以我已将类noTextNoHiddenText添加到滑块内的包装盒中。

＆＃13;

.li:not(.noTextNoHiddenText) .spotWrapper {
    color: red;
 }

＆＃13;

<div class="small-radio-slider" data-slider="slide" data-slider-active="0" data-slider-resetto="left">
       <div class="wrapper">
         <div class="inner" data-slider-container="true">
           <div class="slider-content">
             <div class="li noTextNoHiddenText" data-slide-index="{{@index}}">
               <div class="spotWrapper hiddenText">Not Me</div>
             </div>
             <div class="li noTextNoHiddenText" data-slide-index="{{@index}}">
               <div class="spotWrapper hiddenText">Not Me</div>
             </div>
             <div class="li noTextNoHiddenText" data-slide-index="{{@index}}">
               <div class="spotWrapper hiddenText">Not Me</div>
             </div>
           </div>
         </div>
       </div>
    </div>
    
    <div class="spotWrapper hiddenText">Me</div>

＆＃13;

答案感谢Mohammed Elshennawy实际搞清楚，理解我的意思......

div:not(.noTextNoHiddenText) > .spotWrapper

Answer 1

你的CSS应该是这样的： -

:not(.noTextNoHiddenText) > .spotWrapper {
  background-color: red;
}

示例Here

＆＃13;

.li:not(.noTextNoHiddenText) .spotWrapper {
  background-color: red;
}
:not(.noTextNoHiddenText) > .spotWrapper {
  background-color: red;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="3.2.1" src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div class="small-radio-slider" data-slider="slide" data-slider-active="0" data-slider-resetto="left">
    <div class="wrapper">
      <div class="inner" data-slider-container="true">
        <div class="slider-content">
          <div class="li noTextNoHiddenText" data-slide-index="{{@index}}">
            <div class="spotWrapper hiddenText">Not Me</div>
          </div>
          <div class="li noTextNoHiddenText" data-slide-index="{{@index}}">
            <div class="spotWrapper hiddenText">Not Me</div>
          </div>
          <div class="li noTextNoHiddenText" data-slide-index="{{@index}}">
            <div class="spotWrapper hiddenText">Not Me</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="li">
    <div class="spotWrapper hiddenText">Me</div>
  </div>
  <div class="spotWrapper hiddenText">Me</div>
</body>

</html>

＆＃13;

Answer 2

你可以改变你对它的态度。将一些默认样式应用于class ExampleComponent extends React.Component { constructor(props) { super(props); this.state = { externalData: [] } } static deriveStateFromProps(props, state, prevProps) { if (prevProps === null || props.someValue !== prevProps.someValue) { return { derivedData: computeDerivedState(props) }; } // Return null to indicate no change to state. return null; } }，如果其父元素为spotWrapper，则具有其他样式。

示例Fiddle

- 帮助：）

：没有选择器没有击中孩子

2 个答案: