这是我的CSS源代码
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container {
width: 100%;
height: 100%;
background: #42455a;
}
.menu ul {
display: inline-flex;
margin: 50px;
}
.menu ul li {
list-style: none;
margin: 0 20px;
color: #b2b1b1;
cursor: pointer;
}
.logo img {
width: 30px;
margin-top: -7px;
margin-right: 48px;
}
.active {
color: #19dafa !important;
}
.search {
margin-left: 398px; /* problem in this line */
}
我有一个ul满李的，我把他们的属性设置在"。菜单ul li｛｝"类别问题是，我不希望它们都有相同的属性，我希望最后一个搜索栏一直在右边，就像这样：
"----___________-">
其中每个"-"代表李_"是介于两者之间的空间。问题是在最后一个类别中，我留下了398个像素的空白。但尽管这是最后一条指令，它仍然遵循之前的指令集。
当我使用！重要的是，它有效，但我不明白为什么我需要使用它，而假设最终指令优先？
这个问题也适用于.active类。为什么我必须使用！让它发挥作用很重要吗？如果我必须使用的话，看起来很麻烦！每当我想要在我的元素中有一个独特的属性时，这一点都很重要。
编辑：我最终找到了一个变通办法，输入：
.search {
right: 20px;
position: absolute;
}
但我的问题仍然存在。
CSS中的最终规则不具有优先权。CSS规则的各种选择器组合起来形成一个特异性数，该数决定应用哪些CSS规则。类、标记名、ID和其他元素属性都会增加规则的特异性得分——选择器越多，规则就越具体。
你把所有的特异性权重加在一起，基本上可以像4位数一样读取。例如，使用标签给出+1，而类给出+10(这并不完全准确，请参阅最后的阅读材料(。因此，.search的规则的特异性为10，因为它只是一个类，而.menu ul的规则为11，因为它是一个带有标记的类。当应用于相同的匹配元素时，.menu ul中定义的属性将优先于.search，尽管.search是最后写入的。
!important本质上就像一个布尔标志，无论特异性得分如何都能起作用。然而，具有!important标志的两个规则仍将回归到特定性。类似地，如果两个规则具有相同的特殊性，只有在时，最后一个写入的规则才会优先。
进一步阅读：
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
https://css-tricks.com/specifics-on-css-specificity/