CSS class selector (4)_html/css_WEB-ITnose-HTML Tutorial-php.cn

CSS class selector (4)_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:46:30

Original

1512 people have browsed it

1. Class selector

Class selection is marked with "." (English dot), followed by the class name

For example:

.red{color:red;}

Copy after login

Class styles can be applied to multiple elements in the document, which reflects the reusability of CSS code and helps users simplify page control.

2. Class selector and label selector

Both class selector and label selector have one-to-many characteristics, that is, one style can control the display effect of multiple element objects.

Notes:

Compared to tag selectors, class selectors have better adaptability and flexibility because the style of the class can be specified Applied element object range

Compared with class selectors, tag selectors have the advantages of simple operation and convenient definition, because there is no need to define the same class attribute for each element. Before using the class selector, you need to define the class attribute in the HTML document for the element to which the class style is to be applied. This will cause heavy display and is more troublesome.

The tag selector is suitable for defining global display attributes for elements, while the class selector is more suitable for defining class styles. After defining the style of the tag selector, it will definitely affect the same content on the page. Elements are affected, and the styles defined by the class selector will not be applied, giving greater flexibility.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>伪类和伪对象选择器</title><link type="text/css" rel="stylesheet" href="css/demo4.css"/></head><body><div></div><div class="red"></div></body></html>

Copy after login

css

@charset "utf-8";/* CSS Document */div{    width:400px;    height:200px;    background-color:blue;    }.red{background-color:red;}

Copy after login

Result:

3. Class selector and ID selector

In addition to different application scopes, class selectors and ID selectors also have different priorities. Under the same conditions, ID selectors have greater priority than class selectors.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>伪类和伪对象选择器</title><link type="text/css" rel="stylesheet" href="css/demo4.css"/></head><body><div id="text" class="red"></div></body></html>

Copy after login

CSS

@charset "utf-8";/* CSS Document */div{    width:400px;    height:200px;    }#text{    background-color:blue;    }.red{background-color:red;}

Copy after login

div will appear blue

General In terms of:

ID selector: The application is used to reflect the structure and position of the document, such as #header, #footer, #left, etc.,

Class selector: the class attribute should reflect the name. The style is descriptive, so that you can understand the style to be defined by looking at the class name, such as .red, defining a red class, .underline defining an underlined class, etc.