Backend code farmers front-end (CSS) Lesson 3: Selector and css Selector

Backend code farmers front-end (CSS) Lesson 3: Selector and css Selector
I. selector 1. ID selector:

Syntax:
First, there is a # sign in front of the ID selector, also known as the checkboard number or well number.
See the following rules:

*#intro {font-weight:bold;}

Like a class selector, the wildcard selector can be ignored in the ID selector. The previous example can also be written:

#intro {font-weight:bold;}

The effect of this selector will be the same. 2. class selector:

Syntax:
Then we use the following syntax to apply a style to the elements of the classification, that is, there is a dot (.) before the class name, and then combine the wildcard selector:

*.important {color:red;}

If you only want to select all elements with the same class name, you can ignore the wildcard selector in the class selector, which has no negative impact:

.important {color:red;}

3. Element selector:

The most common CSS selector is the element selector. In other words, the document element is the most basic selector.
For example:

html {color:black;}

h1 {color:blue;}

h2 {color:silver;}

4. Attribute selector:

The attribute selector can select an element based on its attributes and attribute values.
Example 1
If you want to change all elements containing the title to red, you can write:

*[title] {color:red;}

Example 2
Similar to the above, you can apply the style only to the anchor (Element a) with the href attribute:

a[href] {color:red;}

Example 3
You can also select multiple attributes. You only need to link the attribute selector together.
For example, to set the text of HTML hyperlinks with both the href and title attributes to red, you can write as follows:

a[href][title] {color:red;}

Example 4
In addition to selecting elements with certain attributes, You can further narrow down the selection scope and select only elements with specific attribute values.
For example, if you want to change the hyperlink pointing to a specified document on the Web server to red, you can write as follows:

a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

Example 5
Different from example 4, we can also perform substring matching on the attribute values.
The rules are as follows:

Type	Description
[Abc ^ = "def"]	Select all elements whose abc attribute value starts with "def"
[Abc $ = "def"]	Select all elements whose abc attribute values end with "def"
[Abc * = "def"]	Select all elements in the abc property value that contain the sub-string "def"

For example:

a[href*="w3school.com.cn"] {color: red;}

5. Descendant selector:

Select the child element from the parent Element range.
For example:
If you want to apply the style only to the em element in the h1 element, you can write as follows:

h1 em {color:red;}

6. Child element selector:

Select child elements in the range of parent elements.
For example:
If you want to select a strong element that is only a child element of the h1 element, you can write it as follows:

h1 > strong {color:red;}

7. Adjacent sibling selector:

For example:
If you want to set the paragraph font that appears immediately after the h1 element to red, you can write as follows:

h1 + p {margin-top:50px;}

This selector reads: "select the paragraph that appears immediately after the h1 element, and the h1 and p elements have the same parent element ". Ii. selector priority

We know that the more accurate the selector points, the higher its priority.
Therefore, the following weights are usually assigned (the higher the weight, the higher the priority ).

Selector type	Weight
! Important	[1, 0, 0]
ID Selector	[0, 1, 0]
Class Selector	[0, 0, 1, 0]
Element Selector	[0, 0, 0, 1]
Attribute Selector	[0, 0, 1, 0]

Weight of the compound selector:
Example:

#example  em{color:red;} 

Weight = [0, 1, 1]

CSS priority rules:
Each selector has A weight value. The larger the weight, the higher the priority;
B. When the weights are equal, the subsequent style sheet settings are better than the first style sheet settings;
C. The Creator's rule is higher than the viewer: that is, the priority of the CSS style set by the webpage writer is higher than that set by the browser;
The CSS style inherited by D is not as good as the CSS style later specified;
[Note: The "inline style table weight" is only smaller! Important, because it is a combination of IDs .]

3. selector group:

Assume that h2 elements and paragraphs are gray. The easiest way to achieve this is to use the following statement:

h2, p {color:gray;}

Tip: by grouping, creators can "compress" certain types of styles to get a more concise style sheet.