包含部分URL和特定類別的匹配鏈接

本頁有一個包含不同鏈接的網頁。我的目標是找到包含以下內容的鏈接：/dir/flowers/並且擁有類別：flower big包含部分URL和特定類別的匹配鏈接

並以不同的方式設置它們的樣式（即，使這些鏈接變爲紅色）。

下面是應匹配的例子鏈接：

<a class="flower big" href="http://example.net/dir/flowers/spring.php">Spring</a> 
<a class="flower big" href="http://example.net/dir/flowers/winter.php">Winter</a>  
<a class="flower big" href="http://example.net/dir/flowers/fall.php">Fall</a>

等

所以如果鏈接包含：/dir/flowers/{*}和具有類："flower big"那麼就應該匹配。

我試圖像下面，但它不工作：

(a[class="flower big"] AND a[href~="/dir/flowers/"]) {color:red}

來源

2016-05-14 Tom

可以使用2 CSS attribute selectors

[class^="flower big"]與^會尋找任何元素與類的屬性名稱，其第一個值以「花大」爲前綴。
[href*="/dir/flowers/"]與*這將尋找任何a與HREF的屬性名稱和值中包含字符串「/ DIR /花」爲子的至少一個發生。

a { 
 
    display: block 
 
} 
 
[class^="flower big"][href*="/dir/flowers/"] { 
 
    color: red; 
 
}

<a class="flower big" href="http://example.net/dir/flowers/spring.php">Will be red because has both classes in order and /dir/flowers/</a> 
 
<a class="flower big" href="http://example.net/dir/flowers/winter.php">Will be red because has both classes in order and /dir/flowers/</a> 
 
<a class="flower big" href="http://example.net/dir/flowers/fall.php">Will be red because has both classes in order and /dir/flowers/</a> 
 
<a class="plant big" href="http://example.net/dir/flowers/spring.php">Won't be red because hasn't classes in order even having the /dir/flowers/</a> 
 
<a class="flower big" href="http://example.net/dir/foobar/fall.php">Won't be red because hasn't the /dir/flowers/ even having the correct classes</a>

UPDATE

萬一你想有更多的類，a內部或改變這些2類的順序那麼你需要在CSS中選擇a的方式不同，像.flower.big或.big.flower就可以做到這一點。

a { 
 
    display: block 
 
} 
 
.big.flower[href*="/dir/flowers/"] { 
 
    color: red; 
 
}

<a class="flower big foobar" href="http://example.net/dir/flowers/spring.php">Will be red because has both classes in link and /dir/flowers/</a> 
 
<a class="big flower" href="http://example.net/dir/flowers/winter.php">Will be red because has both classes in link and /dir/flowers/</a> 
 
<a class="foo bar classes big flower" href="http://example.net/dir/flowers/fall.php">Will be red because has both classes in link and /dir/flowers/</a> 
 
<a class="plant big" href="http://example.net/dir/flowers/spring.php">Won't be red because hasn't classes in link even having the /dir/flowers/</a> 
 
<a class="flower big" href="http://example.net/dir/foobar/fall.php">Won't be red because hasn't the /dir/flowers/ even having the correct classes</a>

來源

2016-05-14 18:07:35 dippas

嘗試這種情況：

.flower.big[href*="dir/flowers"]{ 
 
    color:red; 
 
}

<a class="flower big" href="http://example.net/dir/flowers/spring.php">Spring</a> 
 

 
<a class="flower big" href="http://example.net/dir/flowers/winter.php">Winter</a> 
 

 
<a class="flower big" href="http://example.net/dir/flowers/fall.php">Fall</a> 
 

 
<a class="flower big" href="http://example.net/dir/other/fall.php">other</a> 
 

 
<a class="otherClass otherClass" href="http://example.net/dir/other/fall.php">other too</a>

"*="的意思是「在屬性相匹配（在這種情況下DIR /花）以下值的任何地方值（href在這種情況下）「

來源

2016-05-14 18:11:57

包含部分URL和特定類別的匹配鏈接

回答

相關問題