CSS Series (7) CSS Class selector class detailed

This article is written in notes form.

1, CSS class selector detailed

Http://www.w3school.com.cn/css/css_selector_class.asp

Knowledge Points:

(1) The premise of using class selector is to add a class attribute to the tag, such as <p class= "important" ></p>

(2) The syntax of the class selector is: *.important {color:red;}, but generally omits the preceding wildcard selector, written as. important {color:red;}, which adds a style to all tags with class= "important".

(3) Apply a style to a tag with a class, such as P.important {color:red;} This will only match elements labeled P and class= "important".

(4) Set multiple classes for a label, and the styles of these classes will be applied to the label. Like what:

<p class= "Important Warning" >

This paragraph is a very important warning.

</p>

P tags also have the class important and warning, no points around.

Styles are:

. important {Font-weight:bold;} Set to Bold

. warning {font-style:italic;} Set to italic

This paragraph p will be both bold and italic.

(5) Two classes are written together, without order, will match the elements containing two classes, such as:

. important.warning {background:silver;} Set Background to Silver

This selector matches elements that have both class important and warning.

(6) 4th and 5th are the so-called "multi-Class selectors", which says that in previous versions of IE7, Internet Explorer on different platforms could not handle multi-class selectors correctly.

However, I have tested on IE6, 7 and 8, and there is no problem.

2, the difference between class selector classes and ID selectors

Http://www.w3school.com.cn/css/css_selector_id.asp

Knowledge Points:

(1) The ID selector can only be used once in the document

You can search for the article "Why the ID of an HTML tag must be unique"

(2) The list of ID words cannot be used, i.e. it cannot be like a multi-class selector. Red.bold can choose a label that has both a class red and a bold, #red #bold this is not allowed.

(3) ID can contain more meanings, such as id= "Mostimportant" represents "most important", which is unique, and class= "important" stands for "important", there may be many.

CSS Series (7) CSS Class selector class detailed