标签: css-specificity
CSS!重要规则不会覆盖文本对齐
a {
font-size: 8pt;
text-align: left !important;
text-decoration: none;
}
.main {
text-align: center;
}
<div class="main">
<a href="#new_york_city">New York City</a><br />
<a href="#long_island">Long Island</a><br />
<a href="#upstate">Upstate New York</a><br />
</div>
这是我拥有的一个紧凑版本,对我来说,使用Firefox 5,链接仍以STILL为中心,即使我正在使用!重要的是"text-align:left".令人困惑和恼人,因为我认为!重要的是最高的特异性并超越所有其他规则.
这有什么不对？
推荐指数
解决办法
查看次数
根据选择器特异性订购CSS
我已经将给定的CSS文件/字符串解析为JSON对象,如下所示:
{
"#header": {
"color": "#000000"
},
"#header h1": {
"color": "#000"
},
"h1": {
"color": "#4fb6e5"
}
}
我现在要做的是根据Specificty重新排序.在这种情况下,#header h1应该h1在JSON对象之后,因为这是它们在浏览器中的应用方式.
我怎样才能做到这一点？这有没有现有的库？或者任何有用的库来帮助解决这个问题？
我可以使用Javascript/jQuery或PHP来执行此操作.我正在寻找实施建议,希望这已经完成了!
推荐指数
解决办法
查看次数
CSS问题 - 特异性和干扰
为什么以下代码 world是蓝色而不是红色？
特异性.my_class是0,0,1,0,但它继承了#my_id特异性更高的颜色(0,1,0,0).
HTML:
#my_id {
color: red;
}
.my_class {
color: blue;
}CSS:
<p id='my_id'>
Hello
<span class='my_class'>
world
</span>
</p>推荐指数
解决办法
查看次数
覆盖没有!important的CSS类选择器
我只是为Web应用程序编写一个javascript UI对话框.问题是用户可以为Web应用程序创建自己的主题,其中可能包括元素css选择器(h1 {...}, div {...}等),它覆盖了UI对话框的css格式.该对话框是一个div元素,它在类选择器上格式化(id不起作用,因为此对话框可能出现多次).有没有办法停止影响UI对话框的用户模板样式的元素选择器,而不必使用巨大的css重置样式并!important用于UI对话框的每个样式？如何在jQuery UI样式的UI库中出现对话框？
例如,用户主题包括:
input {color:nuts; height:bananas; width:crazy; background:morenuts; }
用户界面的CSS:
.ui_modal_wrap input {color:red; border:1px solid black;}
UI的html:
<div class="ui_modal_wrap>
<input type="text" name="#" />
</div>
问题仍然是我必须为.ui_modal_wrap使用巨大的css休息,因为你无法真正用用户可以应用的所有属性编写css(在这个例子中,高度和宽度元素仍会破坏样式,因为UI的剂量不包括高度和宽度).
推荐指数
解决办法
查看次数
如何使用CSS专门定位此元素id？
<div id=checkout>
<form id="confirmation" class="center">
<p>content</p>
</form>
</div>
我有一个CSS选择器#checkout form.center已被使用
我想特别为确认表格覆盖这一点,但我尝试写的东西都没有应用.我应该认为这#confirmation form.center或某些东西应该取代第一条规则,但它似乎甚至没有达到目标.#confirmation被上面提到的选择器覆盖,因为它不具体.
推荐指数
解决办法
查看次数
元素选择器如何比id选择器更具体？
据我所知,元素是最不具体的.(元素vs id).请帮助我一般了解选择者的特异性.
<div id="container">
<div id="firstDiv">FIRST Div inside CONTAINER</div>
<div id="secondDiv">SECOND Div inside CONTAINER</div>
</div>
body{
width: 780px;
margin: 20px auto;
}
#container > div:not(:last-of-type){
margin-bottom: 0px; /*How its more specific than ID selector below? */
}
#container {
border: 15px solid orange;
padding: 10px;
}
#firstDiv{
margin: 50px; /*This is not taking effect*/
border: 5px solid blueviolet;
}
#secondDiv{
border: 5px solid brown;
}
推荐指数
解决办法
查看次数
CSS 特异性和/或祖先的继承
我正在尝试根据它们的祖先（特别是不是父母）对一些按钮进行主题化，所以......我有以下 HTML 结构
\n\n<body class="theme-a">\n <section class="container">\n <form class="theme-b">\n <div class="button-group">\n <button type="button">Button B1</button>\n <button type="button">Button B2</button>\n </div>\n <div class="button-group">\n <button type="button">Button B3</button>\n <button type="button">Button B4</button>\n </div>\n </form>\n <form>\n <div class="button-group">\n <button type="button">Button A1</button>\n <button type="button">Button A2</button>\n </div>\n <div class="button-group">\n <button type="button">Button A3</button>\n <button type="button">Button A4</button>\n </div>\n </form>\n </section>\n</body>\n嗯，正如你所看到的，有两个.theme-a主题.theme-b
CSS 代码如下：
\n\n.theme-a {\n background: #999;\n}\n.theme-b {\n background: #555;\n}\n.theme-a button {\n background: #222;\n}\n.theme-b button {\n background: #69C;\n}\n问题是：如果您切换主题类（A 与 B，B 与 A），您会注意到 …
推荐指数
解决办法
查看次数
:not() 伪类的 CSS 特性
我有这个小 HTML：
<div id="column">
<div class="ticker">
<ul>
<li>Item 1</li>
</ul>
</div>
</div>
对于类ul外部的元素.ticker，但在#columnid内部存在此 CSS：
#column ul:not(.a):not(.b) {
margin: 1em;
}
但在.ticker课堂上，我不想要这个边距。所以我想我可以使用：
#column .ticker ul {
margin: 0;
}
也就是说，我知道第一个 CSS 选择器的特异性更高，因为有两个:not()伪类。但是为了获得更高的特异性，我也必须将:not()第二个 CSS 片段中的这两个附加到ul. 所以这有效：
#column .ticker ul:not(.c):not(.d) {
margin: 0;
}
那不是傻吗？事实上，在两个:not()伪类中使用什么并不重要。他们只需要在那里。这对我来说没有任何意义。
这只是 CSS3 的一部分，它并不完美，还是我的大脑还没有想出一个解决方案？
在这里查看它的实际效果：http : //jsfiddle.net/9BDw5/2/
推荐指数
解决办法
查看次数
"*"在CSS特异性中出现最高,为什么？
我无法理解为什么我的CSS没有根据我理解特异性规则的方式进行样式设置.根据我的整个网络(含在读这个计算器),在*(匹配一切)没有特异性,而一个元素(例如h1,h2等)已经是第四个最重要的,而一类是第三个最重要的.但这不是我在Chrome调试器中看到的.
从它的外观来看,它*已经排在最前面,然后是h5两场*比赛,然后是一场比赛.orange.不*应该追求其他一切吗？并不应该.orange赢得胜利h5？到底是怎么回事？
推荐指数
解决办法
查看次数
媒体查询为什么不覆盖普通CSS？
是否需要!important像下面的示例一样，在为网站编写的媒体查询中添加所有属性？
我的样式表底部有下面的CSS，但是我发现这些属性在添加!important标签之前无法反映我的设计。我了解使用!important标签不是最佳做法。
的CSS
.loginbar {
padding: 20px;
}
.logo {
display: inline-block;
}
@media screen and (max-width: 1042px) {
.loginbar {
padding: 10px !important;
}
.logo {
diplay: none !important;
}
}
的HTML
<div class=".logo"></div>
<div class="loginbar"><a href="#">Log In | Sign Up</a></div>
推荐指数
解决办法
查看次数
标签 统计
css ×10
css-specificity ×10
html ×2
inheritance ×2
javascript ×1
layout ×1
php ×1
pseudo-class ×1