как я могу составить CSS селекторы вместе - PullRequest
Новая
       0

как я могу составить CSS селекторы вместе

1 голос
/ 02 марта 2012

возможно ли использовать селектор: not () с селектором: nth-of-type (1)?

т.е. Я хочу выбрать первый

, который не имеет заголовка "что-то" 

<html>
    <head>
        <style type="text/css">
            p
            {
                color:#000000;
            }
            p:not([title=something]):nth-of-type(1)
            {
                color:#ff0000;
            }
        </style>
    </head>
    <body>

        <h1>This is a heading</h1>

        <p title="something">This is a paragraph.</p>
        <p>This is another paragraph.</p>
        <p>This is another paragraph.</p>

        <div>This is some text in a div element.</div>


    </body>
</html>

Ответы [ 3 ]

3 голосов
/ 02 марта 2012

nth-of-type действует на исходный селектор (p), он не влияет на результат p:not([title=something]). 

p:not([title=something]):nth-of-type(1)

Это означает, что найдите <p> беззаголовок "someting", который также 1-й <p> на странице.Это не находит никаких элементов, так как 1-й <p> имеет заголовок "что-то".

То, что вы хотите, это 1-й <p>, который не содержит заголовка "что-то".Я не знаю, есть ли у CSS хороший способ сделать это.

Если вы хотите использовать jQuery, вы можете сделать это: 

$('p:not([title="something"]):eq(0)')

или: 

$('p').not('[title="something"]').eq(0)
3 голосов
/ 02 марта 2012

Проблема в том, что псевдокласс nth-of-type определен как:

[nth-of-type] сопоставляет элементы на основе их позиций в списке дочерних элементов родительского элемента..

Таким образом, псевдокласс :nth-of-type(1) ограничивает ваш выбор p потомком в позиции 1.

Ваш псевдокласс not([title=something]) ограничивает вашВыделение элементов p без атрибута / значения title='something', как вы и подозреваете.

Два селектора вместе не дают элементов, поскольку у дочернего элемента p в позиции 1 есть title='something'.

Для лучшего понимания попробуйте следующее: 

p:nth-of-type(1) { color: red; }
p:not([title=something]) { text-decoration:underline; }

Дополнительная информация: Псевдоклассы , nth-of-type

2 голосов
/ 04 апреля 2012

Как упоминалось в других ответах, :nth-of-type() относится только к типу элемента, который в данном случае равен p.Селектор p:not([type=something]):nth-of-type(1) просто означает p элемент, который является :not([type=something]) и также является первым p.

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

p:not([title=something]) ~ p:not([title=something])
{
    color:#000000;
}
p:not([title=something])
{
    color:#ff0000;
}

Если вы просто хотите применить это к элементам p без атрибута title, вы можете сократить селекторы aнемного: 

p:not([title]) ~ p:not([title])
{
    color:#000000;
}
p:not([title])
{
    color:#ff0000;
}

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

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

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

...