Предположим, в CSS 3 вы создаете HTML-файл, содержащий следующую структуру тегов:
<div id="nav-primary"></div>
<div id="content-primary"></div>
<div id="content-вторичный"></div>
<div id="tertiary-content"></div>
<div id="nav-вторичный"></div>
Затем в файле CSS
div[id^="nav"] {background:#ff0 }
Обратите внимание на " ^ "
В этом случае CSS будет управлять [u]div#nav-primary и div#nav-вторичным[/u]. Обратите внимание, что этим двум меткам предшествует nav , неясно, отделен ли он знаком "-" или идентификатор совпадает спереди назад [пот]
div[id$="primary"] {background:#ff0 }
Обратите внимание, что это " $ "
В этом случае CSS будет управлять [u]div#nav-primary и div#content-primary[/u]. Обратите внимание, что после этих двух тегов стоит primar . Неясно, используется ли «-» в качестве разделения или идентификатор сопоставляется сзади вперед [пот].
div[id*="content"] {background:#ff0 }
Обратите внимание, что это " * "
CSS в этом случае будет управлять [u]div#content-primary div#content-вторичный и div#tertiary-content[/u]. Обратите внимание, что все эти теги содержат контент . Неясно, разделены ли они знаком «-» или идентификатор автоматически сканируется и сопоставляется [пот].
Кажется, автор сказал, что эти теги теперь поддерживаются последними версиями различных браузеров, кроме IE. Можете попробовать, но я пробовать не буду~ [lol]
div#content-primary:target {контур: 1px Solid #300 };
Обратите внимание, что « :target »
В этом случае CSS будет управлять ссылкой привязки http://www.example.com/index.html #content-primary (ссылку привязки можно понимать как ссылку внутри веб-страницы по сравнению с возвратом , наблюдаемым на некоторых веб-сайтах). страницы) вверху )
Автор говорит, что браузеры Mozilla и Safari теперь поддерживают это.
input[type="text"]:enabled {background:#ffc }
input[type="text"]:disabled {background:#ddd;
Обратите внимание, что " [type="text"]:enabled "
Это CSS, который управляет формой. Похоже, что «[u][type="text"][/u]» означает, что тип формы — текст. . . Каким будет [u]type="password"[/u]?
ввод: проверено { граница: 1 пиксель сплошной # 090 };
Обратите внимание, что " :checked "
Это CSS, который управляет «выбором» формы. . .
Автор говорит, что браузеры Opera и Mozilla теперь поддерживают эти
:root { фон:#ff0 }
html {фон:#ff0;
Пожалуйста, обратите внимание на этот " :root "
Этот «:root» является тегом более высокого уровня, чем html. Вы можете прочитать эту статью, написанную Чидори Ичибой, чтобы правильно понять html и тело. В статье он обнаружил, что за пределами html есть рамка, хе-хе~.
Автор говорит, что браузеры Mozilla и Safari теперь поддерживают это.
Следующий : nth-child() более интересен, хаха~ В скобках можно помещать цифры и буквы по умолчанию~
p:nth-child(3) {color:#f00 }
Похоже, это означает, что на основе первого появившегося P все P, кратные «3», будут контролироваться ~
p: nth-child (нечетный) { цвет: # f00 }
Похоже, это означает, что на основе первого появившегося P будут контролироваться все нечетные числа P~
p:nth-child(even) {color:#f00 };
Похоже, это означает, что на основе первого появившегося P будут контролироваться все P в четных числах ~
p:nth-child(3n+0) { color:#f00 }
р: nth-child (3n) { цвет: # f00 }
Эти два тега эквивалентны, потому что 0 после первого не имеет никакого эффекта. Это означает, что P, которое в 3 раза превышает первое появившееся P, будет контролироваться ~ (Какой поворот, HOHO ~ [rolleyes]) Другими словами. , это "n" примет значение от 0.1.2.3.4.5.6....~ Будет контролироваться столько P, сколько вы сможете вычислить. . .
tr:nth-child(2n+11) {background:#ff0 }
Если вы понимаете вышесказанное, это нетрудно понять, но метка, которой он управляет, изменилась на «тр». Это означает, что таблица станет более разнообразной, я чувствую, что в начальной школе все должны хорошо разбираться в арифметике, а не учить ее. ну, иди скорее домой и снова выучи элементарную арифметику. . . (Однако повышает ли такая метка эффективность компьютерной обработки? [растерянно] Надеюсь, моё разочарование излишне...)
р: последний ребенок { фон: #ff0 }
A p до того, как p контролируется (NND, p приходит и уходит, попадает в pp [пот])
:not(p) { border:1px Solid #ccc }
Этот p не контролируется. Это означает, что он использует свой собственный стиль. Его следует использовать вместе с предыдущими. . .
р ~ ул {фон: #ff0 }
ul отображается с приоритетом над p. Я не знаю, какой это приоритетный метод. . .
В принципе, это все, что я могу понять. Вы можете перейти на следующие два веб-сайта, чтобы продолжить обучение. Если я сказал что-то не так, не забудьте сообщить мне.
www.456bereastreet.com/archive/200601/css_3_selectors_explained/
www.w3.org/TR/2005/WD-css3-selectors-20051215/