CSS Input (кнопка) Специфика границы - PullRequest
Новая
       2

CSS Input (кнопка) Специфика границы

1 голос
/ 25 января 2012

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

Вот пример , демонстрирующий ситуацию: 

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

Ответы [ 2 ]

7 голосов
/ 25 января 2012

Ты не сравниваешь яблоки с яблоками. Селекторы атрибутов имеют специфику 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"]
1 голос
/ 25 января 2012

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

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

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

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

...