Комментарий: HTML5 добавил новый селектор CSS и псевдо-категорию. Эта статья собрала некоторые и дало простое введение в использование. Друзья, которые любят HTML5, могут ссылаться на это. Я надеюсь, что это будет полезно для всех.
Селекторp [name^= my] {font-size: 14px}
Селектор ^= Правила применяются ко всем тегам элементов с атрибутами имени, начиная с моих
p [name $ = my] {font-size: 14px}
Селектор $ = Правила применимы ко всем атрибутам имени, заканчивающиеся моими тегами элемента <p>
p [name*= my] {font-size: 14px}
Селектор $ = правила применяются ко всем атрибутам имени, содержащих элементы <p>, заканчивающиеся моими
Селектор>, +, ~
Селектор> означает, что пораженный элемент является ребенком первого элемента.
Селектор + Этот селектор относится к элементу сразу же после элемента, и эти два элемента должны иметь одинакового родителя.
Селектор ~ похож на +, но затронутый элемент не обязательно следует за первым элементом.
Добавьте имя псевдо-класса и эталонный элемент:
Пример: MyClass: Nth-Child (2)
Второй элемент в элементе MyClass
Ключевое слово нечетно, даже
MyClass: Nth-Child (ODD): влияет на положение индекса своего родительского элемента с нечетным числом
MyClass: Nth-Child (даже): влияет на положение индекса его родительского элемента, даже
<style>
.test: Nth-Child (Odd)
{
Цвет: синий;
}
.test: Nth-Child (даже)
{
Цвет: красный;
}
.test: Nth-Child (2)
{
Цвет: зеленый;
}
</style>
<div>
<p>
1
</p>
<p>
2
</p>
</div>
<p>
1
</p>
<p>
2
</p>
<p>
1
</p>
<p>
2
</p>
Эффекты следующие:
1
2
1
2
1
2
Отрицайте псевдо-классы
: не (p) {color: красный}
Все остальные элементы, кроме элемента <p>