我們可以寫在CSS文件

我們能否通過寫選擇元素的唯一名稱選擇唯一的名字我們可以寫在CSS文件

例如，

<div name= "outer-name"> 
    <img name="inner-image" src="images/ine.jpg" alt"" /> 
</div>

我想帶內法師的風格，比如CSS文件[外名] [內圖像]

在CSS文件

[outer-name] [inner-image] { 
    /*styles*/ 
}

我不能把選擇爲[外名稱] IMG等ç..只有名字

來源

2011-12-18 Justin John

您可以使用屬性選擇器選擇：

[name="outer-name"] [name="inner-image"]

但是請記住，name不是<div>或<img>有效的屬性，即使上述選擇將工作。這是最好的，你要麼改變他們上課，或者如果你正在使用HTML5的data-前綴添加到他們，所以它看起來像這樣：

<div data-name= "outer-name"> 
    <img data-name="inner-image" src="images/ine.jpg" alt"" /> 
</div>

然後用這個選擇：

[data-name="outer-name"] [data-name="inner-image"]

來源

2011-12-18 16:12:35 BoltClock

下面是一個例子：http://jsfiddle.net/sde6t/ – FakeRainBrigand 2011-12-18 16:14:43

有什麼你不知道關於CSS的時鐘？ ;） – stephenmurdoch 2011-12-18 16:20:37

@stephenmurdoch：BoltClock知道如何實現CSS6父母選擇器符號，但沒有告訴我們，因爲沒有瀏覽器能跟上他。 – 2011-12-18 16:25:13

考慮下面的HTML：

<div data-name="something"> 
    <p>Content in 'something'</p> 
    <span data-someAttribute="someAttribute">Content in 'someAttribute' div.</span> 
</div>

而CSS：

[data-name] { 
    background-color: red; 
} 

[data-name] [data-someAttribute] { 
    display: block; 
    background-color: #ffa; 
}

這是完全有效的（或者，至少，它是在Chromium 14/Ubuntu 11.04中實現的）。我已更改使用name屬性（因爲它們對div元素或其他非form元素無效），並且使用了前綴自定義屬性，它們在HTML5中有效，並且可能不是「有效」的HTML 4，他們似乎仍然被這些瀏覽器所理解。

JS Fiddle demo。

值得一提的是，你還可以使用屬性=等於符號，根據他們data-*屬性的值只選擇某些元素：

<div data-name="something"> 
    <p>Content in data-name='something' element.</p> 
    <span data-someAttribute="someAttribute">Content in 'someAttribute' div.</span> 
</div>

而CSS：

[data-name] { 
    background-color: red; 
} 

[data-name="something"] { 
    font-weight: bold; 
} 

[data-name] [data-someAttribute] { 
    background-color: #ffa; 
    text-decoration: underline; 
    font-weight: normal; 
}

JS Fiddle demo 。

而且，如果CSS3是一個選擇，它可以使用屬性 - 開始 - 與（^=）表示法：

[data-name] { 
    background-color: red; 
} 

[data-name^="s"] { 
    font-weight: bold; 
} 

[data-name] [data-someAttribute] { 
    background-color: #ffa; 
    text-decoration: underline; 
    font-weight: normal; 
}

JS Fiddle demo。

和屬性端-與（$=）表示法：

[data-name] { 
    background-color: red; 
} 

[data-name$="ing"] { 
    font-weight: bold; 
} 

[data-name] [data-someAttribute] { 
    background-color: #ffa; 
    text-decoration: underline; 
    font-weight: normal; 
}

參考文獻：

來源

2011-12-18 16:18:42

+1。如果你在示例中添加'[data-name =「something」]'，我可以刪除我的答案。 – FakeRainBrigand 2011-12-18 16:55:03

由於@Bolt說，name在那裏是無效的（但它仍然適用於我的瀏覽器）。您可以使用HTML5 data-屬性。這裏是a fiddle顯示它是如何完成的。

這裏真正的解決方案是使用類，但我認爲你有一個不使用它們的理由。

來源

2011-12-18 16:19:24 FakeRainBrigand

瀏覽器非常寬鬆，CSS規範不強制執行與HTML相同的屬性限制，這可以解釋爲什麼它能夠工作:) – BoltClock 2011-12-18 16:20:50

我們可以寫在CSS文件

回答

相關問題