CSS优先,内联还是类？

Question

我的网站在标题中定义了样式表作为style.css,带有一个选择器:

.myClass {background:#000;}

现在我的div看起来像:

<div class="myClass" style="background:#fff;"> &nbsp; </div>

哪一个优先,内联或类？

Answer 1

CSS的优先顺序如下:

!important(虽然这有点像hackish但是它是覆盖内联样式的唯一方法.除非真的有必要,尽量避免使用它).示例:p {color:blue!important; }
内联,例如<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" />

引用 @godblessstrawberry：内部 `<style></style>` 和外部 `<link>` 样式表都具有相同的优先级，重要的只是顺序。 (2认同)

Answer 2

一般来说,我们可以说所有样式将按照以下规则"级联"到新的"虚拟"样式表中,其中第四个具有最高优先级:

1.浏览器默认2.外部样式表3.内部样式表(在头部分)4.内联样式(在HTML元素内)

资料来源:w3schools

W3schools解释了很多关于CSS的内容,并且还介绍了可以用CSS做的大多数事情的例子.如果您对某些事情有疑问,总是一个很好的资源.

W3Schools不是W3C.他们就是我所说的冒名顶替者. (14认同)
我不认为他们声称与w3c有关我认为他们只是在玩w3c的名字.w3c包含大量信息,但并不总是提供所有内容的示例.我使用两者,但这是你的选择. (3认同)
内部`<style></style>` 和`<link>` 外部样式表都具有相同的优先级，重要的是顺序。你可以玩这个例子 https://www.w3schools.com/css/tryit.asp?filename=trycss_howto_multiple (3认同)

Answer 3

CSS的优先顺序如下：

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开发者网络文档有那么好书面文件，这说

当多个规则应用于某个元素时，选择的规则取决于其样式特性。内联样式（在 HTML 样式属性中）具有最高的特异性，将覆盖任何选择器，其次是ID 选择器，然后是类选择器，最后是元素选择器。

因此，下面的文本颜色将是红色。

  div { color: black; }
   #orange { color: orange; }
   .green { color: green; }

 
<div id="orange" class="green" style="color: red;">This is red</div>

^{任何 HTML、CSS 或 JavaScript 知识请咨询MDN，w3school 在开发者社区中没有很好的声誉。有关此问题的更多信息，请访问w3fools。}