2012-04-19 73 views
2

可以說我有: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」)。

+0

你能更具體嗎?你是什​​麼意思「不控制代碼」?你能控制什麼? – Jon 2012-04-19 12:10:51

+2

這意味着我正在使用使用gwt的第三方庫,我所尋找的是我可以應用於此特定調用的一種風格。 – Asim 2012-04-19 12:26:33

+0

呃......打電話?什麼呼叫? – Jon 2012-04-19 12:33:04

回答

2

帶班「對」元素不包括那些與類「DS」是元素的直接子:

*:not(.ds) > .para 
+1

目前無法正常工作。其層次結構中的任何其他元素都將與其匹配。它只適用於'>'。 – 2012-04-19 11:54:19

+0

我試過了,它也無法工作 – Asim 2012-04-19 11:55:33

+1

@ChrisMorgan你是對的,只適用於眼前的孩子。 – 2012-04-19 12:00:49

3

spec says你可以有任何簡單選擇:not,其中

一個簡單的選擇器是一個類型選擇器,通用選擇器, 屬性選擇器,類選擇器,ID選擇器或僞c姑娘。

所以是的,你不能有後裔選擇器:not(X Y)。還有一個問題是,當使用後代選擇器時,你只能表達肯定(「當X的祖先包括Y」)而不是否定(「當X的祖先做了而不是包括Y」);

最實際的解決辦法是反向 CSS的邏輯,這樣你想表達的負變爲正:

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

See it in action

+0

請參閱我添加到原始問題的筆記。 – Asim 2012-04-19 12:07:00

0

我想你可能會以錯誤的方式接近它。正常.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; } 

這符合我所看到的解釋格式的自然方式。