Three selectors of CSS_html/css_WEB-ITnose

Tag selector

Tag selector is actually a tag in html code. Such as 100db36a723c770d327fc0aef2ce13b1, 6c04bd5ca3fcae76e30b72ad730ca86d, 4a249f0d628e2318394fd9b75b4636b1, e388a4556c0f65e1904146cc1a846bee, a1f02c36ba31691bcfe87b2722de723b in the code editor on the right. For example, the following code:

p{font-size:12px;line-height:1.6em;}

The function of the above css style code is to set the font size of 12px for the p tag and the line spacing to 1.6em.

Class selector

Class selector is the most commonly used in CSS style coding, such as the code in the code editor on the right : It can be realized that the fonts of "cowardly as a mouse" and "courage" can be set to red.

Grammar:

<strong>.</strong>类选器名称{css样式代码;}

Note:

1. Begins with a dot in English

2. Among them, the category The selector name can be named arbitrarily (but do not name it in Chinese)

How to use:

Step 1: Use appropriate tags to mark the content to be modified, as follows:

<span>胆小如鼠</span>

Step 2: Use class="class selector name" to set a class for the label, as follows:

<span <strong>class="stress"</strong>>胆小如鼠</span>

Step 3: Set the class selector css style, as follows :

.stress{color:red;}/*<strong>类前面要加入一个英文圆点</strong>*/

ID Selector

In many ways, ID selectors are similar to class selectors, but there are some important ones Differences:

1. Set id="ID name" for the label instead of class="class name".

2. The ID selector is preceded by the pound sign (#) instead of the English dot (.) .

The code editor on the right is a complete example of the ID selector.