CSS「：聚焦」僞類和選擇

我一直纏鬥到得到這個權利...基本上，我有以下HTML設置：CSS「：聚焦」僞類和選擇

<div class="box10"> 
    <span class="label01">Name:</span> 
    <input class="tboxes" type="textbox" /> 
</div>

「span.label01」是一個內聯元素，並出現在文本框「input.tboxes」的左側。當文本框收到焦點時，我正在嘗試將某些樣式附加到「span.label01」和「div.box10」。

我曾嘗試以下CSS代碼：

input.tboxes:focus span.label01 { 
    color:#FF9900; 
    ... 
}

但沒有任何反應。我知道這是一個CSS選擇器問題，但我似乎無法做到。我甚至嘗試過鄰近的兄弟選擇器，沒有任何東西。有人能幫我一下嗎？ TIA！

來源

2009-04-28 Shalan

旁註：不應該使用標籤嗎？（http://www.htmldog.com/reference/htmltags/label/） – Svish 2009-04-28 11:01:18

您的選擇器目前正在尋找輸入內的跨度。據我所知，你正在嘗試做的事情並不是真正可靠的CSS選擇器支持的當前狀態。

我會忍不住有幾分的jQuery像這樣做：

$("input.tboxes").focus(function() { 
    $(this) 
    .parent("div:first") 
     .addClass("focussed") 
     .find("span") 
      .addClass("focussed"); 
});

這應該做你想要做什麼，如果你再設置爲造型和.label01.focussed .box10 .focussed。

來源

2009-04-28 11:04:03 jonsidnell

順便說一下，最後一段中提到的選擇器並不是一個錯誤 - 通過加入類似的類（兩者之間沒有空格），它們基本上是在說「具有類別label01和集中的元素」或「具有類別box10和集中的元素」。 – jonsidnell 2009-04-28 11:06:13

嗨！和thanx快速回復！你是對的，我知道JavaScript肯定會做到這一點，儘管我希望只用CSS技巧。 thanx幫助雖然 – Shalan 2009-04-28 11:33:26

不 - 你不能用CSS選擇器做到這一點。從Wikipedia報價：

選擇器是無法提升

CSS提供沒有辦法選擇滿足某些標準父母或元素的祖先。更高級的選擇器方案（如XPath）將啓用更復雜的樣式表。然而，CSS工作組拒絕父級選擇器提案的主要原因與瀏覽器性能和增量渲染問題有關。

你可以，但是，與一些簡單的JavaScript做到這一點：

// with jQuery: 
$('input.tboxes').focus(function() { 
    $(this).parent().find('span.label01').addClass('active'); 
});

來源

2009-04-28 11:08:17 moff

這通過使用同胞選擇的是完全可能的。

input.tboxes:focus + span.label01 { 
    color:#FF9900; 
    ... 
}

只要輸入焦點集中，此規則將應用於label01。

但是，這隻適用於跨度位於輸入的右側，因此您必須切換元素的位置。在div上的快速「位置：相對」和跨度上的「float：left」會將它們移回原位。

來源

2010-08-19 13:33:18 peroo

CSS「：聚焦」僞類和選擇

回答

相關問題