Не селекторы CSS

Есть ли некоторый "не" селектор CSS?

Например, когда я пишу следующую строку в своем CSS, все поля ввода в теге с именем класса класса будут иметь красный фон.

.classname input {
  background: red;
}

Как я выбираю все поля ввода, которые являются ЗА ПРЕДЕЛАМИ тега с именем класса класса?

69
задан saulotoledo 27 July 2019 в 22:25
поделиться

6 ответов


С текущим браузером поддержка CSS Вы не можете.

Более новые браузеры теперь поддерживают, это - видит ответ Sam для большего количества информации.

(См. другие ответы для альтернатив в CSS.)


Если выполнение его в JavaScript/jQuery приемлемо, можно сделать:

$j(':not(.classname)>input').css({background:'red'});
51
ответ дан Community 24 November 2019 в 13:45
поделиться

Разве Вы не сделали бы этого путем установки 'глобальных' предпосылок к красному, затем использования имени класса для изменения других?

input { background: red; }
.classname input { background: white; }
24
ответ дан Harper Shelby 24 November 2019 в 13:45
поделиться

Я сделал бы это

input { /* styles outside of .classname */ }
.classname input { /* styles inside of .classname, overriding above */ }
10
ответ дан Daniel A. White 24 November 2019 в 13:45
поделиться

Нет никакого способа выбрать родителя подобранных элементов с CSS. Необходимо было бы использовать JavaScript для выбора их.

От Вашего вопроса я предполагаю, что у Вас есть разметка, которая более или менее походит на это:

<form class="formclassname">
    <div class="classname">
        <input />  <!-- Your rule matches this -->
        <input />  <!-- Your rule matches this -->
    </div>
    <input />  <!-- You want to select this? -->
    <input />  <!-- You want to select this? -->
</form>

Одна опция состоит в том, чтобы добавить класс к более высокому элементу, сказать <form>, и запишите правило разработать все исходные данные формы. Т.Е.:

.formclassname input {
  /* Some properties here... */
}

Или

.formclassname > input {
  /* Some properties here... */
}

Если Вы хотите выбрать их на основе того, что они не в элементе с определенным классом, Вам не повезло без использования JavaScript.

1
ответ дан Zack The Human 24 November 2019 в 13:45
поделиться

Я думаю самое близкое, которое можно получить, должен только влиять на прямых потомков с объявлением

Этот код, например, будет только влиять на поля ввода непосредственно под отделениями с классом "maincontent"

div.maincontent > input {
  // do something
}
0
ответ дан Dan Roberts 24 November 2019 в 13:45
поделиться

Исходные данные являются немного раздражающими потому что, в отличие от большинства других элементов HTML, существует не обязательно способ сбросить все свойства CSS назад к их значению по умолчанию.

Если бы моделирование является некритическим (т.е. хорошее, чтобы иметь, но не влияет на функциональность), я использовал бы jQuery, чтобы получить массив всех исходных данных, проверить их родителей и затем только выполнить моделирование на тех, которые вне того отделения. Что-то как:

$('input').each(function() {
     if($(this).closest('.classname') == false)
     {
           // apply css styles
     }
});

(Между прочим, я не эксперт jQuery, таким образом, могли бы быть некоторые ошибки в вышеупомянутом, но в принципе что-то вроде этого должно работать),

0
ответ дан wheresrhys 24 November 2019 в 13:45
поделиться
Другие вопросы по тегам:

Похожие вопросы: