Shulou(Shulou.com)06/02 Report--

This article mainly explains "what is the function of CSS selector". Friends who are interested may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what is the function of CSS selector"?

CSS selector (selector): represents the object for which you want to define the style

1) element selector / type selector (element selector) such as: div {width:100px; height:100px; background:red;}

Syntax: element name {attribute: attribute value;}

Description:

A) the element selector takes the document language object type as the selector, even if the element name in the structure is used as the selector. For example, body, div, pjimg, pjimg, pjig Wait.

B) all page elements can be used as selectors

Usage:

1) if you want to change the default style of an element, you can use the type selector

(for example, change a div, p, H2 style)

2) when unifying the display of an element in a document, you can use type selectors

(for example, change the style of all p paragraphs in the document)

2) id selector

Syntax: # id name {attribute: attribute value;}

Description:

A) when we use the id selector, we should define an id attribute for each element

Such as:

B) the syntax format of the id selector is "#" plus a custom id name

For example: # box {width:300px; height:300px;}

C) choose an English name instead of keywords: (all tags and attributes are keywords)

Such as: head tag

D) An id name can only correspond to a specific element object in the document, because id can only define a unique element object in the page.

E) the greatest use: to create the peripheral structure of a web page.

3) Group selector

Syntax: selector 1, selector 2, selector 3 {attribute: attribute value;} example: # top1,#nav1 {width:960px;}

Note: when multiple selectors apply the same style, you can merge the selectors into a group by separating them with ",".

4) class selector / class selector

Syntax: class name {attribute: attribute value;}

Description:

A) when we use the class selector, we should first define a class name for each element

B) the syntax format of the class selector is:

"such as:"

.top {width:200px; height:100px; background:green;}

Usage: the class selector is more suitable for defining a class of styles

5) * wildcard / wildcard selector

Syntax: * {attribute: attribute value;}

Description: the wildcard selector is written as "*", which means all elements.

* {margin:0; padding:0;} means to clear the default margins and fill values for all elements

The margin:0 auto; element is centered horizontally

6) include selector / descendant selector

Syntax: selector 1 selector 2 {attribute: attribute value;}

Description: the meaning is all selector 2 contained in selector 1

Usage: when my element has a parent element, I want to change my own style, which can be solved directly by including the selector without adding a selector.

Such as: structure:

Style: .list li {background:red;}

6.1: sub-selector

Syntax: selector 1 > selector 2 {attribute: attribute value;}

Description: direct child selector 2 in selector 1

Example:

111111111

2222222

Div > span {color:red;} can only change the color of span tags with content of 222222

7) pseudo class selector (pseudo class selector)

Syntax:

A:link {attribute: property value;} initial state of the hyperlink

A:visited {attribute: attribute value;} status after the hyperlink is accessed

A:hover {attribute: attribute value;} Mouse hover, that is, the state of the mouse over the hyperlink

A:active {attribute: attribute value;} the state of the hyperlink when it is activated, that is, the state of the hyperlink when the mouse is pressed

Link--visited--hover--active .

Description:

A) when these four hyperlink pseudo-class selectors are used together, you should pay attention to their order, the normal order is:

The wrong order sometimes invalidates the style of the hyperlink.

B) to simplify the code, you can put the same declaration in the pseudo-class selector in the a selector

For example: a {color:red;} a:hover {color:green;} means that the initial state of the hyperlink is the same as that after the visit, and the state of the mouse click is the same as that of the click.

7. The weight of CSS selector

In css, the weight is represented by four digits, and the expression of weight (particularity) is as follows: 0meme0re0pence0.

Type selector (element selector) has a weight of 0001, such as: div {width:100px; height:100px;}

The weight of the class selector is 0010, such as .box {width:100px; height:100px;}

The weight of the id selector is 0100

The weight of pseudo-class selector is 0010, such as: a:link a:visited.

Weight containing selector: the sum of weights containing selector

The weight of the sub-selector is 0000

The weight of the attribute selector is 0010

The weight of the pseudo-element selector is 0001

The weight of the inline style is 1000

Inherit style has a weight of 0000

Comments on the page

Html comment

Comments on css

/ * I am the comment of css * /

At this point, I believe that you have a deeper understanding of "what is the role of the CSS selector", you might as well come to the actual operation! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.