Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 17120 / 1588 | Оценка: 3.91 / 4.09 | Длительность: 12:36:00
Лекция 10:

CSS3. Селекторы

< Лекция 9 || Лекция 10: 123 || Лекция 11 >
Аннотация: Селекторы элементов (type selectors). Селекторы класса (class selectors). Селекторы идентификаторов (ID selectors). Селекторы потомков (Descendant selectors). Селекторы дочерних элементов (Child selectors). Универсальные селекторы (Universal selectors). Селекторы братских элементов (Adjacent sibling selectors). Селекторы атрибутов (Attribute selectors). Селекторы псевдоклассов (Pseudo-classes). Селекторы псевдоэлементов (Pseudo-elements).

В самом начале лекций, посвященных теме каскадных таблиц стилей, была приведена таблица различных селекторов, указанных в ней видов достаточно для большинства операций. Тем не менее, спецификация W3C описывает большее количество типов селекторов, рассмотрению которых и будет посвящена данная лекция.

Селекторы элементов

Наиболее простой для понимания вид селекторов, при его использовании стиль будет применен ко всем встречающимся в html - документе соответствующим элементам.

Пример

Стиль: p {color: red}

В следующем ниже коде контент, к которому будет применен указанный стиль, выделен красным:

<div>
   <ul>
    <li>some text <p>red text</p></li>
    <li>some text part 2</li>
    <li>some text part 3</li>
   </ul>
  </div>
  
  <div>
   <table>
    <tr>
     <td> table 1.1</td>
     <td>table 1.2.1 <p>red text</p></td>
    </tr>
    <tr>
     <td>table 2.1</td>
     <td>table 2.2</td>
    </tr>
   </table>
  </div>

Селекторы класса

В отличие от селекторов элементов, стили описанные при помощи селектора классов будут применены только к элементам, содержащим атрибут class с соответствующим значением.

Пример

Стиль: .clrRed {color: red}

В следующем ниже коде контент, к которому будет применен указанный стиль, выделен красным:

<div>
      <ul>
        <li>some text<p>some text</p></li>
        <li class="clrRed">some text part 2</li>
        <li>some text part 3</li>
      </ul>
    </div>
    
    <div>
      <table>
        <tr>
          <td> table 1.1</td>
          <td>table 1.2.1 <p class="clrRed">some text</p></td>
        </tr>
        <tr class="clrRed">
          <td>table 2.1</td>
          <td>table 2.2</td>
        </tr>
      </table>
    </div>

Селекторы элементов и классов могут быть объединены:

p.clrRed {color: red}
li.clrRed {color: yellow}

Таким образом, содержимое тегов <li>, относящихся к классу clrRed, будет представлено в желтом цвете, содержимого тега <p> аналогичного класса – красным.

Также к элементу могут быть применены стили нескольких классов, например:

.txtAlign {text-align: justify}
.txtColor {color: red}
<p class="txtAlign txtColor"> ..... </p>
< Лекция 9 || Лекция 10: 123 || Лекция 11 >
Эмиль Галеев
Эмиль Галеев

По каким то причинам не сохраняется текст. И не выдает сообщение об ошибке если текста нет. Проверил все внимательно проблем в написании нет. Вопрос почему он не сохраняет?

Алексей Вычегжанин
Алексей Вычегжанин

http://www.intuit.ru/studies/courses/3734/976/lecture/27486?page=3

Заполнил html, js и css-файлы согласно рекомендациям. После запуска главной страницы в панели разработчика браузера, во вкл. Console, выдает сообщение об ошибке:

"script.js:85 Uncaught TypeError: Cannot read property 'addEventListener' of null"

, ссылаясь на строку js-файла (функция load()):

" audio.addEventListener('ended', function () "

При дальнейшем просмотре результатов доступны только функции просмотра треков по выбранному альбому и предварительного прослушивания трека. 

Функция добавления записей в плейлист не работает. Соответственно сам плей-лист и полоса прокрутки не открываются.

Анастасия Теницкая
Анастасия Теницкая
Россия
Юлия Софийская
Юлия Софийская
Россия