标签: css-specificity

如何在JS函数中基于CSS特异性对一组CSS选择器进行排序？

function SortByCssSpecificity(input_array_of_css_selectors) {
  ...
  return sorted_array_of_css_selectors;
}

我在这里看过类似的问题,但我没有找到一个特别的问题.

如果我正确阅读了这篇文章:http://css-tricks.com/specifics-on-css-specificity/

那么发生的事对我来说没有意义.有人可以解释这是因为地点,遗传或特异性吗？我已经剥离了所有无关的CSS.

CSS

a:link {font-size:0.875em;color:#005984}
.button {color:#fff}

HTML

<a class="button">Awesome call to action</a>

我最终得到一个蓝色文字的按钮,而不是白色.现在,a是一个元素,所以它应该比.button类具有更低的特异性,如果不是的话？

谢谢你的时间.

我的问题应该是相当紧张的.出于某种原因,我今天无法绕过它.

我正在制作一个像这样结构的菜单

<div class="wrapper">
    <ul>
        <li class="menu-item"><a href="#">Menu Item</a>
            <div class="inner">
                <a href="#">Login</a> 
            </div>
        </li>
    </ul>
</div>

我试图使用以下css选择器来定位登录链接:

.inner a{}

选择器正在工作,但是以下选择器正在使用css,并覆盖上面的选择器:

li.menu-item a{}

我完全不知所措.为什么第二个选择器会优先考虑第一个？你们怎么建议我瞄准上面的"a"元素？

对于文件:

<h1>Section 1</h1>
<p>I came after a h1 and should be red.</p>
<p>I came after a h1 and should be red.</p>

<h2>Section 2</h2>
<p>I came after a h2 and should be green.</p>
<p>I came after a h2 and should be green.</p>

<h1>Section 3</h1>
<p>I should be the same color as the section one text?</p>
<p>I should be the same color as the section one text?</p>

我尝试了它的风格:

h1 ~ p {
    color: red;
}

h2 ~ p {
    color: green;
} …

我有一个非常糟糕的CSS规则(高特殊性,使用!important),它设置段落中文本的颜色:

 #wrapper .article .text {
  color: green !important;
}

然后我在该段落中放入一个简单的span元素,并通过简单的类设置span文本的颜色:

.black {
  font-weight: bold;
  color: black;
}

为什么这个具有低特异性且没有!important标志的简单类会覆盖父规则？

codepen.io上的完整代码片段:http://codepen.io/Jarino/pen/oXYeQZ？editors = 110

1)  #divID input[type='text']
    {
       height:30px;
    }

2)  #divID .ClassName
    {
       height:40px;
    }

对于div中的文本框,我定义了上面的样式.2比1更具体,但渲染高度为30px.它是如何工作的？

我试图通过考虑内联样式和类样式来确定哪种样式适用于元素。Javascript 将这两者解析为对象，但未设置的样式是空字符串，而不是undefined. 如果“空”样式（例如width:;）没有任何效果，无论规则多么具体，那么我的目标就微不足道了。

但是，为了display:none动态覆盖默认规则，我知道这是document.getElementById('ele').style.display = '';可行的，虽然我知道它实际上并没有添加display内联样式，但在 CSS 中设置为空时是否有任何样式确实有效？如果是这种情况，我必须手动解析样式和样式表字符串以查看该属性是否已定义。

在浏览器中查看下面的代码时,背景为白色.通用选择器*具有最低的特异性,body选择器位于通用选择器之后.它不应该是灰色的吗？

* {
    background-color: white;
}

body {
    background-color: grey;
}

我有这样一个元素:

#idname{
  border: 2px solid black;
}

.classname{
  border: 2px solid gray;
}

<div id = "idname" class="classname">it is a test</div>

我想给它的CSS类而不是CSS id赋予更大的优先级.可能吗？(换句话说,我想将gray-color 设置为border)

我的 h1 都为红色背景色。对于第一个 h1，ID 具有最高优先级，对于第二个 h1，内联具有最高优先级。为什么？

#myid      { background-color: pink; }
.main h1   { background-color: red; }
div h1     { background-color: blue; }
h1         { background-color: green; }

<!-- the background-color expected 
     to be pink for the following h1 -->
<div class="main" id="myid"> 
    <h1>This is paragraph one!</h1>
</div>
        
<!-- the background-color expected 
     to be brown for the following h1 -->
<div style="background-color:brown;" class="main" > 
    <h1>This is paragraph two!</h1>
</div>