Commonly used selectors in CSS

Table of contents

1. Basic selector

1. Tag selector

2. Class selector

3. id selector

4. Wildcard selector

5. Summary

2. Composite selector

1. Descendant selector

2. Sub-selector

3. Union selector

4. Pseudo-class selector


1. Basic selector

The following syntax uses internal style sheets as examples~

1. Tag selector

grammar:

<style>

tag name {

style declaration;

        }

</style>

Features:

Tags of the same type can be quickly selected, but tags cannot be selected differentially.

Example:

2. Class selector

grammar:

<style>

.class name {

style declaration;

        }

</style>

Features:

Different labels can be expressed differently~

Example:

Notice:

(1) There is a dot before the class name.

(2) Call the corresponding tag through the class attribute of the tag;

(3) A class can be used by multiple tags, and a tag can also have multiple class names. In this way, the commonalities of multiple tags can be extracted to simplify the code;

(4) If the class name is relatively long, it can be separated by -;

(5) Do not use pure numbers, Chinese characters, or label names to name class names.

3. id selector

grammar:

<style>

        #id {

style declaration;

        }

</style>

It is used similarly to the class selector, but the ids in an html file must be unique.

Features:Select one tag at a time~

Example:

Notice:

(1) The id selector starts with #, while the class selector starts with .;

(2) The id in an html must be unique and cannot be used by multiple tags.

4. Wildcard selector

grammar:

<style>

        * {

style declaration;

        }

</style>

Features:Select all tags~

Example:

5. Summary

SelectoreffectFeatures
tag selectorAll tags of the same type can be selectedCannot choose differentially
class selectorYou can select one or more tagsCan be differentiated and selected, the most flexible and commonly used basic selector
id selectorA label can be selectedYou can select a specified tag, and each id in the same html is unique.
wildcard selectorAll tags can be selectedUse in special circumstances

2. Composite selector

1. Descendant selector

Also called the inclusion selector, you can select descendant elements (child elements, grandchild elements…) in a certain parent element~

grammar:

<style>

parent tag child tag {

style declaration;

        }

</style>

Example:Modifying li in ol does not affect li in ul

Example:Modify ol’s grandson tag h3 without affecting ol’s son tag

Notice:The label can also be replaced by a class name or id name.

2. Sub-selector

Similar to the descendant selector, but only biological son tags can be selected~

grammar:

<style>

parent tag>child tag {

style declaration;

        }

</style>

Example:Modify the son tag a in the div

Counterexample:Modifying the grandson tag b in the div will have no effect at this time.

Notice:The child selector can only select child tags, not grandchild tags and their descendant tags.

3. Union selector

Used to select multiple groups of labels~

grammar:

<style>

element1, element2, element3 {

style declaration;

        }

</style>

Notice:

(1) Use commas to separate multiple elements;

(2) Any basic selector can use the union selector;

(3) It is recommended to write the union selector vertically, with each selector occupying one line.

Example:Change the content in div, ol, and ul to tomato color

4. Pseudo-class selector

grammar:

Tag name: link Select a link that has not been visited

Tag name: visited Select a link that has been visited

Tag name:hover Select the link on which the mouse pointer is hovering

Tag name: active Select the active link (click the link but do not release the mouse)

Example:

①Normal situation:

② Place the mouse on “Zhou Gongjin”:

③Click “Zhou Gongjin” with the mouse:

CSS common element attribute reference:CSS Reference Manual (w3school.com.cn)

Related Posts

CSS simple image centering

HTML rotating photo album (0 basics, learn in 1 minute)

Teach you step by step how to make the navigation bar at the bottom of your mobile phone, and your boss will agree after reading it

Front-end knowledge – flex layout of css

Introduction and use of Normalize.css

8 detailed implementation methods for css centering

[ElementUI Style Optimization 1]el-table Modify zebra grid style, modify scroll bar style, add header border, delete table border line

Summary of common browser compatibility issues and solutions

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*