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 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 {}{
9 color: red;
10}
11 </style>
12 13 <body>
14 15 CSS experience sharing 16 <p>
17 Div and CSS give us benefits! </P>
18 <p>
19 using CSS makes our code less, and makes it easier to unify the style. </P>
20 </body>
21 22
The code here only describes 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