Нужно больше идей об этом селекторе CSS - PullRequest
Новая
       0

Нужно больше идей об этом селекторе CSS

0 голосов
/ 10 февраля 2012 
<head>   
    <style>
        .thisOne{ background: red;}
        div[class*="thisTwo"] { background: green}
    </style>
</head>
<body>
    <div class="thisOne">
        <p id="hello">Hello World</p>
    </div>
    <div class="thisTwo">
        <p id="hello">Hello World</p>
    </div> 
</body>

Мне интересно, чем отличается этот способ выбора:

  1. .thisOne{ background: red;}
  2. div[class*="thisTwo"] { background: green}

Они выполняют почти одинаковую работу, верно? почему 2-селектор больше, чем впереди?

Ответы [ 2 ]

2 голосов
/ 10 февраля 2012

На самом деле, они не делают то же самое. Селектор атрибута, который функционирует идентично div.thisTwo, равен div[class~="thisTwo"]. Обратите внимание на использование ~ вместо *. Не говоря уже о том, что вашему селектору .thisOne также не хватает div впереди.

div[class*="thisTwo"] выбирает любой div, чей атрибут class содержит строку thisTwo, но не учитывает пробелы, отделяющие эту строку от других классов. Он просто ищет строку в любом месте значения атрибута.

Это означает, что он будет соответствовать следующему элементу, которому div.thisTwo не может соответствовать, потому что он имеет только один класс thisOne-thisTwo, который содержит строку thisTwo, а не два отдельных класса thisOne и thisTwo: 

<div class="thisOne-thisTwo"></div>
1 голос
/ 10 февраля 2012

Нет, не надо.Первый выберет любой элемент с именем класса thisOne.Второй выберет любой div, который в своем классе содержит термин thisTwo.

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

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

...