belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...

CSS >>>

1.4. Виды селекторов

Как было сказано немного выше, селекторы предназначены для нахождения (выборки) элементов, к которым браузеру следует применять данный стиль. Если одно и тоже правило используется для нескольких селекторов, то они отделяются друг от друга запятой. Селекторы играют важную роль и в JavaScript, где они используются для поиска нужных html-элементов.

Существует достаточное количество типов селекторов, которые в полной мере и довольно просто позволяют отыскать нужные элементы. К ним относятся:

Очень важной особенностью перечисленных видов селекторов является возможность их комбинирования между собой практически в любых вариациях. Приведем в качестве примеров несколько комбинаций селекторов разных видов: p.my_class:hover {блок объявлений} – стиль будет применен ко всем параграфам, у которых задан атрибут class="my_class", при наведении на них курсора мыши; .list_1 a:visited {блок объявлений} – этот стиль будет применен ко всем посещенным ссылкам, которые находятся внутри элементов с атрибутом class="list_1"; p[class*="back"] > strong span[contenteditable]:focus {блок объявлений} – этот стиль будет применяться к каждому элементу span, у которого имеется атрибут contenteditable, он находится в данный момент в фокусе и является вложенным в элемент strong, который является дочерним по отношению к элементу p, имеющему атрибут class, в значении которого присутствует подстрока 'back'. Следует обязательно попрактиковаться в составлении селекторов. Для этого можно воспользоваться нашим разделом 'Задачник'.

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

Контрольные вопросы и задания

  1. Для чего нужны селекторы правил CSS? Перечислите их.
  2. Перечислите шаблоны селектора атрибутов.
  3. Перечислите псевдоклассы и псевдоэлементы соответствующих селектров.

Словарь новых английских слов

property ['prɔpəti] – свойство.
import [ˈɪmpɔːt] – импорт, импортировать.
selector [si'lektə] – искатель, отборщик.
visited [ˈvɪzɪtɪd] – посещенный.
active ['æktiv] – активный, действующий.
target [ˈtɑːɡɪt] – цель, мишень.
enabled [ɪˈneɪbl̩d] – разрешенный.
disabled [dɪsˈeɪbld] – заблокированный.
checked [tʃɛkt] – выбранный, проверенный.
empty [ˈɛm(p)ti] – пустой.
root [ruːt] – корень, основание.
odd [ɒd] – нечетный, непарный.
even [ˈiːvn] – четный.
child [tʃʌɪld] – дочерний элемент.
first [fəːst] – первый.
last [lɑːst] – последний.
only [ˈəʊnli] – только, единственный.
type [taɪp] – тип.
not [nɒt] – не, ни.
letter [ˈletər] – буква, литера.
line [laɪn] – линия, строка.
before [bɪˈfɔː] – впереди, перед.
after [ˈɑːftə] – потом, после, позади.
content [kənˈtɛnt] – содержимое.
hover [ˈhɒvə] – нависать.
strong [strɔːŋ] – сильный, крепкий.
important [ɪmˈpɔːt(ə)nt] – важный.
centimeter ['senti,mi:tə] – сантиметр.
inch [int∫] – дюйм (2,54 см).
point [pɔint] – пункт, точка.
pica [ˈpʌɪkə] – шрифт 'пика'.
percent [pəˈsent] – процент.
font [fɒnt] – комплект шрифта.
view [vjuː] – вид, смотреть.
hue [hjuː] – цвет, оттенок, тон.
saturation [satʃəˈreɪʃ(ə)n] – насыщенность.
lightness [ˈlʌɪtnəs] – освещенность, светлота.

Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх