#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
не является потомком classwidget
.2. Извиняюсь, Джеймс, я понимаю, что вы написали сейчас, увидев ответы ниже. Спасибо!
Ответ №3:
Да, разделитель запятой означает, что у вас на самом деле несколько селекторов. Таким образом, селектор .widget p,a,h2
соответствует:
- Все P в
.widget
- Все A, независимо
- Все H2, независимо.
Измените его на:
.widget p, .widget a, .widget h2 {...
Комментарии:
1. Спасибо, я вижу, что я делал сейчас. Должно быть более конкретно с моими правилами.
Ответ №4:
Теги и не вложены внутри .класс виджета. Я переформатировал css в jsfiddle . Взгляните на это.