需要这个CSS选择

2012-02-10 62 views 0 likes

<head> 
    <style> 
     .thisOne{ background: red;} 
     div[class*="thisTwo"] { background: green} 
    </style> 
</head> 
<body> 
    <div class="thisOne"> 
     <p id="hello">Hello World</p> 
    </div> 
    <div class="thisTwo"> 
     <p id="hello">Hello World</p> 
    </div> 
</body>

我不知道这是这种方式之间的不同来选择更多的见解：需要这个CSS选择

.thisOne{ background: red;}
div[class*="thisTwo"] { background: green}

他们这样做几乎同样的工作，对吧？为什么2选择器更进一步呢？

来源

2012-02-10 YoniGeek

你是什么意思的“更先进”？ – BoltClock 2012-02-10 13:28:49

回答

其实，他们不会做同样的事情。与div.thisTwo功能相同的属性选择器是div[class~="thisTwo"]。注意使用~而不是*。更何况你的.thisOne选择器也缺少前面的div。

div[class*="thisTwo"]选择任何div其class属性包含字符串thisTwo，但它不考虑从其他类分离这个字符串任何空格。它只是在属性值的任何位置查找字符串。

这意味着它会匹配下面的元素，这div.thisTwo不可能匹配，因为它只有一类thisOne-thisTwo，其中包含字符串thisTwo，而不是两个独立的类thisOne和thisTwo：

<div class="thisOne-thisTwo"></div>

来源

2012-02-10 13:16:57 BoltClock

属性选择器：http://www.w3.org/TR/selectors/#attribute-selectors – BoltClock 2012-02-10 13:34:29

不，不。第一个将选择类名为thisOne的任何元素。第二个将选择其类别包含术语thisTwo的任何div。

来源

2012-02-10 13:16:45 Sotiris

需要这个CSS选择

回答

相关问题