相关疑难解决方法(0)

如果我想增加规则的CSS特性,我倾向于加上前缀html,但我想知道是否有更简洁的方法来做到这一点？

(这可能看起来像一个微不足道的问题,但在我定义响应网格的样式表的过程中,通过单个字符减少特异性前缀将节省几百个字节)

我有一张简单的桌子

<tr>
     <td class="first">I am the first</td>
     <td class="second">You are the second</td>
     <td class="third">He is third</td>
     <td class="fourth">Someone else is fourth</td>
     <td class="fifth">That guy is fifht</td>
     <td class="sixth">Who care's about sixth</td>
</tr>

我想在td中的某些类上应用css规则.我可以写一些像 -

td.first, td.fourth, td.fifth
{
    color:purple;
}

这有效.或者我可以使用课程.我想知道在这种情况下是否有任何有效/更好的方法来编写选择器.

我关注的是:浏览器是否会查找所有类,然后搜索每个逗号分隔的td.这意味着它将找到所有三个类,然后评估标记.是否有任何方式浏览器将找到所有三个类,然后匹配标记而不是使用单个类.

我一直相信(虽然我现在怀疑这些信念的有效性):

div.name

速度比:

.name

但是我最近读到大多数CSS选择器引擎从右到左读取,在这种情况下第一个例子实际上不会更慢？因为选择器引擎会简单地找到每个具有一个名称类的元素,然后必须识别哪些是divs？

CSS选择器引擎通常以哪种方式读取？从左到右还是从右到左？如果他们一般从右到左阅读,有人可以请我解释为什么(我看不出在选择引擎方面从右到左阅读是否有意义)？

我的主要目标是尝试根据特异性重新排序CSS样式块.我之前从SO那里得到了帮助,我设法产生了这个功能.见要点.

这是一个例子:

function specificity($selector){
// https://gist.github.com/2774085
}

$compare = function($a, $b) use ($specificity) {
    return $specificity($a) - $specificity($b)
};

$array = css_array();

uksort($array, $compare);

以上一直很有效,直到我遇到这个CSS:

html, body, body div{
    background: transparent;
}
body {
    background-color: #D96F02;
}

这被重新排序到这个:

body { // 1 point
    background-color: #D96F02;
}
html, body, body div{ // 4 points
    background: transparent;
}

但是,这不是浏览器应用CSS的方式.

我认为我的特异性功能可能缺少CSS顺序的重要性而不是基于选择器特异性的排序？这是真的？

更新

我认为我应该做的是在我的比较函数中,我应该总是添加额外的说法,10因为特异性不仅仅基于选择器,它也基于选择器的顺序.所以像这样:

 $compare = function($a, $b) use ($specificity) {
        return ($specificity($a) + 10) - $specificity($b)
    }; …

如果我知道一个特定的类只会用在div或p上,那么通过指定div.class或p.class而不仅仅是.class,对性能是否有最轻微的影响？

我想知道在以下场景中有效的算法是什么:

给出一组解析的css规则,例如.

     p.pStyle{margin-bottom:20px;font-family:Arial;}
     p{font-family:Verdana;}
     p.anotherPStyle{margin-bottom:10px;}

从css样式表中,有几个规则集可能适用于给定元素(比如<p class="pStyle anotherPStyle">hello</p>我的文档中的a).

我需要首先确定样式表中的哪些规则适用于给定元素(所以就是这样p, pStyle and anotherPStyle),然后创建一个能够按特定性(从最具体到最常规)对适用规则进行排序的比较器.注意:我已经设计了一个算法,一旦排序就应用规则,因此您无需有效地解决该问题.

我一直在玩弄几个想法,即涉及确定给定规则特定的DOM树中的级别的想法......虽然我不确定这是否是正确的方法？

浏览器引擎如何有效地执行此操作？我希望用Java复制它,但我对许多其他语言很满意,所以你能提供的任何代码都是最受欢迎的.

谢谢

这仅仅是一个关于良好实践的概念性问题.

问题很简单.是否有任何"正确"的方式来订购jQuery/CSS选择器的部分？例如,假设我有一个具有以下属性的元素:

<div class="red green blue" id="someDiv" anAttr="something">

为了更好地衡量,我们也会在它被徘徊时瞄准它.

以下选择器之间有什么区别吗？:

div.red.green.blue#someDiv[anAttr='something']:hover
div#someDiv.red.green.blue[anAttr='something']:hover
div.red#someDiv[anAttr='something']:hover.blue.green
div[anAttr='something'].blue:hover#someDiv.red.green

意思是,目标的顺序是否重要,真的吗？或者我可以把它们放在任何 - 我想要的顺序？

根据这个JSFiddle,他们都在技术上工作.

我的问题与DOM解析被触发有关,我想知道为什么使用CSS ID选择器比使用Class选择器更快.什么时候必须再次解析DOM树,以及我应该使用什么技巧和性能增强...也有人告诉我,如果我做了类似的事情

var $p = $("p");  
$p.css("color", "blue"); 
$p.text("Text changed!");

代替

$("p").css("color", "blue");  
$("p").text("Text changed!"); 

提高性能,这适用于所有浏览器吗？另外我如何知道我的DOM树是否已被重新解析？

鉴于CSS处理细节,最值得注意的是RTL匹配和选择器效率,如何从渲染引擎性能的角度纯粹编写选择器？

这应该涵盖一般方面,包括使用或避免伪类,伪元素和关系选择器.

我一直在阅读很多CSS性能文章,比如;

• 有效地渲染CSS
• 编写高效的CSS选择器
• 编写高效的CSS

我明白为什么像这样的选择器是坏的

#social a {
}

由于浏览器将读取一个,然后再通过所有的强制循环<A>在网页的代码.

但是为什么选择器如[title ="home"]比使用类慢？

我假设浏览器创建某种索引,以便能够找出哪些元素具有某个类(正确？).

但是浏览器是否也应该索引哪些元素具有某种属性？(如标题)？

我的问题是 ; 与使用类相比,使用 诸如[title ="home"]之类的选择器时,为什么CSS /元素看起来更慢？浏览器的行为是什么或如何使结果变得如此慢？