如何否定CSS中的条件

没有办法进去 css 将选择应用于其父对象。所以你必须使用 jquery 或 javascript 为了这个。

$('.dropdown-menu a i').parent().css('padding','0');

正如kravisingh所说,目前CSS中没有父选择器。

在不更改HTML的情况下,您的示例有一个变通方法:您可以 将填充应用于子对象 好消息是,在你的例子中,你可以很容易地在纯CSS中区分这两种情况下的孩子。

我用过 :only-child 选择没有任何同级元素的跨度元素(因此前后没有i元素),如下所示。

• :first-child (如果 span 匹配则意味着没有 i 在它之前)
• :last-child
• + 相邻的兄弟姐妹( i + a { /* */ } 是 a 一、 ?)
• ~ 一般同胞( i ~ a { /* */ } 一 ,可能中间有其他元素?)
• 和 :not() span:not(:only-child) : 在其父元素中并不单独存在的元素,可以在前面或后面加上其他元素 或 或)

• 此解决方案不适用于所有样式和案例:/
• 在父级上添加类更容易(请参见Amit的回答),但在某些情况下,您无法修改标记,或者CSS解决方案比修改生成标记的后端/前端函数更容易(尽管这样很难维护代码IMHO)

Codepen

/* CSS from question (example #1) */
.on-link > li > a {
  display: inline-block;
  padding: 3px 5px;
  background-color: lightgreen;
}

/* Example #2 */

/* Applies to i+span */
.on-children i {
  /*padding: 3px 0 3px 5px;*/
  background-color: lightblue;
}

.on-children i + span {
  /*padding: 3px 5px 3px 0;*/
  background-color: pink;
}

/* Applies to any span without an icon  (after or before)
Note: :first-child would allow for an icon at the end of the link */
.on-children span:only-child {
  padding: 3px 5px;
  background-color: tomato;
}

/* Demo */
.on-children i:before {
  content: 'i ';
}

<h1>Styles link (original styles from OP)</h1> 
<ul class="on-link">
  <li>
      <a id="btn-other-1" href="#">            <!–- I do not want apply css for this anchor tag because it has i inside –->
          <i class="fa fa-check" aria-hidden="true">
          </i><span>Other stuff-1? </span>
      </a>
  </li>
  <li>
      <a id="btn-other-2" href="#">
          <span>Other stuff-2</span>
      </a>
  </li>
</ul>

<hr>

<h1>Styles children of link (my answer)</h1>
<ul class="on-children">
  <li>
      <a id="btn-other-1" href="#">            <!–- I do not want apply css for this anchor tag because it has i inside –->
          <i class="fa fa-check" aria-hidden="true"></i><span>Other stuff-1?</span>
      </a>
  </li>
  <li>
      <a id="btn-other-2" href="#">
          <span>Other stuff-2</span>
      </a>
  </li>
</ul>

在此处检查组合符: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors ,但我认为不会有直接的组合器可用。

最简单的选择是为带有i标记的锚点分配一个虚拟类名,并为不带i标记的锚点分配一个不同的类名。

<li>
    <a id="btn-other-1" href="#" class="itag">            <!–- I do not want apply css for this anchor tag because it has i inside –->
        <i class="fa fa-check" aria-hidden="true"></i>   
        <span> Other stuff-1? </span>
    </a>
</li>
<li>
    <a id="btn-other-2" href="#" class="noitag">
        <span> Other stuff-2 </span>
    </a>
</li>

.dropdown-menu > li > a.noitag {
  padding: 3px 5px;
}

li 比你能用的还多 :first-child 选择器

.dropdown-menu > li:first-child > a {
  padding: 0;
}

或者你可以使用 id class 名称 a

<li>
    <a id="btn-other-1" href="#" class="icon">            <!–- I do not want apply css for this anchor tag because it has i inside –->
        <i class="fa fa-check" aria-hidden="true"></i>   
        <span> Other stuff-1? </span>
    </a>
</li>
<li>
    <a id="btn-other-2" href="#">
        <span> Other stuff-2 </span>
    </a>
</li>

.dropdown-menu > li > a:not(.icon) {
      padding: 3px 5px;
}