Question

下面是我的代码，我在HTML / CSS中很天真，如果我在这里遗漏了任何东西，请告诉我。

＆＃13;

$db = $stmt->fetchAll();
$XML = simplexml_load_file('file.xml');
$xmlarray = $XML->products->product;

foreach ($xmlarray as $xml) {
    echo $xml['element']; // It works
    echo $db['element']; // Isn't works
    echo $db[0-n]['element']; // It works
}

＆＃13;

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

＆＃13;

问题是给定的css代码适用于<li> <a id="btn-other-1" href="#"> <!–- I do not want apply css for this anchor tag because it has i inside –-> Other stuff-1? </a> </li> <li> <a id="btn-other-2" href="#"> Other stuff-2 </a> </li>内的所有锚标记<a>，但我不想将其应用于锚标记<li>内部<a>标记。

如何在CSS中执行此操作？

Answer 1

css中没有任何方法可以将选择应用于其父级。因此，您必须使用jquery或javascript。

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

希望它会对你有所帮助。

Answer 2

正如kravisingh已经说过的那样，现在CSS中没有父选择器。

在不更改HTML的情况下，您的示例有一个解决方法：您可以对儿童应用填充链接，好消息是 - 在您的示例中 - 您可以轻松区分纯CSS中的子项两种情况。

我使用:only-child来选择没有任何兄弟的span元素（因此之前或之后没有i元素），如下所示。
您还可以在工具箱中使用：

:first-child（如果span匹配则表示之前没有i）
:last-child
+相邻的兄弟（i + a { /* */ } a严格遵循i？）
~一般兄弟i ~ a { /* */ } a跟i之后，可能还有中间的其他元素？）
和:not()（例如：span:not(:only-child)：span元素在其父元素中不是唯一的，可以在其他span或{{1之前或之后或者......）

注意：

此解决方法不适用于所有样式和案例：/
在父级上添加一个类更容易（参见Amit的答案）但是有些情况下你不能修改标记或CSS解决方案比修改生成标记的后端/前端函数更容易（尽管它是更难维护代码恕我直言）

<强> 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 ';
}

Answer 3

如果在第一个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;
}

Answer 4

在这里检查组合器：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;
}

如何否定CSS中的条件

4 个答案: