eşleme bağlantıları

Question

Bu sayfada farklı bağlantıları bulunan bir web sayfası var. Amacım, aşağıdakileri içeren bağlantılar bulmaktır: flower big

ve bunları farklı şekilde biçimlendirin (yani, bu bağlantıları kırmızı renkli yapın).

İşte uymalıdır örnek bağlantılar şunlardır:

<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> 

vb

bir bağlantı içeriyor Yani eğer: /dir/flowers/{*} ve sınıfı vardır: "flower big" o zaman uyumlu olmalıdır.

aşağıda gibi bir şey denedik ama işe yaramıyor:

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

Answer 1

Kimin bir öznitelik sınıfı adına ve herhangi bir eleman arar ^ ile 2 CSS attribute selectors

1. [class^="flower big"] kullanabilirsiniz İlk değer "çiçek büyük" ile önekli. Değeri

2. href özellik adında herhangi a arayacaktır * ile [href*="/dir/flowers/"] ve alt dize olarak "/ dir/çiçekler" dizesi en az bir oluşumunu içermektedir.

---

---

GÜNCELLEME

bir ihtimal o a içinde daha fazla sınıfları veya bu 2 sınıfların düzenini değiştirmek istiyorsanız

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>

o zaman ihtiyacın var CSS'de a'u farklı bir şekilde seçin, .flower.big veya .big.flower gibi bir şey yapacaktır.

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>

Answer 2

bu deneyin:

.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>

"*=" özelliğinde herhangi bir yerinde (bu durumda dir/çiçekler) Aşağıdaki değeriyle aynı" anlamına değer (href bu örnekte) "