Question

在CSS中，您是否可以定位一个元素，然后根据DOM上方的父包装元素排除它的实例？

例如：

HTML

<div class="wrap">
    <ul>
         <li>link</li>
         <li>link</li>
         <li>link</li>
    </ul>
</div>
<ul>
     <li>link</li>
     <li>link</li>
     <li>link</li>
</ul>

CSS

li {
    color:red;
}
li:not(.wrap li) {
    colour:blue;
}

所以在这个例子中，我想根据父包装器排除第一系列<li>标签。这可以通过CSS实现吗？（我并不仅仅意味着定位.wrap li并在那里应用所需的样式，因为在我的情况下我必须排除）

Answer 1

在CSS中，您是否可以定位一个元素，然后根据DOM上方的父包装元素排除它的实例？

不，不是你想要的方式：

<html>
<head>
 <!-- include bootstrap, jquery for easy div manipulation -->
 <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
 <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
 <script src="node_modules/socket.io-client/dist/socket.io.min.js"></script>
 <script src="/socket.io/socket.io.js"></script>
 </head>
 <body>
 <h1>SmartWater</h1>
 <th>Flow (liters)</th>
 <script>

 var socket = io.connect('http://192.168.7.2:8090/');  //enter the IP of your beaglebone and port you are using in app.js

 socket.on('water', function(data) {
 //$('#').html(data.full_data);
    $('#water').html(data.fulldata);
    console.log(data.fulldata);
 });

</script>
<div id="water"></div>
</body>
</html>

但是，您可以使用更简单的方法来设置所有li:not(.wrap li)元素的样式，然后使用<li>类名称专门设置那些作为祖先后代的元素：

wrap

＆＃13;

li {
    /* generic styles for <li> elements */
}
.wrap li {
    /* specific styles for <li> elements that are
       descendants of elements with a class of '.wrap' */
}

＆＃13;

li {
  color: blue;
}
.wrap li {
  color: red;  
}

＆＃13;

请注意，以下内容已从答案的上一部分中移除，因为它的脆弱性 - 必须在选择器中逃脱期间，以及它被意外覆盖的事实具有<div class="wrap"> <ul> <li>link</li> <li>link</li> <li>link</li> </ul> </div> <ul> <li>link</li> <li>link</li> <li>link</li> </ul>类名的祖先：

'wrap'

＆＃13;

:not(\.wrap) li

＆＃13;

li {
  color: red;
}
div:not(\.wrap) li {
  color: blue;  
}

＆＃13;

：not（）伪类是否支持父元素？

1 个答案: