Как выбрать элемент в CSS (используя атрибут), который НЕ является потомком другого элемента - PullRequest
Новая
       0

Как выбрать элемент в CSS (используя атрибут), который НЕ является потомком другого элемента

4 голосов
/ 15 декабря 2011

После перечитывания спецификаций селектора CSS2.1 и CSS3 я подозреваю , что это невозможно, но вы никогда не узнаете.

Если я могу выбрать элемент p, то он является потомком другого элемента p, используя селектор наследника CSS, таким образом: 

p p {};

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

p & ( p ! p ) {...};

т.е.. Я хочу выбрать элементы типа p, но НЕ, если они происходят от других элементов типа p.

Кстати: я использую это в querySelector () и querySelectorAll (), где каждый из них выбирается по атрибутам, а не по типу тега, но я хотел показать самый простой из возможных примеров ...

Я попытался это безуспешно (синтаксическая ошибка!) 

p:not(p p) {......}

Ответы [ 3 ]

3 голосов
/ 15 декабря 2011

Вы правильно подозреваете, это невозможно.:not(s) указывает, что s должен быть простым селектором .

Самое близкое, что вы можете сделать, это применить стиль ко всем p и затем переопределить его для p p.

3 голосов
/ 15 декабря 2011 
*:not(h1) p {
  ...
}

Это называется negation pseudo-class, и вы можете найти больше информации об этом здесь .

Кстати, это CSS3, поэтому вы не можете использовать его с версиями IE до 8.

1 голос
/ 15 декабря 2011

Хотя селектор :not(...) является только CSS3, я обычно использую его для совместимости с CSS2: 

p { color: #abc; border: ... ; ... }
h1 > p { color: inherit; border: inherit; ... }

Если у ваших <p> s есть общий предок, то есть ваш HTML выглядит так: 

<body>
    <p> ... </p>
    <p>
        <p> ... </p>
        <p> ... </p>
    </p>
</body>

вы можете использовать селектор "direct-child": 

body > p { ... }

Или, конечно, сброс всех свойств с чем-то вроде: 

p p { color: inherit; background: inherit; ... }

будет работатьтоже ..

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...