Выбор господства в CSS - PullRequest
Новая
       26

Выбор господства в CSS

0 голосов
/ 31 января 2012

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

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

<label>
    <input type='checkbox' id='test_id' name='test_name' value='test_value'/>
    Test
</label>

Как только я начал работать над стилем, я подумал, что было бы здорово иметь возможность стилизовать этот ярлык на основе псевдоселектора 

#test_check_id:checked PARENT_ELEMENT

, где PARENT_ELEMENT будет следующим восходящим элементом рассматриваемого входа.

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

Я понимаю, что " может " сделать это с помощью javascript и css, и на самом деле это вроде как единственный способ представить это в моей голове прямо сейчас после небольшого поиска ответа, но я просто подумал, может ли кто-нибудь пролить больше света на эту тему для меня. Не стесняйтесь LMGTFY, если я пропустил что-то явно очевидное.

Ура!

Ответы [ 2 ]

2 голосов
/ 31 января 2012

Если вы обернули текст в тег, например: 

<label>
    <input type='checkbox' id='test_id' name='test_name' value='test_value'/>
    <span>Test</span>
</label>

Вы можете оформить его, используя селектор брата: 

input:checked + span {
    color: red;
}
1 голос
/ 31 января 2012

Вы не можете, если вы не используете что-то вроде less или sass.CSS допускает только потомки селекторов из-за его обратной архитектуры.

Поэтому, когда вы пишете "li a", браузер выведет все элементы "a" на всей странице, а затем выберет и предоставит вам те, которые являются потомками элемента "li".

Именно поэтому большинство людей проводят занятия и идентификаторы почти для каждого элемента на странице.Потому что, теоретически, будет гораздо быстрее захватить 5 элементов с классом, чем захватить все 40 делений на странице.Но я действительно понятия не имею, насколько значительным является это повышение.

Полагаю, самым простым решением для этого было бы переключение классов родителей на основе ввода с использованием JS.

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

<div>
   <div></div>
   <div></div>
   <div></div>
</div>

Если бы я хотел выбрать асцендент третьего дива, он не смог бы различить, какой див является его асцендентом.Таким образом, для этого вам нужно отследить, какой Nth дочерний элемент является текущим элементом.Теперь представьте, что вы делаете это для каждого элемента с дочерним элементом на странице.Это сильно повредит производительности.

...