CSS Вход (кнопка) Спецификация границы

Как я понимаю, класс должен иметь приоритет в стилях над стилями элементов. Я пытался стиль button, input[type=button] и input[type=submit] и заметил, что с input (button и submit), то border стиль от элемента будет иметь приоритет над border стилем для класса. Однако я не заметил этого поведения на элементе button.CSS Вход (кнопка) Спецификация границы

Вот an example демонстрирует ситуацию:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Page Title</title> 
    <style> 
     input[type=button], button { 
      border: none; 
     } 

     .class { 
      border: 1px solid red; 
     } 
    </style> 
</head> 
<body> 
    <input type="button" class="class" value="With class" /> 
    <input type="button" value="Without class" /> 
    <button class="class">With class</button> 
</body> 
</html>

выше делает так:

Я заметил то же самое поведение в Safari, Firefox и Chrome.

Я что-то не так? В этом случае я неправильно понял специфику? Является ли это только для border?

источник

2012-01-25 alexcoco

Вы не сравниваете яблоки с яблоками. Селекторы атрибутов имеют специфику 0,1,0, как и классы. Однако селектор элементов имеет специфичность 0,0,1, что делает ваш первый селектор input[type="button"] свойством 0,1,1, которое больше 0,1,0.

http://www.w3.org/TR/CSS2/cascade.html#specificity

Если вы хотите их обоих, чтобы иметь такую же специфичность, вы должны использовать:

input.class 
input[type="button"]

-или-

.class 
[type="button"]

источник

2012-01-25 15:38:00 zzzzBov

Добавить [пример сравнения «яблоки с яблоками»] (возможно, http://jsfiddle.net/JVNZv/5/)? (изменить: добавлен лучший пример) – 0b10011

Спасибо! Я не знал, что селектора атрибутов имеют более высокую специфичность, чем селектор элементов, мой плохой! – alexcoco

Селектор атрибут + селектор элемента есть более высокая специфичность, чем простой селектор классов.

Возможные исправления:

.class, .class[type] { 
    border: 1px solid red; 
}

таким образом, вы можете применить класс «класс» для любого элемента с типом заданного и достичь результатов, которые вы хотели.

источник

2012-01-25 16:07:28 Rodrigo

CSS Вход (кнопка) Спецификация границы

ответ

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