CSS selector (1), CSS selector (

CSS selector (1), CSS selector (

CSS selectors include tag selector, ID selector, class selector, pseudo-class and pseudo-object selector, sub-selector, adjacent selector, attribute selector, General selector, including selector, group selector, and specified selector. selector, there are four types: Tag selector, ID selector, class selector, and special selector.

 

The following are five common CSS selectors I have summarized.

 

1. Tag selector eg: p {color: #333;} a {display: block;} advantages: it can quickly unify the style of tags of the same type on the page. Disadvantage: different styles cannot be designed, which sometimes causes mutual interference between styles. 2. ID selector eg: # nav {margin: 0px; padding: 10px;} description: '#' indicates the ID prefix. 'nav' indicates that the ID name of the ID name element is unique and can only correspond to one element in the document. Applicability: Unique, fixed, and non-repeated objects on the page, such as the navigation bar. 3. class selector eg:. col {} Description: '.' is the prefix of the class selection character 'col'. The class name applies to: Class styles can be applied to multiple elements in the document. Features: ① before using the class selector, You need to define the corresponding class attributes for the elements of the class style to be applied in the HTML document; ② There is good flexibility, you can specify the element object range of the class style application. Comparison: under the same conditions, the priority of the ID selector is greater than that of the class selector. 4. pseudo class and pseudo object selector eg: a: hover {font-weight; bold;} explanation: 'A' is the specified tag name ': 'is a pseudo-class or pseudo-element identifier' hover 'is a pseudo-class or pseudo-element name. Applicable scope: used to select elements in special states or special regions. The following table lists the six commonly used pseudo-class selectors:

Pseudo class	Description
: Focus	Defines the style of an object when it becomes the input focus
: Link	Define a hyperlink style that has not been accessed
: Visited	Define accessed styles
: Hover	Defines the mouse Style
: Active	Defines the style of a mouse Press
: First-child	Defines the style of the first child object of an object.

": Link", ": visited", ": hover", and ": active" are used in combination with pseudo-class selectors, the wrong order will invalidate the hyperlink style. Eg: a {text-decoration: none;} a: link {color: black;} a: visited {color: red;} a: hover {color: blue;}: active {color: gray;} for the ": link" pseudo-class, Some browsers resolve it as any hyperlink, that is, it can be accessed, it can also be unaccessed. Therefore, a: link selector style can be replaced by a selector style. Note: in IE browser, the href attribute should be defined for element a when it is used for pseudo-class selector related to hyperlinks. Otherwise, the href attribute will be invalid, but in other browsers, The href attribute cannot be defined for element. 5. Sub-Selector eg: div> a {color: # fff;} explanation: 'div 'is the parent-level identifier'> 'is the Child-level identifier 'A'. Note: ① The element controlled in the Child selector can only be the child element of the object specified before the '>' symbol.