相关疑难解决方法(0)

我在谷歌上进行了速度测试,我的CSS得分很高,成绩也很差.糟糕的成绩是由于CSS效率低下造成的.那是什么？我该如何纠正呢？

Very inefficient rules (good to fix on any page):
#menu ul ul li:first-child a:after    Tag key with 4 descendant selectors
#menu ul ul li:first-child a:hover:after    Tag key with 4 descendant selectors

最近我使用的CSS结构让HTML更清晰,但我不知道这是否有问题.

而不是使用:

.top { //properties }

.top-wrapper { //properties }

.top-logo { //properties }

对于HTML:

<div class="top">
    <div class="top-wrapper">
        <a href="" class="top-logo">Logo</a>
    </div>
</div>

我实际编码是这样的:

.top { //properties }

.top .wrapper { //properties }

.top .wrapper .logo { //properties }

对于HTML:

<div class="top">
    <div class="wrapper">
        <a href="" class="logo">Logo</a>
    </div>
</div>

这样做是不对的？

出于某种原因,我无法使用jQuery通过id检索隐藏的输入.

我可以

> $('input')
[<input type=?"checkbox" name=?"property-type" id checked>?, <input type=?"checkbox" name=?"property-type" id checked>?, <input type=?"checkbox" name=?"property-type" id>?, <input type=?"checkbox" name=?"property-type" id>?, <input type=?"hidden" name=?"no-of-rooms" id=?"1-rooms">?, <input type=?"hidden" name=?"no-of-rooms" id=?"2-rooms" checked>?, <input type=?"hidden" name=?"no-of-rooms" id=?"3-rooms" checked>?, <input type=?"hidden" name=?"no-of-rooms" id=?"4-rooms">?, <input type=?"hidden" name=?"no-of-rooms" id=?"5-rooms">?, <input type=?"hidden" name=?"no-of-rooms" id=?"over-5-rooms">?, <input type=?"checkbox" name=?"property-type" id>?, <input type=?"checkbox" name=?"property-type" id>?, <input type=?"checkbox" name=?"property-type" id>?]

它可以很好地获取页面上的所有输入,包括type = hidden.

我也可以

> $('input[type="hidden"]')
[<input type=?"hidden" name=?"no-of-rooms" id=?"1-rooms">?, <input type=?"hidden" name=?"no-of-rooms" id=?"2-rooms" checked>?, <input type=?"hidden" name=?"no-of-rooms" id=?"3-rooms" checked>?, …

在为特定元素定义CSS 时,如果我们在讨论网页的速度/准确性/处理时指定精确路径会有什么不同吗？

例如,如果我只在表格的第3列中输入文本,这对于速度,准确度,处理和其他参数更好？

选项1:

table input[type="text"]
{
    background:yellow;
}

方案2:

table td:nth-child(3) input[type="text"]
{
    background:yellow;
}

据我所知,CSS选择器从右到左进行评估,因此body div *会选择每个项目,而不是具有div类型的父项和具有body类型父项的项目.我不确定的是如何在这个链中评估动态伪类.

如果我有一个选择器div *:hover,评估会如何？

1. :hover=> *=>div
2. *=> :hover=>div
3. 另一个我没想到的解决方案

如果我指定了以下jQuery选择器:

$("div#myDivId .myClass")

确切的选择顺序是什么？这将首先选择一个带有ID的div,myDivId然后在其中找到所有元素,myClass或者首先选择所有元素,myClass然后过滤掉不在里面的其余元素myDivId.

我对nth-of-type选择器如何与兄弟选择器一起工作感到困惑.在下面的例子中,我希望方块3,4和5是红色的,但它们不是..bar ~ div:nth-of-type(-n+3)下面的选择器如何选择元素？

如果我想.bar在正确的选择器之后获得前三个元素呢？

.foo {
  background-color: blue;
  color: white;
  width: 50px;
  height: 50px;
  display: inline-block;
  border: solid 1px black;
}
.bar {
  background: green;
}
.bar ~ div {
  background-color: orange;
}
.bar ~ div:nth-of-type(-n+3) {
  background-color: red;
}

<div>
  <div class="foo">0</div>
  <div class="foo">1</div>
  <div class="foo bar">2</div>
  <div class="foo">3</div>
  <div class="foo">4</div>
  <div class="foo">5</div>
  <div class="foo">6</div>
  <div class="foo">7</div>
</div>

每个人都说,* { ... }选择器很慢.但它到底有多慢？

我总是尽量避免它,但有时它非常有用.例如:* + h1 { margin-top 1em; }

这三个操作都在执行相同的操作.谁能解释不同表现的原因？

console.time('first');
for(guid in ALLGUID){   
   $('.'+guid).find('.cell-taskname').find('.cell-text').text()
}
console.timeEnd('first');

console.time('second');
for(guid in ALLGUID){
 $('.'+guid).find('.cell-taskname .cell-text').text()
}
console.timeEnd('second');

console.time('third');
for(guid in ALLGUID){
 $('.'+guid+' .cell-taskname .cell-text').text()
}
console.timeEnd('third');

第一:~3500.000ms

第二:~3700.000ms

第三:~38000.000ms(是的,它是38秒.)

场景说明:我有很大的表,我正在迭代所有表行.这里Guid是表行的唯一键和类名.cell-taskname是table-row的每个第一列中的div,而.cell-text是包含text的span.

我可以使用子组合器编写CSS选择器,>或者只是指示任何后代的空格.例如,我有这个HTML代码:

<span id='test'>
    <a href="#">Hello</a>
</span>

我可以用以下两种方式编写CSS代码:

#test > a {
    ...
}

要么

#test a {
    ...
}

编写以下CSS代码的最佳方法是什么？