CSS basic selector-1-weird coffee

CSS basic selector-1-weird coffee 1. Basic selector syntax

2. browser compatibility: the browser uses a green light for the basic selector.

3. wildcard selector: select all elements or all elements under an element.

(1) select all elements: * {margin: 0; padding: 0 ;}

(2) All elements under an element:. demo * {background: purple ;}

4. ID Selector

(1) Before using the ID selector (# id), you must set the id attribute and value for the corresponding element in the HTML document to find the corresponding element.

Eg:

HTML Structure

(2) The ID selector is unique and can have only one id on a page.
(3) to use the id selector in CSS Styles, you must add the [#] sign before the id attribute name.

Eg: # demo {color: purple ;}

5. class selector

(1) define the class attribute for the required element in HTML and set the attribute value for it.
(2) A class selector can have multiple identical class names on a page, and the ID value of the class selector is unique throughout the page (simple usage of the class selector)
Eg:. demo {color: purple ;}

(3) multi-class selector of a class selector: combines two or more class selectors to define the effect of elements different from a class name.

Eg:. demo1.demo2 {color: purple;} (there is no space between the two selectors and they should be closely connected)

Note: if one of the class names in a multi-class selector does not exist, the selector cannot find the matching element.

Note: The IE6 selector does not support multiple class selectors. The class name at the end prevails.

(4) multi-class selector Extension

[3] indicates two types of selectors. Think: the element selector, ID selector, and class name selector are all selectors, which means they can be combined with each other.

Eg: p # demo {margin: 0 ;}

P. demo {margin: 0 ;}

. Demo # demo {margin: 0 ;}

You will also learn a variety of selectors in the future, which can be used in combination, but we do not recommend too many combinations. First, it is too complicated and difficult to control; second, it is completely unnecessary. It is better to directly use a new element without compatibility issues (not supported by IE6)

6. Group Selector

(1) The selector1 (selectorN) group elements with the same style. Each selector is separated by commas (,).

(2) selector1, selector2, selector3,..., selectorN

(3) The comma (,) tells the browser that the rule contains multiple different selectors. When the comma is omitted, it becomes a descendant selector (separated by spaces) or multiple class selectors (not separated)