如果id的权重高于class，那么为什么class c2样式优先于id指定的div样式？
.c2 {
color: red;
}
#id1 {
color: blue;
}<ol id="id1">
<li class="c2">test</li>
<li class="c3">test2</li>
</ol>
答案 0 :(得分：3)
虽然ID选择器确实提供了比CSS中的类选择器更多的 specificity ，但这实际上并不是这里发生的事情，因为这两个规则并不针对同一个元素。你实际处理的是一个类选择器，它针对一个元素而不是一个inherited的样式。
/* all */
body {
position: relative;
font-family: 'Slabo', serif;
font-size: 20px;
letter-spacing: 0.5px;
}
h3 {
font-family: 'Oswald', sans-serif;
font-size: 40px;
letter-spacing: 2px;
}
.container {
background-color: rgb(255, 255, 255);
}
.backgroundColor {
background-color: rgb(163, 167, 168);
}
.anchor {
position: relative;
top: -46px; /* this was added for navbar room after clicking on nav links */
}
/* navbar section */
.navbar {
background-color: white;
padding: 0;
}
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav
.nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-
light .navbar-nav .show>.nav-link {
background-color: rgb(163, 167, 168);
color: white;
}
/* about section */
.one {
text-align: center;
border-bottom: 1px solid gray;
margin-top: 46px; /* added here or navbar will be over profile
picture MUST MATCH .ANCHOR */
}
.profpic {
border-radius: 50%;
margin-top: 30px;
margin: 30px auto 0px auto;
}
.description {
margin: 30px auto;
}
/* portfolio section */
.two {
text-align: center;
}
.titleport {
padding: 30px 0px;
margin: 0px;
}
p.secondPara {
margin-bottom: 30px;
}
.three {
border-bottom: 1px solid gray;
padding-bottom: 25px;
}
.img-section1, .img-section2, .img-section3, .img-section4 {
text-align: center;
}
img {
border-radius: 5%;
}
figure {
margin: 0px;
}
figcaption {
margin: 5px 0px;
}
/* contact section */
.titlecontact {
padding: 30px 0px;
text-align: center;
margin: 0px;
}
.contactme {
text-align: center;
font-style: italic;
margin: 0px;
}
a {
color: inherit;
transition: all 0.5s;
-webkit-transition: all.5s;
-moz-transition: all 0.5s;
}
a:hover {
color: rgb(1, 193, 213);
text-decoration: none;
}
.iconContainer {
text-align: center;
margin: 30px 0;
}
a.icons {
text-decoration: none;
margin: 10px;
}
没有直接定位它的规则，但是继承了.c3的父颜色，因此它是蓝色的。相反，#id1继承父颜色，然后将类选择器应用于它，覆盖继承，并使其变为红色：
.c2.c2 {
color: red;
}
#id1 {
color: blue;
}
继承font-family和color是有意义的，因为通过将font-family应用于元素，您可以轻松设置站点范围的基本字体;然后，您可以根据需要覆盖各个元素上的字体。必须在每个元素上单独设置基本字体真的很烦人。
如果您想使用<div id="id1">
<li class="c2">test</li>
<li class="c3">test2</li>
</div>：
color: initial#id1 {
color: blue;
}
.c2 {
color: red;
}
.c3 {
color: initial;
}
希望这有帮助！ ：）