CSS Super Tips (3)

css| Tips eight. Multiple class definition

A label can define more than one class at a time. For example, we first define two styles, the first style background is #666, and the second style has an PX border.

. One{width:200px;background: #666;}
. two{border:10px solid #F00;}

In the page code, we can call

<div Class=one two></div>

The final display effect is that the DIV has both a #666 background and a 10px border. Yes, it's OK, you can try it.

Nine. Using a descendant (selectors)

CSS beginners do not know that using a child selector is one of the reasons that affects their efficiency. A child selector can help you save a lot of class definitions. Let's look at the following code:

<div id=subnav>
<ul>
<li class=subnavitem> <a href=# class=subnavitem>item 1</a></li>>
<li class=subnavitemselected> <a href=# class=subnavitemselected> Item 1</a> </li>
<li class=subnavitem> <a href=# class=subnavitem> Item 1</a> </li>
</ul>
</div>

The CSS definition for this code is:

Div#subnav UL {/* Some styling *}
Div#subnav ul Li.subnavitem {/* Some styling * *
Div#subnav ul li.subnavitem A.subnavitem {* * Some styling/}
Div#subnav ul li.subnavitemselected {/* Some styling * *
Div#subnav ul li.subnavitemselected a.subnavitemselected {* * Some styling/}

You can use the following method to replace the above code

<ul id=subnav>
<li> <a href=#> Item 1</a> </li>
<li class=sel> <a href=#> Item 1</a> </li>
<li> <a href=#> Item 1</a> </li>
</ul>

The style definition is:

#subnav {/* Some styling */}
#subnav Li {/* Some styling */}
#subnav a {/* Some styling */}
#subnav. Sel {/* Some styling */}
#subnav. SEL a {/* Some styling */}

Use a sub selector to make your code and CSS more concise and easy to read.