Home > Web Front-end > HTML Tutorial > css priority mechanism description_html/css_WEB-ITnose

css priority mechanism description_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:54:20
Original
1437 people have browsed it

First explain the priority of styles. There are three styles:

1. External style sheet

Example:

<!-- 外部样式 bootstrap.min.css --> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
Copy after login
Copy after login

2. Internal style sheet

Example:

<head> <style type="text/css"> /*内部样式*/ h1 {color:blue;} </style> </head>
Copy after login
Copy after login

3. Inline style

Example:

<h1 style="color:blue">样式测试</h1>
Copy after login
Copy after login

Although inline styles can flexibly change the style of a certain tag independently, it is still recommended not to use inline styles as much as possible. Because although this is more intuitive, it does not conform to the design idea of ​​separation of structure and performance.

Generally speaking, the priority of the above three styles is as follows:

Inline style>Internal style>External style

Priority of selector :

The types of selectors can be divided into three types, namely:

1. Tag name selector such as h1{}.

2. Class selector such as .test{}.

3.ID selector such as #test{}.

At the same time, you need to consider the inline style sheet, that is, writing inside the tag.

Here we use the numbers 1000, 100, 10, 1 to represent the weights of the above three selectors and inline style sheets. The larger the number, the greater the weight, which means the higher the priority.

The weights of each selector are as follows:

1. The weight of the inline style sheet is the highest, set to 1000;

2. The weight of the ID selector is second. , set to 100

3. The weight of the Class class selector is third, set to 10

4. The weight of the HTML tag selector is the lowest, set to 1

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> /* 内部样式 */ #blueP p { /* 权值 = 100+1=101 */ color:blue; } #blueP .red { /* 权值 = 100+10=110 */ color:red; } #blueP p span { /* 权值 = 100+1+1=102 */ color:yellow; } #blueP span { /* 权值= 100+1=101 */ color:black; } </style> </head> <body> <div id="blueP"> <p class="red">优先级测试 <span>优先级测试</span> </p> <p>优先级测试</p> </div> </body> </html>
Copy after login
Copy after login

The results displayed on Firefox, IE10, and Chrome browser pages are as follows:

The content within the tag is displayed in red

The content within the tag is displayed in yellow

The last

In addition, in the same set of attribute settings, the rules marked with "!important" have the highest priority. The example is as follows:

<head> <style type="text/css"> /*内部样式 */ #redp p { color:red !important; /* 优先级最大*/ color:blue; } </style> </head> <body> <div id="redp"> <p>!important测试</p> </div> </body> </html>
Copy after login
Copy after login

The page display results in Firefox, IE10, and Chrome are as follows:

The content in the

tag is displayed in red

Other supplements:

1. The greater the weight of the selector, the higher the priority;

2. When the weights are equal, the style sheet settings that appear later will be higher than those that appear first. The style sheet setting that appears has a higher priority;

3. The inherited CSS style has a lower priority than the CSS style specified later

4. The descendant selector and group selector are the tag names. The extended applications of selectors, class selectors and ID selectors will not be introduced here.

First explain the priority of styles. There are three styles:

1. External style sheet

Example:

<!-- 外部样式 bootstrap.min.css --> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
Copy after login
Copy after login

2. Internal style sheet

Example:

<head> <style type="text/css"> /*内部样式*/ h1 {color:blue;} </style> </head>
Copy after login
Copy after login

3. Inline style (Inline style)

Example:

<h1 style="color:blue">样式测试</h1>
Copy after login
Copy after login

Although inline styles can flexibly change the style of a certain label independently, it is still recommended not to use inline styles as much as possible. Because although this is more intuitive, it does not conform to the design idea of ​​separation of structure and performance.

Generally speaking, the priority of the above three styles is as follows:

Inline style>Internal style>External style

Priority of selector :

The types of selectors can be divided into three types, namely:

1. Tag name selector such as h1{}.

2. Class selector such as .test{}.

3.ID selector such as #test{}.

At the same time, you need to consider the inline style sheet, that is, writing inside the tag.

Here we use the numbers 1000, 100, 10, 1 to represent the weights of the above three selectors and inline style sheets. The larger the number, the greater the weight, which means the higher the priority.

The weights of each selector are as follows:

1. The weight of the inline style sheet is the highest, set to 1000;

2. The weight of the ID selector is second. , set to 100

3. The weight of the Class class selector is third, set to 10

4. The weight of the HTML tag selector is the lowest, set to 1

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> /* 内部样式 */ #blueP p { /* 权值 = 100+1=101 */ color:blue; } #blueP .red { /* 权值 = 100+10=110 */ color:red; } #blueP p span { /* 权值 = 100+1+1=102 */ color:yellow; } #blueP span { /* 权值= 100+1=101 */ color:black; } </style> </head> <body> <div id="blueP"> <p class="red">优先级测试 <span>优先级测试</span> </p> <p>优先级测试</p> </div> </body> </html>
Copy after login
Copy after login

The results displayed on Firefox, IE10, and Chrome browser pages are as follows:

The content within the tag is displayed in red

The content within the tag is displayed in yellow

The last

另外在同一组属性设置中标有“!important”规则的优先级最大,示例如下:

<head> <style type="text/css"> /*内部样式 */ #redp p { color:red !important; /* 优先级最大*/ color:blue; } </style> </head> <body> <div id="redp"> <p>!important测试</p> </div> </body> </html>
Copy after login
Copy after login

在火狐,IE10,Chrome浏览器页面显示结果如下:

标签里的内容显示为红色

其他补充:

1.选择器的权值越大优先级越高;

2.当权值相等时,后出现的样式表设置比先出现的样式表设置优先级高;

3.继承的CSS 样式优先级低于后来指定的CSS 样式

4.后代选择器和群组选择器是对标签名选择器、类选择器和ID选择器的扩展应用,在此就不介绍了。

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template