Чтобы получить липкий нижний колонтитул:
& lt; div & gt;
с class = "wrapper"
для вашего контента. [ ! d9] & lt; / div & gt;
обертки
поместите & lt; div class = "push" & gt; & lt; /
& lt; / div & gt;
обертки
поместите & lt; div class = «нижний колонтитул» & gt; & lt; / div & gt;
. * {margin: 0; } html, body {height: 100%; } .wrapper {min-height: 100%; высота: auto! important; высота: 100%; margin: 0 auto -142px; / * нижний край - отрицательное значение высоты нижнего колонтитула * /} .footer, .push {height: 142px; / * .push должна быть той же высоты, что и .footer * /}
Этот селектор означает, что стиль применяется только к параграфам, непосредственно следуя за другим абзацем. Простой селектор p
применил бы стиль к каждому абзацу на странице.
См. смежные селекторы на W3.org.
Это будет работать только на IE7 или выше. В IE6 стиль не будет применяться к каким-либо элементам. Это также относится к комбинатору >
, кстати.
См. Также обзор Microsoft для совместимости CSS в Internet Explorer .
Знак +
означает выбор adjacent sibling
Пример:
CSS
p + p
{
font-weight: bold;
}
HTML
стиль будет применяться со второго <p>
<div>
<p></p>
<p></p>
</div>
См. этот скрипт, и вы поймете его навсегда: http://jsfiddle.net / 7c05m7tv / (Еще одна скрипта: http://jsfiddle.net/7c05m7tv/70/ )
Селекторы смежных и родственных сестер поддерживаются в Internet Explorer 5.x Macintosh. Они также поддерживаются в предварительном выпуске Netscape 6 для всех неслыханных платформ, для которых он доступен, и в предварительном выпуске 3 Opera 4 для Windows. Есть ошибки в работе с селекторами соседнего собора в IE5 для Windows и Opera 3 для Windows.
Полезно знать: Internet Explorer 7 не обновляет стиль правильно когда элемент динамически помещается перед элементом, который соответствует селектору. В Internet Explorer 8, если элемент вставлен динамически, нажав на ссылку, стиль первого ребенка не применяется до тех пор, пока ссылка не потеряет фокус.
"+" - смежный селектор. Он будет выбирать любой p DIRECTLY AFTER p (не дочерний или родительский, хотя и родной).
p+p{
//styling the code
}
p+p{
} simply mean find all the adjacent/sibling paragraphs with respect to first paragraph in DOM body.
<div>
<input type="text" placeholder="something">
<p>This is first paragraph</p>
<button>Button </button>
<p> This is second paragraph</p>
<p>This is third paragraph</p>
</div>
Styling part
<style type="text/css">
p+p{
color: red;
font-weight: bolder;
}
</style>
It will style all sibling paragraph with red color.
Окончательный вывод выглядит следующим образом
+
называется Adjacent Sibling Selector
.
Например, селектор p + p
, выбирает элементы p
сразу после элементов p
. Его можно рассматривать как селектор looking outside
, который проверяет сразу следующий элемент.
Вот пример фрагмента, чтобы сделать вещи более ясными:
body {
font-family: Tahoma;
font-size: 12px;
}
p + p {
margin-left: 10px;
}
<div>
<p>Header paragraph</p>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<p>This is yet another paragraph</p>
<hr>
<p>Footer paragraph</p>
</div>
Поскольку мы являемся одним из в той же теме стоит упомянуть другой селектор ~
, который является General Sibling Selector
Например, p ~ p
выбирает все p
, которые следуют за p
, не имеет значения, где это, но оба p
должны иметь один и тот же родитель.
Вот как это выглядит с той же разметкой:
body {
font-family: Tahoma;
font-size: 12px;
}
p ~ p {
margin-left: 10px;
}
<div>
<p>Header paragraph</p>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<p>This is yet another paragraph</p>
<hr>
<p>Footer paragraph</p>
</div>
Обратите внимание, что последний p
также соответствует этому образцу.
+
представляет один из относительных селекторов. Список всех относительных селекторов:
div p
- Все элементы <p>
внутри элементов <div>
выбраны.
div > p
- Все элементы <p>
, прямой источник которых <div>
.
div + p
- все элементы <p>
размещаются сразу после выбора элемента <div>
.
div ~ p
- Все <p>
элементы, которым предшествует элемент <div>
, выбраны.
Подробнее о селекторах проверьте здесь .
Он будет соответствовать любому элементу p
, который сразу примыкает к элементу 'p'. См .: http://www.w3.org/TR/CSS2/selector.html
Это означает, что он соответствует каждому элементу p
, который находится непосредственно рядом
www.snoopcode.com/css/examples/css-adjacent-sibling-selector
Плюс (+) выберет первый непосредственный элемент. Когда вы используете + селектор, вы должны дать два параметра. Это будет более понятно на примере: здесь div и span являются параметрами, поэтому в этом случае будет только первый прогон после того, как div будет стилизован.
div+ span{
color: green;
padding :100px;
}
<div>The top or first element </div>
<span >this is span immediately after div, this will be selected</span>
<span>This will not be selected</span>
Выше стиль будет применяться только к первому диапазону после div. Важно отметить, что второй интервал не будет выбран.
visibility : hidden/visible
вместоdisplay : none/block
. См. эту ссылку . – KFL 24 August 2014 в 06:40p > p
означает вложенныйp
, e.i. любойp
, который находится непосредственно под другимp
, например<p><p>This paragraph</p></p>
. – Banana 30 July 2017 в 05:49