Блог

Главная - Вопросы по программированию - Класс CSS, влияющий на элементы, не вложенные в класс

Класс CSS, влияющий на элементы, не вложенные в класс

#html #css

#HTML #css

Вопрос:

У меня есть следующий HTML-код в функции страницы:

 <div id="feature-detail">
    <div class="da1 d-active">
        <h1><span>Detail 1</span></h1>
        <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></p>
        <a href="#"><span>Show how</span></a>       
    </div>
</div>

Затем я продолжаю страницу:

 <div id="page-submain" class="centred">
    <div id="left-widget" class="widget">
        <h1><span>Title</span></h1>
        <p><span>Lorem ipsum dolor sit amet.</span></p>
        <a href="#"><span>Read More</span></a>
    </div>
</div>

ПРИМЕЧАНИЕ: ни один из вышеперечисленных родительских <div> элементов не вложен друг в друга. Оба имеют родительский элемент <body> .

Когда я запускаю некоторые тесты структуры CSS, я заметил, что это правило стиля:

 .widget p,a,h2 {
    margin:3px 5px 3px 5px;
    padding:0;
}

Влияет <a> на #feature-detail вход. Почему это происходит, когда я явно применил стиль к классу ‘widget’?

На данный момент для меня это не имеет большого смысла, но кажется, что IE, FF, Chrome и Opera интерпретируют это точно так же. Я что-то здесь упускаю?

Спасибо, что взглянули!

Ответ №1:

То, что вы написали, эквивалентно:

 .widget p {
    margin:3px 5px 3px 5px;
    padding:0;
}
a {
    margin:3px 5px 3px 5px;
    padding:0;
}
h2 {
    margin:3px 5px 3px 5px;
    padding:0;
}

То, что вы хотите, это:

 .widget p, .widget a, .widget h2 {
    margin:3px 5px 3px 5px;
    padding:0;
}

Ответ №2:

Селектор, используемый в этом:

 .widget p,a,h2 {
    margin:3px 5px 3px 5px;
    padding:0;
}

соответствует «p элементам, которые являются потомками элементов с виджетом класса», всем a элементам и всем h2 элементам.

Если вы хотите a , чтобы правило применялось только к a элементам, которые являются потомками элемента с классом widget , вам нужно указать это (и вам придется сделать то же самое с h2 , если вы хотите, чтобы это вело себя аналогичным образом):

 .widget p, .widget a, h2

Комментарии:

1. Спасибо, Джеймс, я в курсе этого. Проблема в том, a что элемент в #feature-links не является потомком class widget .

2. Извиняюсь, Джеймс, я понимаю, что вы написали сейчас, увидев ответы ниже. Спасибо!

Ответ №3:

Да, разделитель запятой означает, что у вас на самом деле несколько селекторов. Таким образом, селектор .widget p,a,h2 соответствует:

  • Все P в .widget
  • Все A, независимо
  • Все H2, независимо.

Измените его на:

 .widget p, .widget a, .widget h2 {...

Комментарии:

1. Спасибо, я вижу, что я делал сейчас. Должно быть более конкретно с моими правилами.

Ответ №4:

Теги и не вложены внутри .класс виджета. Я переформатировал css в jsfiddle . Взгляните на это.

Метки: , ,