The road to front-end godhood-CSS basic selector

Table of contents

CSS selector (emphasis)

1. The role of CSS selectors (key points)

The role of selectors

2. CSS basic selectors

2.1 Tag selector

2.2 Class Selector

2.3 Special usage of class selector - multiple class names

2.4 id selector

The difference between id selector and class selector

2.6 Wildcard Selector

2.7 Summary of basic selectors

2.8 Team Agreement

This article introduces the road to front-end godhood - CSS basic selector. The main content includes its usage examples, application skills, summary of basic knowledge points and matters needing attention. It has certain reference value and friends in need can refer to it.

Stage 01. Front-end basics. CSS basic selector

CSS selector (emphasis)

learning target:

understand
- Can tell what the selector does
- The difference between id selector and class selector
application
- Ability to add styles to page elements using basic selectors

1. The role of CSS selectors (key points)

As shown in the picture above, what is the fastest way to divide the minions inside into 2 groups?

Many, such as one group for one eye and the remaining group

The role of selectors

Find specific HTML page elements

Teacher Pink said them in one sentence: ※※※※

**What does the CSS selector do? Used to select tags, select the tags we want ** Must remember

CSS means two things: choosing the right person and doing the right thing.

h3 { 
	color: red;
}

This code does two things, select h3, and then turn it red. We'll all do this from now on.

Selectors are divided into basic selectors and compound selectors. Let’s first explain the basic selectors here.

2. CSS basic selectors

2.1 Tag selector

Concept: Tag selector (element selector) refers to using HTML tag name as a selector, classified by tag name, as A certain type of tag in the page specifies a unified CSS style.
grammar:

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

Function: The tag selector can select all tags of a certain type, such as all div tags and all span tags
Advantages: It can quickly unify the styles for the same type of tags on the page.
Disadvantages: Unable to design differentiated styles.

Summary formula:

Tag selector, page selection. Write labels directly and don’t give up on them all.

思考： 如果想要差异化选择不同的标签，怎么办呢？ 就是说 我想单独选一个或者某几个标签呢？

2.2 Class Selector

Class selectors are identified by "." (English dot), followed by the class name.

grammar:
- class name selector
.Class name { Attribute 1: Attribute value 1; Attribute 2: Attribute value 2; Attribute 3: Attribute value 3; }
- Label
<p class='Class name'></p>
advantage:
- Separate or identical styles can be defined for element objects. You can select one or more tags
Notice
- The class selector is identified by "." (English dot), followed by the class name (custom, named by ourselves)
- Long names or phrases can be named using dashes.
- Do not use pure numbers or Chinese names, try to use English letters.

Naming convention: See attachment (Web front-end development specification manual.doc)

Naming is what we generally agree on, but there is no requirement to use these commonly used names.

Memory tips Differentiated selection One or more points defined above Wrong class name Who uses who calls class to do it. Hehe, there are most jobs.

Case:

<head>
        <meta charset="utf-8">
        <style>
    
        .blue {
        	color: blue;
            font-size: 100px;
        }
        .red {
        	color: red;
            font-size: 100px;
        }
        .orange {
			color: orange;
            font-size: 100px;
        }
		.green {
			color: green;
            font-size: 100px;
		}
        </style>
    </head>
    <body>
    	<span class="blue">G</span>
    	<span class="red">o</span>
    	<span class="orange">o</span>
    	<span class="blue">g</span>
    	<span class="green">l</span>
    	<span class="red">e</span>
    </body>

2.3 Special usage of class selector - multiple class names

We can specify multiple class names for tags to achieve more choices.

Notice:

Separate each class name with spaces.
Multi-category name selectors are often used when the later layout is more complex.

<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>

2.4 id selector

The id selector is identified using#, followed by the id name

Its basic syntax format is as follows:
- id selector #id name {Attribute 1: Attribute value 1; Attribute 2: Attribute value 2; Attribute 3: Attribute value 3; }
- Tag <p id="id name"></p>
The id value of an element is unique and can only correspond to a specific element in the document.
Usage is basically the same as class selector.

The difference between id selector and class selector

The W3C standard stipulates that id objects with the same name are not allowed to appear in the same page, but classes with the same name are allowed.
- Class selector (class) is like a person's name, which can be reused multiple times, such as Zhang Wei, Wang Wei, Li Wei, Li Na
- The id selector is like a person's ID card number. It is unique in China and cannot be repeated. Can only be used once.

The biggest difference between the id selector and the class selector is the number of uses.

Teacher Pink summarizes them

Class selectors are the most commonly used when modifying styles.
The id selector is generally used for unique elements on the page, and is often used in conjunction with the JavaScript we will learn later.

2.6 Wildcard Selector

concept The wildcard selector is represented by the symbol *, * means to select all tags. It has the widest scope among all selectors and can match all elements on the page.
Its basic syntax format is as follows:

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

For example, the following code uses wildcard selectors to define CSS styles and clear the default margins of all HTML tags.

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

Note: It will match all elements of the page and reduce the page response speed. It is not recommended to use casually.

2.7 Summary of basic selectors

Selector	effect	shortcoming	Usage	usage
tag selector	You can select all the same tags, such as p	Cannot choose differentially	more	p { color：red;}
class selector	You can select 1 or more tags	Can be selected according to needs	Much	.nav { color: red; }
id selector	Only selector 1 tag can be selected at a time	Can only be used once	Not recommended	#nav {color: red;}
wildcard selector	Select all tags	There are too many choices, some of which are not necessary	Not recommended	* {color: red;}

We have learned a total of 4 basic selectors, each of which has its own value and may be used somewhere. But if you must find the most commonly used one, then it must be the class selector.

2.8 Team Agreement

Selector

Use universal selectors as little as possible *
Use ID selectors sparingly
Do not use the undefined semantic tag selector div span

/* 推荐 */
.jdc {}
li {}
p{}

/* 不推荐 */
*{}
#jdc {}
div{}   因为div 没有语义，我们尽量少用