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：沒有（），選擇並選擇後代

回答

相關問題