css selector

The css selector refers to the css selector, which is used to match the dom elements in the webpage. Commonly used selectors can be divided into tag name selectors, class selectors, id selectors, derived selectors, sub-element selectors, group selections Selectors and pseudo-element selectors.



Recommendation: "css video tutorial"

css selector refers to the css selector, which is used to match the dom element in the web page. The definition of css style is: selector {style}. The "selector" specifies the object of the "style" in {}, that is, which elements of the web page the "style" is applied to.

To use css to achieve one-to-one, one-to-many or many-to-one control of elements in HTML pages, CSS selectors are needed. The elements in the HTML page are controlled by CSS selectors.

Each css style definition consists of two parts, the form is as follows:

1

2

3

selector {property: value}

selector {property: property value}

//that is, the part of selector {style}

before {} is "selector". The "selector" indicates the object of the "style ()" in {}, that is, which elements of the web page the "style" is applied to. It can be an HTML tag, or a tag with a specific id or class.

Simply put: The main function of CSS is to style the dom elements in the web page, and the selector is used to match the dom elements.

Commonly used selectors can be divided into: tag name selector, class selector, id selector, derived selector, child element selector, group selector, pseudo element selector.

Note when using the css selector:

Since the interpretation of CSS is top-down, for the same attribute description of an element, placing it below will override the attribute description located above, so we are in the selection of elements Be sure to pay attention to the writing order, such as:

1

2

a:visited {color: #00FF00; text-decoration: none}

a:hover {color: #FF00FF; text-decoration: underline}

adopts this writing order, regardless of whether the link has been visited or not, as long as the mouse moves To the link, the link will turn blue and underlined. However, if the following writing order is used:

1

2

a:hover {color: #FF00FF; text-decoration: underline}

a:visited {color: #00FF00; text-decoration: none}

If the link has been visited, when you When the mouse is moved over the link, it will not turn blue and will be underlined, but will remain green.