Существует четыре наиболее часто используемых метода выбора:
выбор правила идентификатора, например
цитирование содержимого
button#button{}
#urlBar[type="text"] { }
div > p > span#demo{}
Выбор правила класса, например
цитирование содержимого
button.toolbarButton { }
.fancyText { }
Menuitem > .menu-left[checked="true"] { }
Выбор правила тега, например
цитирование содержимого
td { }
div > p { }
input[ type= "checkbox"] { }
Единые селекторы, такие как
ссылочное содержимое
*
: after
[hidden="true"]
Все они начинают сопоставление с крайнего правого края до конца всего правила с крайнего левого края.
Возникла проблема. Например, самое правое правило уже может определять элемент, который вы хотите выбрать.
Большее сопоставление правил приведет к потере производительности.
Например, div > p > span#demo{}
div > p > span вообще не имеет смысла.
Улучшение:
идентификаторы уникальны. Нет необходимости добавлять лишние правила. Его также можно точно сопоставить.
Цитировать содержимое
button#button{} -> #button{}
#urlBar[type="text"] { } -> #urlBar{}
div > p > span#demo{} -> #demo{}
Следующее не должно появляться Так что его тоже можно оптимизировать.
Цитирование содержимого
button.toolbarButton { } -> .toolbarButton{}
использует слишком много правил. Лучше напрямую присвоить элементу класс.
Например: div > p > span > a{}
может дать особую производительность. Просто напишите класс для a напрямую.
Особые ситуации требуют особого подхода.
Например, иногда нужно убедиться в чистоте структуры страницы. Этот метод используется для удовлетворения потребностей более поздних версий. Это также возможно. Найдите лучшее решение в балансе.
Использовать наследование
#demo .left{text-align:left} ->#demo{text-align:left}
Примечание. В исходной статье используется XUL. Для студентов, не знакомых с XUL, теги могут выглядеть немного странно. странно, но это не сложно понять.