CSS объяснил для выбора применимого элемента

Question

Может кто-нибудь объяснить, что означают селекторы?Насколько я понимаю, наличие #myId - это css для управления с id = myId..myClass - это Css для элементов управления с классом myClass.Может кто-нибудь объяснить, пожалуйста, другие комбинации?

div.img a:hover img
  {
  border:1px solid #0000ff;
  }
div.desc
  {
  text-align:center;
  font-weight:normal;
  width:120px;
  margin:2px;
  }

Answer 1

div.img a:hover img

выбирает изображения, которые находятся внутри наведенных ссылок, которые находятся внутри div элементов с классом img, и дает им синюю рамку.

div.desc

выбирает div с классом desc.

Answer 2

Идентификатор (#) может существовать только один раз в документе. Очень полезно также идентифицировать элемент в CSS и в JavaScript (если он вам когда-нибудь понадобится) .`

Класс (.) Можно использовать так часто, как это необходимо.

Пример: у вас есть только один заголовок: <div id="header">Header</div>, но несколько статей: <div class="article">...</div>

---

Скажем, у вас есть этот HTML-документ:

<div id="site">
    <h1>Some heading...</h1>
    <div class="article">
        <h1>Title</h1>
        <p>Some content...</p>
    </div>
    <div class="article">
        <h1>Title</h1>
        <p>Some content...</p>
    </div>
</div>

Заголовок статьи не должен быть таким же большим, как заголовок сайта, поэтому мы должны использовать более конкретный селектор: .article h1 {...}. Это будет стилизовать каждый элемент <h1> в элементе класса "article".

Если мы хотим иметь еще более конкретный селектор, мы будем использовать: div.article h1 {...}. Это будет только стиль каждого элемента <h1> в поле <div> с классом "article"

Answer 3

div.img a:hover img

Это будет соответствовать любому тегу img, который находится внутри тега a, который в настоящее время находится в состоянии hover, который находится внутри тега div, который имеет class="img".

div.desc

Это будет соответствовать любому тегу div с class="desc".

Когда элементы объединены в цепочку с такими пробелами между ними, это соответствует определенной иерархии элементов. Например, в первом случае тег img, которого нет в теге a, не будет сопоставлен.

Вы также можете разделять элементы запятой, которая вместо сопоставления иерархии элементов будет соответствовать каждому элементу в отдельности. Таким образом, что-то вроде div.img, img будет соответствовать любому тегу div с class="img" и любому тегу img.

Специально для атрибута :hover, который называется псевдокласс . Он изменяет атрибут, к которому он присоединен (в данном случае a), путем поиска элементов этого типа, которые находятся в определенном состоянии (в данном случае, при наведении курсора).

Answer 4

Посмотрите на определение стандартов, я всегда нахожу это полезным: CSS селекторы на W3C .

Answer 5

div.img a:hover img означает: найдите мне элемент img, который является потомком элемента a, над которым в данный момент находится курсор, который в свою очередь является потомком элемента div с именем класса og img.

div.desc просто выбирает любой div с именем класса desc.