Какова специфика [class $ = ""] и [id * = ""]?

[class$=" "] 
[class*=" "] 
[class^=" "]

Все вышеперечисленные (и эквиваленты ID), похоже, не соответствуют стандартным правилам веса специфичности CSS.

Я сделал Codepen, чтобы показать, насколько они странные и противоречивые. http://codepen.io/mildrenben/pen/myYLmG

Markup

<div id="wrap"> 
    <div class="container"> 
    <p> #idName is more specific than [id*="idName"]. But .className and [class*="className"] seem to be the same specificty.</p> 
    </div> 
</div>

CSS

#wrap { 
    border: solid 5px green; 
} 

[id*="wrap"] { 
    border: solid 5px red; 
} 

.container { 
    background: red; 
} 

[class*="container"] { 
    background: yellow; 
} 

p { 
    font-family: sans-serif; 
    padding: 6px; 
}

Может кто-нибудь, пожалуйста, уточнить вес специфичности эти селекторы держать?

Благодаря

источник

2015-04-10 mildrenben

Калькулятор специфики на http://specificity.keegan.st/, кажется, предлагает, чтобы они были такими же, как и классы, я предполагаю, что они могли бы как * псевдоклассы * – Liam

@Liam - это селектор атрибутов. Класс psuedo - это нечто вроде ': hover'. – Quentin

Спасибо @Quentin, я не был уверен – Liam

#idName более специфичен, чем [id*="idName"]. Но .className и [class*="className"] кажутся одинаковыми.

Да. Вот что такое the spec says they should be.

подсчитать количество ID селекторов в селекторе (= а)

подсчитать число классов селекторов, атрибуты селекторов и псевдо-классов в селекторе (= б)

У вас есть селектор идентификаторов, два селектора атрибутов, селектор классов и селектор типов.

источник

2015-04-10 09:04:31 Quentin

Стоит добавить, что специфика селектора атрибутов всегда одинакова независимо от рассматриваемого атрибута, поскольку Selectors не делает предположений о семантике атрибутов языка документа. Атрибут id просто используется для сопоставления с селектором id в HTML, поэтому '# idName' и' [id = idName] 'будут совпадать с одним и тем же элементом HTML. – BoltClock

вес CSS специфичность состоит из четырех частей, например: 0,0,0,0

ID: 0,1,0,0
класс, атрибут, псевдо-классы: 0, 0,1,0
элемент, псевдо-элементы: 0,0,0,1
"+" или «*» или ">": 0,0,0,0

для пример

example1: #header .container[name="1"] div { } 
example2: #header div div div div div div div p p p h2::before { } 

example1_specificity = id + class + attribute + element = 0,1,2,1 
example2_specificity = id + pseudo-class + element*11 = 0,1,1,11

специфичность будет сравнить четыре части не образует слева направо, пока один больше, чем другие, так example1_specificity больше

когда специфичность равна, одна после другой выиграют
важны! выиграют любую специфичность
0,0,0,0 специфичности победит наследуют

Я надеюсь, что это поможет вам

источник

2015-04-10 09:35:58

Какова специфика [class $ = ""] и [id * = ""]?

ответ

Смежные вопросы