标签: css-specificity

我正在研究一些 CSS，从阅读中可以看到一些没有特异性的伪类，例如where()和not()。还有更多吗？

我正在创建一个联系表单,该表单将包含在几个不同的站点上.

联系表格的样式和网站的样式都将包含在内,我无法很好地预测网站的样式.我希望联系表单的样式很容易被网站的样式所覆盖,但我不希望联系表单的样式被意外地过度统治.

例如,如果站点开发人员想要更改提交按钮的颜色,则应该可以在不使用!important或某些特定#id #id element .class #id element.class类型的选择器的情况下轻松完成.

但是,另一方面,如果网站开发人员使用选择器编写样式,input { background: yellow; }或者#site-wrapper input { background: yellow; }我不希望它过度规则我的联系表单样式引用类,.contact_input { background: white; }

所以我的问题是,在这种情况下最佳做法是什么？我正在考虑在我的表单上添加一个ID并将其添加到每个选择器,因此我的选择器将成为#contactform .contact_input { background: white; }我认为这将有助于避免冲突,但我想知道是否有更好的方法来做到这一点,因为这在页面渲染方面似乎有点无效.也许这不是什么大不了的事,但我只是想把它扔出去看看人们的想法.

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如何确定何时应用一种样式而不是另一种样式？

我已经通过W3 CSS3选择器文档了几次,这帮助我理解了如何在jQuery中更好地使用CSS选择器,但它并没有真正帮助我理解何时将一个CSS规则应用于另一个CSS规则.

我有以下HTML:

<div class='item'>
    <a>Link 1</a>
    <a class='special'>Link 2</a>
</div>

我有以下CSS:

.item a {
    text-decoration: none;
    color: black;
    font-weight: bold;
    font-size: 1em;
}

.special {
    text-decoration: underline;
    color: red;
    font-weight: normal;
    font-size: 2em;
}

鉴于上述情况,链接1和链接2的样式将相同,由.item aCSS 确定.为什么与.special链接2不相关的样式不优先？

显然,我可以像这样绕过它:

.special {
    text-decoration: underline !important;
    color: red !important;
    font-weight: normal !important;
    font-size: 1em !important;
}

但是,我觉得这是一个由于我缺乏理解而无法进行的黑客攻击.

我已经将给定的CSS文件/字符串解析为JSON对象,如下所示:

{
    "#header": {
        "color": "#000000"
    },
    "#header h1": {
        "color": "#000"
    },
    "h1": {
        "color": "#4fb6e5"
    }
}

我现在要做的是根据Specificty重新排序.在这种情况下,#header h1应该h1在JSON对象之后,因为这是它们在浏览器中的应用方式.

我怎样才能做到这一点？这有没有现有的库？或者任何有用的库来帮助解决这个问题？

我可以使用Javascript/jQuery或PHP来执行此操作.我正在寻找实施建议,希望这已经完成了!

我从本教程中了解了选择器优先级.在一个案例中,我无法理解这种行为.我有一个HTML元素:

<input class="top_bar_login_form_input" type="text"  name="email" placeholder="Prijavno ime">

问题是来自另一个选择器的属性会覆盖该类的属性.

如上图所示,类被一个不太具体的选择器覆盖.选择元素input[type="text"],其特定程度低于类.我看到这些行为背后的唯一原因是.inputbox,即使它与元素不匹配,也会在确定优先级时计算类.

为什么类型选择器会覆盖类选择器？

Bootstrap有一种table {border-collapse: collapse; border-spacing:0;}风格.我想覆盖它,所以我创建了一个类并将其应用于有问题的表:

table.FormGroupContainer
{
    border-collapse: separate;
    border-spacing: 2px;
}

但仍然边界仍然崩溃.Chrome元素检查器显示Bootstrap CSS已被覆盖,但只允许检查器中的样式禁用边框间距.我在IE 11和Firefox 31.0中观察到了这一点.内联样式也会显示为覆盖(如Chrome检查器中所示),但在禁用Bootstrap样式之前无效.

CSS加载顺序似乎没有任何区别. 是什么赋予了？是不是班级更高的特异性？

我正在尝试修改我的HTML,JavaScript和CSS3考试; 我对CSS选择器有点困惑,并且优先考虑.

我有以下CSS:

table                   { border: 1px solid black; }
tr:nth-child(odd)       { background-color: red; }
tr td:nth-of-type(even) { background-color: blue; }
td                      { background-color: green; }

我认为无论最后出现什么都是优先考虑的,所以在我看来,表格中的所有单元格都是绿色的.

然而,根据第n个类型选择器,偶数单元格仍为蓝色.即使我将它放在顶部并移除绿色td线,蓝色仍然显示在中间,只有奇数单元格显示为红色.

有人可以解释为什么nth-of-type似乎先于其他一切？

这是一个例子:

table { border: 1px solid black; }
tr:nth-child(odd) { background-color: red; }
tr td:nth-of-type(even) { background-color: blue; }
td { background-color: green; }

<table style="width: 100%;">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

https://jsfiddle.net/e6157xwz/

例如,为标准输入样式,我写了类似的东西:

input:not([type="checkbox"]):not([type="radio"]) {
    background-color: blue;
}

然而,这会增加特异性,所以如果我想使用类来覆盖它,我必须做类似的事情:

.red.red.red {
    background-color: red;
}

有没有办法在不改变功能的情况下降低原始输入选择器的特异性？

所以我在一个div类中有一个项目列表,book-select而li我的无序列表中的一个列表中有一个类selected.根据我定义的CSS规则,其中li的s div具有背景颜色skyblue,而li选择了类的那个则是steelblue.

问题是book-select类正在覆盖所选的类,我不明白.div类不会比选择类的li更具体吗？li是在div中的ul.

这是相关的CSS和HTML:

.book-select li {
    font-size: 0.75em;
    text-align: center;
    list-style: none;
    background: skyblue;
    width: 25%;
    margin: auto;
}

.selected {
    background: steelblue;
}

<div class="book-select">
    <h2>Pick a book:</h2>
    <ul>
        <li>Set A Volume 1, Course Foundation</li>
        <li>Set A Volume 2, Expeditionary Airman</li>
        <li>Set A Volume 3, Professional Airman</li>
        <li>Set B Volume 1, Supervisory Communicator</li>
        <li>Set B Volume 2, Supervisor of Airmen</li>
        <li …