複雜的CSS選擇器查詢

<div class="day_graph"> 
    <svg class='y_axis'> 
    ..... 
    <text class='y_label'> 
    ...

我離開了關閉標記爲簡單起見。基本上我想在包含'day_graph'的div內選擇'y_axis'的所有svg元素，並且svg元素不應該包含帶有y_label類的文本元素。誰能幫我這個？

編輯：對此感到抱歉。用javascript解決方案也是可以接受的。我無法弄清楚如何。

不，你將需要使用JavaScript爲這個，很遺憾。 –

似乎不可能與最後的約束 – Steve

svg元素是否包含除''之外的任何其他元素？ –

D3的方式做，這將是如下：

d3.selectAll(".day_graph > .y_axis") 
    .filter(function() { return d3.select(this).selectAll("text.y_label").empty(); });

2014-02-26 19:09:33

這是可能的，除了你的最終條件。這不能使用CSS來完成，你需要JavaScript。

嘗試重新構建您的html，以便爲所有svg元素添加另一個類，該元素沒有子類yy_label中的子元素text。

2014-02-26 19:06:11 steinmas

但是，如何使用JavaScript執行此操作？ – user3246461

使用jQuery將是您最好的選擇。你選擇這個問題是：'$（'。day_graph .y_axis'）。not（'：has（.y_label）'）' – steinmas

我能看到的要對此兩種可能的方式：

1）CSS只有 - 如果您<svg>元素，而<text>元素不包含任何其他元素，即：

<div class="day_graph"> 
    <svg class='y_axis'> 
    </svg> 
</div>

然後您可以使用:empty選擇器來定位這些元素。這樣的事情會做的伎倆：

.day_graph .y_axis:empty { 
    //apply style 
}

2）投票 - 如果不是的話，那麼JavaScript中，在這種情況下，jQuery的，因爲我不是太熟悉，D3，必須使用你做這樣的事情：

$('.day_graph .y_axis').not(':has(.y_label)').addClass('whatever');

2014-02-26 19:10:58

不幸的是，CSS沒有父母選擇器。你需要使用JavaScript來做到這一點。這裏是一個jQuery的解決方案（使用has和not僞選擇）：

$('div.day_graph svg.y_axis:not(:has(text.y_label))')

2014-02-26 19:14:32 tewathia

回答