2012-01-21 18 views
6

Nasıl bir nitelik seçici ([title]) ile bir sözde eleman seçicisini (:after) birleştirebilirsiniz? CSS Attribute ve Pseudo-Element Selector'ları birleştirin mi?

Ben div[title]:after kullanarak çalıştı, ancak bu Chrome'da çalışmaz.

HTML:

<div title="foo">This div has a title.</div> 
<div>This div does not have a title.</div> 

CSS:

div:after { 
    content: "NO"; 
} 
div[title]:after { 
    content: "YES"; 
} 

Demo: http://jsfiddle.net/jmAX6/

Bana "EVET" bu div'lerden her birinin sonunda gösterir, bu HAYIR" göstermesi gerekir "ikinci divtan sonra.

Chrome 17.0.963.38 çalıştırıyorum. Safari 5.1.2'de iyi çalışıyor gibi görünüyor.

cevap

9

Bu nihayet reported olmuştur bir hata gibi görünüyor. Eğer en az bir bildiri ile stil yerde div[title] için CSS kuralını eklerseniz, div[title]:after kural sihirli uygulanacaktır. Örneğin:

div:after { 
    content: "NO"; 
} 
div[title] { 
    display: block; 
} 
div[title]:after { 
    content: "YES"; 
} 

the updated fiddle bakınız.

Ayrıca aşağıdaki yorum gösterildiği gibi ikinci div, belirli bir HTML niteliklerini haiz olan veya olmayan bir ilgisi var gibi görünüyor. http://jsfiddle.net/jmAX6/6/ sihirli o iş yapar başlıksız div için bir sınıf ekleme:

+1

Evet bu bir kontrol, bir böcek gibi görünüyor. –

+1

@Madmartigan: Ben de başka birkaç ilgili hata buluyorum. Şimdi bir rapor doldurmak sadece bir angarya gibi görünüyor. Hatırlarsam daha sonra yaparım. – BoltClock

+2

Ayrıca, kullanılan özniteliğe de bağlı gibi görünüyor, bu yüzden kesinlikle bir hata olması gerekiyor: http://jsfiddle.net/jmAX6/7/ Ayrıca, sekmeyle işaretlediğinizde, tabindex'i işaretleyin. eleman kendini düzeltir. –

İlgili konular