Основное;
- Не желательно использовать в значениях id и class цифры.
- В значениях допустимо использовать дефис(-), строчные и заглавные(нежелательно) буквы.
- Идентификатор(id) не может быть одинаковым у разных элементов или блоков на странице, т.е. у каждого элемента должен быть свой уникальный id.
- Для атрибута class допустимо использовать несколько значений разделенных пробелом.
Для примера возьмем такую конструкцию:- Не желательно использовать в значениях id и class цифры.
- В значениях допустимо использовать дефис(-), строчные и заглавные(нежелательно) буквы.
- Идентификатор(id) не может быть одинаковым у разных элементов или блоков на странице, т.е. у каждого элемента должен быть свой уникальный id.
- Для атрибута class допустимо использовать несколько значений разделенных пробелом.
<div id="myDiv" class="my-class first">
<a href="./site/static-page.html" target="_blank">Моя страница</a>
</div>
<a href="./site/static-page.html" target="_blank">Моя страница</a>
</div>
Варианты селекторов
В качестве селектора могут выступать:- универсальный селектор(ко всем элементам будут применены указанные свойства):
* {
overflow: auto;
}
- имя тега:overflow: auto;
}
div {
padding: 10px;
}
- идентификатор (значение HTML-атрибута id):padding: 10px;
}
#myDiv {
margin: 15px 10px;
}
- класс (значение HTML-атрибута class):margin: 15px 10px;
}
.my-class {
background: lightblue;
}
- HTML-атрибут и его значениеbackground: lightblue;
}
В данном случаи будут выбраны все элементы, у которых имеется атрибут class со значением my-class
- селектор и HTML-атрибут:[class="my-class"] {
text-trensform: uppercase;
}
text-trensform: uppercase;
}
Здесь будут выбраны только элементы тега DIV, у которых имеется атрибут class со значением my-class
div[class="my-class"] {
text-trensform: uppercase;
}
text-trensform: uppercase;
}
Варианты селекторов по атрибутам
Чтобы указать нужный стиль элемента по атрибуту, кроме комбинации [атрибут="значение"], можно использовать следующие варианты:- только имя атрибута:
[class] {
...
}
- если значение в атрибуте начинается с определенного текста:...
}
[class^="my"] {
...
}
- если значение оканчивается определенным текстом:...
}
a[href$="page.html"] {
...
}
- если значение содержит определенный текст в месте(в начале, конце ли середине):...
}
a[href*="static"] {
...
}
- если значение содержит одно из значений:...
}
div[class~="first"] {
...
}
- если значение содержит одно из значений указанных c применением дефиса(-):...
}
div[class|="class"] {
...
}
...
}
Типы и комбинации селекторов
Для отдельного или более точного выбора необходимого элемента могут использоваться разные типы селекторов, которые конкретно указывают местоположение элемента в наборе:- вложенные - находящиеся в любом месте внутри родительского элемента:
div a {
text-decoration: none;
}
- дочерние - находящиеся непосредственно вначале родительского элемента:text-decoration: none;
}
div > a {
text-decoration: none;
}
- соседние - находящиеся непосредственно рядом друг с другом элементы:text-decoration: none;
}
.first + .second {
border: 1px solid #000000;
}
border: 1px solid #000000;
}
<div class='first'>...</div>
<div class='second'>...</div>
- родственные - однотипные элементы находящиеся в одном родительском блоке без дополнительных оберток:<div class='second'>...</div>
.first ~ p {
font-style: italic;
}
font-style: italic;
}
<div class='first'>...
<p>...</p>
<div><p>...</p></div><!-- этот элемент не является родственным -->
<p>...</p>
</div>
<p>...</p>
<div><p>...</p></div><!-- этот элемент не является родственным -->
<p>...</p>
</div>
Для более глубокой и интерактивной стилизации элементов страница также используются псевдоэлементы и псевдоклассы селекторов.
©http://magentawave.com
Комментариев нет:
Отправить комментарий