CSS：没有（），选择并选择后代

可以说我有：CSS：没有（），选择并选择后代

  <html xmlns="http://www.w3.org/1999/xhtml"> 
       <head> 
        <title>Test for :not</title> 
        <link rel="stylesheet" type="text/css" href="Test.css" /> 
       </head> 
       <body> 
        <div class="a"> 
         <p class="para">This line should be green.</p> 
        </div> 
        <div class="a"> 
         <p class="para">This line should also be green.</p> 
         <div class="ds"> 
          <p class="para">This is another line that should be yellow</p> 
         </div> 
        </div> 
       </body> 
      </html>

我想要做的是选择所有带class =“对”的元素，但不包括那些有这些元素的后代有一个class =“ds”。我有这样的CSS：

  .ds { color: grey; border-style:solid; border-width:5px;} 

      .para {color:yellow;} 

      .para:not(.ds .para) {color:green; border-style:solid; border-width:5px;} //not working

所以我想我只能有简单的选择是部分：不是（S），我不能有：没有（X×Y）。我使用铬（18.0.1025.162米）和firefox（10）。有任何想法吗？

注意：请不查询是一个更大的问题的一部分，我有一些代码（GWT）是选择元素的列表（例如带class =“段”）从DOM。然而，我发现一个错误，需要排除特定元素集的后代元素（例如class =“ds”）。

来源

2012-04-19 Asim

你能更具体吗？你是什么意思“不控制代码”？你能控制什么？ – Jon 2012-04-19 12:10:51

这意味着我正在使用使用gwt的第三方库，我所寻找的是我可以应用于此特定调用的一种风格。 – Asim 2012-04-19 12:26:33

呃......打电话？什么呼叫？ – Jon 2012-04-19 12:33:04

带班“对”元素不包括那些与类“DS”是元素的直接子：

*:not(.ds) > .para

来源

2012-04-19 11:51:56

目前无法正常工作。其层次结构中的任何其他元素都将与其匹配。它只适用于'>'。 – 2012-04-19 11:54:19

我试过了，它也无法工作 – Asim 2012-04-19 11:55:33

@ChrisMorgan你是对的，只适用于眼前的孩子。 – 2012-04-19 12:00:49

的spec says你可以有任何简单选择内:not，其中

一个简单的选择器是一个类型选择器，通用选择器，属性选择器，类选择器，ID选择器或伪c姑娘。

所以是的，你不能有后裔选择器:not(X Y)。还有一个问题是，当使用后代选择器时，你只能表达肯定（“当X的祖先包括Y”）而不是否定（“当X的祖先做了而不是包括Y”）;

最实际的解决办法是反向 CSS的逻辑，这样你想表达的负变为正：

.ds .para { background:gold; } 
.para { background: green }

See it in action。

来源

2012-04-19 11:53:04 Jon

请参阅我添加到原始问题的笔记。 – Asim 2012-04-19 12:07:00

我想你可能会以错误的方式接近它。正常.para匹配为绿色，而.ds中的则为黄色。可以肯定的是，用你拥有它的方式，你将需要再次移除边界，但这不是问题。

.ds { color: grey; border-style:solid; border-width:5px;} 

.para {color:green; border-style:solid; border-width:5px;} 

.ds .para {color:yellow; border-style: none; }

这符合我所看到的解释格式的自然方式。

来源

2012-04-19 11:55:14

CSS：没有（），选择并选择后代

回答

相关问题