2015-09-08 4 views
0

Я попытался ДИВ [стиль] Проблема заключается в том, это не единственный элемент с встроенных стилейКак переопределить CSS в стиле Inline?

HTML-

<input class="button cool-button" style="float: right !important color:blue" value="Hello" name="hello"> 
<input class="button cool-button" style="float: right !important color:blue" value="World" name="hello"> 
<input class="button cool-button" style="float: right !important color:blue" value="Submit" name="submit"> 

Я нацеливание кнопку отправки

Вот как я попытался перевернуть css на моей внешней табличке стилей ...

input.button .cool-button[style] [value="Submit"] [name="submit"] { 
    float: none !important; 
} 
+4

Вы ориентируетесь на детей, а не на тот же элемент, когда используете пробелы. – Nit

+0

Все, что вам нужно, это 'input.button.cool-button {float: none! Important; } ' – APAD1

+1

Не используйте встроенный стиль, используйте только css для переопределения. –

ответ

1

если ваши входы имеют !important синтаксис внутреннего стиля, чем будет иметь приоритет над любыми CSS/стили к этому элементу, так что вы не сможете float:none.

<input class="button cool-button" style="float: right !important; color:blue" value="Hello" name="hello"> 

Однако, если ваши входы не имеют !important, вы можете сделать следующее

input.button.cool-button { 
 
    float: none !important; 
 
}
<input class="button cool-button" style="float: right ; color:blue" value="Hello" name="hello"> 
 
<input class="button cool-button" style="float: right ; color:blue" value="World" name="hello"> 
 
<input class="button cool-button" style="float: right ; color:blue" value="Submit" name="submit">

и float:none в CSS листе перекроет float: right, который рядный

+0

Я так и думал. В любом случае - синтаксис правильный, как я выбрал несколько классов psuedo? – Mike

+1

@Mike '[value =" "]' и '[name =" "]' селекторы были правильными, но я не думаю, что 'style' существует. также, как было сказано ранее Нитом, вам также нужно избавиться от пробелов в ваших селекторах. пробелы означают дочерние элементы, без пробелов означает один и тот же элемент – indubitablee

+0

@indubitablee: 'style' относится к атрибуту style. Это не отличается от атрибутов value и name. – BoltClock

0

Дополнительное расширение:

input.button.cool-button.right{ 
    float: right; 
} 

И добавьте класс right вместо стиля во входные теги.

Однако используйте clear: right, чтобы отменить плавающие.

1

Это только один процесс шаг, который нужно добавить

Element[style].button.cool-button{ 
float:left !important; 
} 

Для примера на основе в вашем случае

<input class="button cool-button" style="float: right ; color:blue" value="Hello" name="hello"> 

Создать custom.css файл и добавьте следующую строку кода

/*To override inline style sheet for 'Input' Element*/ 

input[style].button.cool-button{ 
float:left !important; 
color:white !important; 
} 

Надеюсь, что это поможет кому-то! Спасибо Cheers Ishwor Khanal

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