我已经在一个网站上工作了几个月,很多时候我一直在尝试编辑某些东西,我必须使用!important,例如:
div.myDiv {
width: 400px !important;
}
为了使其按预期显示.这是不好的做法吗？或者!important命令可以使用吗？这会导致任何不希望的事情进一步下线吗？
研究特异性我偶然发现了这个博客 - http://www.htmldog.com/guides/cssadvanced/specificity/
它指出特异性是CSS的点评系统.它告诉我们元素值1分,类值10分,ID值100分.它也是最重要的说这些点总计,总量是选择器的特异性.
例如:
body = 1 point
body .wrapper = 11 points
body .wrapper #container = 111 points
因此,使用这些点肯定会使以下CSS和HTML导致文本为蓝色:
CSS:
#a {
color: red;
}
.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o {
color: blue;
}HTML:
<div class="a">
<div class="b">
<div class="c">
<div class="d">
<div class="e">
<div class="f">
<div class="g">
<div class="h">
<div class="i">
<div class="j">
<div class="k">
<div class="l">
<div class="m">
<div class="n">
<div class="o" id="a">
This should …如果你有
<div style="display: none !important;"></div>
有没有办法在样式表中覆盖它以使其显示？
最好使用与此类似的东西:
div { display: block !important; }
我想改变☰颜色.
HTML:
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
<span class="sr-only">Toggle menu navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
我尝试了各种各样的东西(看起来吼叫)但没有任何作用
CSS:
.icon-bar {
color: black;
border-color: black;
background-color: black;
}
这是一个很长的镜头,但有没有一个工具可以通过删除不需要的特异性来优化CSS选择器？
我发现当我编写CSS时,我故意让我的选择器比必要的更具体,以避免冲突和准文档.
如果有一个工具可以分析给定的一组规则,确定它们与其他规则重叠的"唯一性",然后去除任何不必要的特异性,那将是很好的.
我甚至无法想象一个工具开发人员如何处理所需的所有场景,但我之前被其他人的聪明才智所震撼,并认为值得一提.
更新:
我已经为这个问题添加了一笔赏金,我越是想到它,我就越意识到CSS特异性过滤器的价值.
例如,在Sass和LESS中使用嵌套规则/选择器时,过度嵌套是一种常见且众所周知的反模式,很容易导致过度特定的选择器.
在优秀的TutsPlus课程中有一个很好的例子,可以使用Sass和Compass维护CSS:
body {
div.container {
p {
a {
color: purple;
}
}
}
}
Sass将遵循这些嵌套指令并生成以下CSS输出,不反对任何不需要的特性:
body div.container p a {
color: purple;
}
但是,如果特异性过滤器存在/确实存在,它将为CSS开发人员创造潜在的好处:
您可以将样式表组织为DOM的1:1映射,类似于在Firebug和Chrome开发工具中检查样式规则时所看到的内容.智能编辑器/ IDE可以使用共享样式/类自动填充DOM元素的样式.当然,这种冗余将由特异性过滤器/优化器过滤掉.
样式表可以通过扫描DOM并将其转换为CSS选择器/规则的工具预先填充其结构.这意味着开发人员只需要更新HTML; CSS"树"将保持同步以反映DOM的当前状态.智能编辑器可以让您跳转到元素/类的CSS定义以进行样式化 - 甚至可以在单独的面板中显示其样式规则.
在某种程度上,这几乎看起来是一个倒退 - 就像你在Dreamweaver或WebAssist中找到的功能,以帮助新手学习CSS.但是CSS选择器优化工具的基本思想似乎没什么好处,我所描述的工作流自动化类型将是合乎逻辑的下一步 - 催化剂将是特异性过滤器.
我研究了一些比较知名的CSS编辑器和Web IDE,但除了针对单个元素并为其生成选择器之外,还没有发现任何提供此类功能的东西.
更新2:CSS选择器性能
在回应Spliff的评论时,这里有两篇关于CSS选择器性能的精彩文章:
两人都认为微优化CSS不值得努力,但过度合格的后代选择器是"效率灾难".我还没有对自己进行基准测试,但怀疑我建议采用的那种"DOM Mapping"方法会在没有优化步骤的情况下导致性能下降,无论是手动还是自动化.
相关问题,链接和工具:
我正在重新设计我的博客,其中考虑了响应式网页设计,以及"移动优先"方法 - 简而言之,我正在尝试使用min-width来避免任何类型的复制或css ..没有显示:无等等.
我的问题是,当我确实需要覆盖CSS值时,较低的最小宽度优先.例:
@media only screen and (min-width: 600px) {
h2 { font-size: 2.2em; }
}
@media only screen and (min-width: 320px) {
h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; }
}
我期待当我在600px及以上的分辨率下得到2.2em h2,但我得到1.7em ..在我的开发工具中,我看到2.2em声明在那里,但另一个优先.这没有意义!
我可以继续使用最小宽度并有效地覆盖较高分辨率的声明而不使用更强的选择器或最大宽度..？
我已经读过css技巧:不应该添加额外的特异性.但它看起来像吗？
https://css-tricks.com/almanac/selectors/n/not/
非伪类的特殊性是其论证的特殊性.与其他伪类不同,:not()伪类不会添加到选择器特性.
或者我错过了什么？
.red:not(.blue) {
background: blue;
}
.red {
height: 100px;
width: 100px;
background: red;
}<div class="red">
</div>我今天遇到问题后,对CSS类的优先级有疑问.情况如下:
我有一个无序列表,其中有一个与之关联的类.该LI标签具有定义得太一些风格.我想LI在点击后更改s 的样式(通过添加的"selected"类),但是从不应用添加的类的样式.这是正常的行为还是这个代码应该有效？
CSS:
.dynamicList
{
list-style: none;
}
.dynamicList li
{
display: block;
width: 400px;
height: 55px;
padding: 10px 10px 10px 10px;
border: 1px solid #000;
background-color: #ff0000;
}
.selectedItem
{
background-color: #0000ff;
}
HTML:
<ul class="dynamicList">
<li>First Item</li>
<li class="selectedItem">Second (Selected) Item</li>
</ul>
"selected"列表项的背景颜色不会更改.如果我不将样式应用于LI元素,但是创建另一个类并将其应用于所有列表项以使其读取,则也是如此.
<li class="listitem selectedItem">xxxx</li>
鉴于定义颜色属性的两类具有相同的特异性,我认为元素类属性中列出的最后一个类优先.
来自http://htmlhelp.com/reference/css/structure.html:
规范顺序为了方便起见,当两个规则具有相同的权重时,指定的最后一个规则获胜.
在下面的真空代码示例中,定义类规则集的顺序决定了优先级.这里最后一个或最近的类规则集定义优先.
<style>
.makeBlue {color: blue;}
.makeGreen {color:green;}
</style>
<div>
<p class="makeGreen makeBlue">makeGreen makeBlue</p>
<p class="makeBlue makeGreen">makeBlue makeGreen</p>
</div>
输出文本为绿色.
如果我交换了类声明的顺序,并首先声明.makeGreen
<style>
.makeGreen {color:green;}
.makeBlue {color: blue;}
</style>
<div>
<p class="makeGreen makeBlue">makeGreen makeBlue</p>
<p class="makeBlue makeGreen">makeBlue makeGreen</p>
</div>
输出文本为蓝色.
我以前从未注意过这一点.编辑我认为编辑元素类属性中列出的最后一个类优先.
编辑 澄清 - >我有时会想到一个元素作为宠物,让我们说一只狗.我看到在元素的class属性中添加一个类作为发出dog命令.如果我告诉它坐下,然后告诉它躺下,我希望狗躺下.我不认为这只狗会保持坐着,因为我教它如何坐下(最近比)我教它如何躺下.
所以...两个问题.
非常感谢!