CSS 哪个优先，内联还是类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6749569/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS which takes precedence, inline or the class?
提问by Snow_Mac
My website has a stylesheet defined in the header as style.css with a selector:
我的网站在标题中定义了一个带有选择器的 style.css 样式表：
.myClass {background:#000;}
Now my div looks like:
现在我的 div 看起来像：
<div class="myClass" style="background:#fff;"> </div>
Which one has priority, the inline or the class?
哪个优先，内联还是类？
回答by Raj
The order of precedence with CSS is as follows:
CSS的优先顺序如下：
- !important(this is a bit hackish though but it is the only way to override an inline style. Try to avoid using this unless really necessary). Example: p {color: blue !important; }
- Inline, such as
<p class="redText" style="color: red;">CSS is awesome</p>.In this example, the class is ignored if theredTextclass declaration has already tried to define the property ofcolor:. Other properties can still be honored though. - Internalstyles - those written inside the
<head><style>section of an html page. - Externalstylesheet which defines styles. Your html document must have a link to this sheet in order to use it. Example, again inside the
<head>section is:<link rel="stylesheet" type="text/css" href="mystyle.css" />
- !important（虽然这有点hackish，但它是覆盖内联样式的唯一方法。除非真的必要，否则尽量避免使用它）。示例：p {颜色：蓝色！重要；}
- 内联，例如
<p class="redText" style="color: red;">CSS is awesome</p>. 在本例中，如果redText类声明已经尝试定义 的属性，则该类将被忽略color:。其他属性仍然可以兑现。 - 内部样式 - 那些写在
<head><style>html 页面部分内的样式。 - 外部样式表定义的样式。您的 html 文档必须具有指向此工作表的链接才能使用它。例如，再次在该
<head>部分内是：<link rel="stylesheet" type="text/css" href="mystyle.css" />
Check here to brush up on the terminology: http://www.w3schools.com/css/css_syntax.asp
回答by atrljoe
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number three has the highest priority:
一般来说，我们可以说所有的样式都会按照以下规则“级联”到一个新的“虚拟”样式表中，其中数字 3 的优先级最高：
- Browser default
- Embedded and external stylesheets. Later has precedence over earlier. There IS NOT any inherent difference between embedded and external.
- Inline style (inside an HTML element)
- 浏览器默认
- 嵌入式和外部样式表。较晚优先于较早。嵌入式和外部之间没有任何内在差异。
- 内联样式（在 HTML 元素内）
Source (Edit: of original incorrect information, since corrected both here and there): w3schools
来源（编辑：原始错误信息，因为在这里和那里都更正了）：w3schools
W3schools explains a lot about CSS and also goes through and shows examples of most things you can do with CSS. Always a good resource if you have questions about something. (Edit: debatable, they were the source of the original wrong answer.)
W3schools 解释了很多关于 CSS 的内容，并且还通过并展示了您可以使用 CSS 完成的大多数事情的示例。如果您对某事有疑问，始终是一个很好的资源。（编辑：值得商榷，它们是原始错误答案的来源。）
回答by Suraj Jain
The order of precedence with CSS is as follows:
CSS的优先顺序如下：
- Inline, such as
<div id="orange" class="green" style="color: red;">This is red</div>.In this example, theclassis ignored if thegreenclass declaration has already tried to define the property of color.Alsoidis also ignored if it has tried to define the color. - Id Selector, such as
#orange { color: orange; } - Class Selectors, such as
.green { color: green; } - Element Selectors,such as
div { color: black; }
- Inline，例如
<div id="orange" class="green" style="color: red;">This is red</div>. 在这个例子中，class如果green类声明已经尝试id定义颜色的属性，则忽略 。如果它尝试定义颜色，也会被忽略。 - Id Selector，例如
#orange { color: orange; } - 类选择器，例如
.green { color: green; } - 元素选择器，例如
div { color: black; }
Mozilla Developer Network Documentation Has Well Written Documentation on That Which Says
Mozilla开发者网络文档有那么好书面文件，这说
When multiple rules apply to a certain element, the rule chosen depends on its style specificity. Inline style(in HTML style attributes) has the highest specificity and will override any selectors, followed by ID selectors, then class selectors, and eventually element selectors.
当多个规则应用于某个元素时，选择的规则取决于其样式特性。内联样式（在 HTML 样式属性中）具有最高的特异性，将覆盖任何选择器，其次是ID 选择器，然后是类选择器，最后是元素选择器。
The text color of the below will therefore be red.
因此，下面的文本颜色将是红色。
div { color: black; }
#orange { color: orange; }
.green { color: green; }
<div id="orange" class="green" style="color: red;">This is red</div>Please Consult MDNfor any HTML, CSS or JavaScript Knowledge, w3school does not have a very good reputation in developers community. For Further Info On This Matter Please Visit w3fools.
任何 HTML、CSS 或 JavaScript 知识请咨询MDN，w3school 在开发者社区中没有很好的声誉。有关此问题的更多信息，请访问w3fools。
回答by Ram Jadhav
There is no 3.Internal or 4.External precedence. Whichever stylesheet comes last in the html page which will get the precedence. Eg.
没有 3.Internal 或 4.External 优先级。html 页面中最后出现的样式表将获得优先级。例如。
<style></style>
<link> </link> <!-- Precedence -->
<link> </link>
<style></style> <!-- Precedence -->
