CSS: adjacent Selector

The emergence of IE7, IE8, and firefox3 allows CSS to do more. Let's take a look at the adjacent CSS selector.

Adjacent delimiters are the delimiters that match the element that follows the element and has the same parent element as the target element.

------------------------------------------------

Note: ie6.0 and earlier versions do not support this selector.

-----------------------------------------------

See the example:
H1 + P
{
Color: red;
}

Code
1 <! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
2 < Html Xmlns = "Http://www.w3.org/1999/xhtml" >
3 < Head >
4 < Meta HTTP-equiv = "Content-Type" Content = "Text/html; charset = gb2312"   />
5 < Title > Adjacent Selector </ Title >
6 < Style Type = "Text/CSS" Media = "All" >
7 H1 + P
8 {} {
9Color:Red;
10}
11 </ Style >
12 </ Head >
13 < Body >
14 < H1 >
15 CSS Experience Sharing </ H1 >
16 < P >
17 Div and CSS give us benefits! </ P >
18 < P >
19 The use of CSS makes our code less, so that we can unify the style and make it easier </ P >
20 </ Body >
21 </ Html >
22

 

HereCodeIt only illustrates the functions of adjacent delimiters. In practice, you can flexibly solve them and find that they can solve many problems. However, IE6 is still widely used and is not recommended!

Adjacent selection can solve the problem that the Section has a border of 1 em by default.

H1 + P
{
Margin-top: 0px;
}

Effect in Firefox