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;}

#intro {font-weight:bold;}

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;}

.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;}

a[href] {color:red;}

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

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

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;}

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).

复合选择器的权值：
例：

#example  em{color:red;} 

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

三、选择器分组：

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

h2, p {color:gray;}