Back-end coders talk about front-end (CSS) Lesson 3: Selector_html/css_WEB-ITnose

1. Selector

1. ID selector:

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

*#intro {font-weight:bold;}

Like class selectors, wildcard selectors can be ignored in ID selectors. The previous example could also be written as:

#intro {font-weight:bold;}

The effect of this selector would be the same.

2. Class selector:

Syntax:
Then we use the following syntax to apply styles to these classified elements, that is, there is a period (.) before the class name, and then combined with wildcard selection Selector:

*.important {color:red;}

If you just want to select all elements with the same class name, you can ignore the wildcard selector in the class selector, there is nothing wrong with that Impact:

.important {color:red;}

3. Element selector:

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

html {color:black;}

h1 {color:blue;}

h2 {color:silver;}

4. Attribute selector:

Attribute selector can be based on the element Attributes and attribute values ​​to select elements.
Example 1
If you want to make all elements containing the title red, you can write:

*[title] {color:red;}

Example 2
Similar to the above, you can apply styles only to anchors (a elements) with href attributes:

a[href] {color:red;}

Example 3
You can also select based on multiple attributes, just Just chain attribute selectors together.
For example, to set the text of an HTML hyperlink with both href and title attributes to red, you can write:

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

Example 4
In addition to selecting elements with certain attributes, you can further narrow the selection to only elements with specific attribute values.
For example, suppose you want to turn the hyperlink pointing to a specified document on the web server red, you can write:

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

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

类型	描述
[abc^="def"]	选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"]	选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"]	选择 abc 属性值中包含子串 "def" 的所有元素

For example:

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

5. Descendant selector:

Select the parent element as the range Descendant elements.
For example:
If you want to apply styles only to em elements in h1 elements, you can write like this:

h1 em {color:red;}

6. Sub Element selector:

Selects child elements based on the parent element.
For example:
If you want to select only strong elements that are children of h1 elements, you can write like this:

h1 > strong {color:red;}

7. Neighbor selector:

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

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

This selector reads: "Select the paragraph that appears immediately after the h1 element. The h1 and p elements have a common parent element."

2. Priority of the selector

We know that the more accurately the selector points, the higher its priority.
Therefore, weights are usually assigned as follows (the larger the weight, the higher the priority).

选择器类型	权值
!important	[1,0,0,0]
ID选择器	[0,1,0,0]
类选择器	[0,0,1,0]
元素选择器	[0,0,0,1]
属性选择器	[0,0,1,0]

复合选择器的权值：
例：

#example  em{color:red;} 

权值 = [0,1,0,1]

CSS 优先级法则：
A 选择器都有一个权值，权值越大越优先；
B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
D 继承的CSS 样式不如后来指定的CSS 样式；
【注：“内联样式表的权值”仅小于!important，因为它是一路ID组合出来的。】

三、选择器分组：

假设希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：

h2, p {color:gray;}

提示：通过分组，创作者可以将某些类型的样式“压缩”在一起，这样就可以得到更简洁的样式表。