Мой псевдокласс: не с входным элементом работает неправильно

-1

Я пытаюсь использовать псевдокласс класса CSS3 input, но он не работает. Эти стили применяются к моим входам внутри div .import-holder. Они должны применяться ко всем, кроме входов.Мой псевдокласс: не с входным элементом работает неправильно

.content .import-holder:not(input){ 
 
\t width: 500px; 
 
\t height: 100px; 
 
\t border: 2px solid white; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t text-align: center; 
 
}

<div class="container import-holder"> 
 
    <form method="POST" action=""> 
 
     <fieldset> 
 
     <legend>Import Excel</legend> 
 
     <input name="filename" type="file"> 
 
     <input type="submit" value="Import">     
 
     </fieldset> 
 
    </form> 
 
</div>

источник

2017-01-19 PlayHardGoPro

Ваш селектор применяется к элементам без ввода ** с ** классом '.import-holder', которые являются потомками элементов с классом' .content'. Если вы хотите применять стили ко всем элементам внутри 'div.import-holder', кроме входных элементов, это ваш селектор:' .import-holder *: not (input) '. И btw, 'input' - это селектор элементов, а не псевдокласс. – connexo

@connexo Теперь все внутри получает эти стили, включая последний вход. Я не получаю: у меня есть 2 входа, но только последний получает стили ... Класс psdeu, на который я ссылаюсь, это ': not' – PlayHardGoPro

Покажите свой HTML. Кроме того, неясно, чего вы пытаетесь достичь. – connexo

.content .import-holder:not(input) подберет потомок элементов с content классом, которые не являются input элементами, и имеет import-holder класс.

Похоже, вы хотите, чтобы .content .import-holder *:not(input) (обратите внимание на пробел!), Который ищет элементы, которые не являются входными и дочерними элементами .import-holder элементов.

Вот упрощенный пример того, как работает селектор.

* { 
 
    color: red; 
 
} 
 

 
.import-holder *:not(input) { 
 
    color: blue; 
 
}

<div class="import-holder"> 
 
    <h1>Heading</h1> 
 
    <p>Paragraph</p> 
 
    <input type="text" value="Input" /> 
 
    <h2>Another heading</h2> 
 
    <p>Paragraph with a <span>span</span> in it.</p> 
 
</div>

источник

2017-01-19 13:59:09

Да, это то, что я хочу. Примените стили ко всем элементам внутри 'import-holder', кроме типа' input'. Но с вашим кодом, только последний вход, тоже получает стили. – PlayHardGoPro

Я добавил пример того, как работает селектор. Кажется, он работает так, как вы этого хотите? –

Да, точно. Теперь мне нужно выяснить, почему это не работает со мной. – PlayHardGoPro

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

Bellow код будет работать как ваша потребность.

.content .import-holder input:not([type='text']):not([type='submit']) { 
    width: 500px; 
    height: 100px; 
    border: 2px solid white; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
}

источник

2017-01-19 14:22:03 GiriB

Мой псевдокласс: не с входным элементом работает неправильно

ответ

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