相关疑难解决方法(0)

为什么我的jQuery:not()选择器不在CSS中工作?

我有这个布局:

<div id="sectors">
    <h1>Sectors</h1>
    <div id="s7-1103" class="alpha"></div>
    <div id="s8-1104" class="alpha"></div>
    <div id="s1-7605" class="beta"></div>
    <div id="s0-7479"></div>
    <div id="s2-6528" class="gamma"></div>
    <div id="s0-4444"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

使用这些CSS规则:

#sectors {
    width: 584px;
    background-color: #ffd;
    margin: 1.5em;
    border: 4px dashed #000;
    padding: 16px;
    overflow: auto;
}

#sectors > h1 {
    font-size: 2em;
    font-weight: bold;
    text-align: center;
}

#sectors > div {
    float: left;
    position: relative;
    width: 180px;
    height: 240px;
    margin: 16px 0 0 16px;
    border-style: solid;
    border-width: 2px;
}

#sectors > div::after {
    display: block;
    position: absolute; …
Run Code Online (Sandbox Code Playgroud)

css jquery css-selectors css3 jquery-selectors

57
推荐指数
1
解决办法
1万
查看次数

CSS有一个:模糊选择器(伪类)?

我知道有一个:focus选择器.我似乎无法找到:blur选择器的使用或文档.有吗?

css css-selectors pseudo-class

53
推荐指数
2
解决办法
7万
查看次数

为什么函数伪如:not()和:has()允许引用参数?

显然,正如我在评论另一个答案时发现的那样,jQuery(而不是它的底层选择器引擎Sizzle)允许你将参数引用到:not()选择器和:has()选择器.:

$('div:not("span")')
$('span:has("span")')
Run Code Online (Sandbox Code Playgroud)

Selectors标准中,引号始终代表字符串,而不是选择器或关键字,因此引用参数:not()始终无效.这在选择器4中不会改变.

您还可以通过添加不受支持的CSS选择:nth-last-child(1) 器来查看它是非标准语法,例如导致选择器完全失败:

$('div:not("span"):nth-last-child(1)')
$('span:has("span"):nth-last-child(1)')
Run Code Online (Sandbox Code Playgroud)

在这里允许报价是否有任何理由,技术或其他方面?想到的唯一可能性是:

  • 一致性:contains()允许引用和不引用的参数,如旧的选择器规范中所示.除了:contains()接受字符串/关键字,而不是选择器...

  • 与自定义伪使用的实现保持一致$.expr[':'],始终允许引用和不引用的参数.

  • 一致性和易用性移植到他们的方法同行.not().has()(只是删除或拆分外报价和改变冒号期?).

但我找不到任何支持或反对它们的消息来源.实际上,引用选择器参数本身的能力也没有在任何地方记录,引用和引用参数之间似乎没有任何区别:

$('div:not(span)')
$('span:has(span)')
Run Code Online (Sandbox Code Playgroud)

javascript jquery jquery-selectors sizzle

32
推荐指数
1
解决办法
1083
查看次数

我可以强制jQuery使用Sizzle来评估选择器而不使用非标准选择器吗?

在现代浏览器中,document.querySelectorAll()当使用有效的CSS选择器时,jQuery会利用它来提高性能.如果浏览器不支持选择器或document.querySelectorAll()方法,它会回退到Sizzle .

但是,在调试自定义选择器时,我总是希望使用Sizzle而不是本机实现.也就是说,我试图想出的实现:nth-last-child(),不受jQuery的支持CSS3选择之一.由于现代浏览器本身支持此选择器,因此它的工作方式与链接问题相同.正是这种行为干扰了调试我的自定义选择器,所以我想避免它.

我可以使用的一个便宜的黑客是放入一个非标准的jQuery选择器扩展,从而可以说"使选择器无效".例如,假设每个li:nth-last-child(2)都是可见的,我可以简单地将其删除,转为:

$('li:nth-last-child(2)').css('color', 'red');
Run Code Online (Sandbox Code Playgroud)

进入:

$('li:nth-last-child(2):visible').css('color', 'red');
Run Code Online (Sandbox Code Playgroud)

这导致它总是由Sizzle评估.除此之外,这要求我假设我的页面元素可能是也可能不是.我真的不喜欢那样.更不用说,除非绝对必要,否则我不喜欢使用非标准选择器.

有没有办法document.querySelectorAll()在支持它的浏览器中跳过本机方法并强制jQuery使用Sizzle来评估选择器,最好使用非标准选择器?可能,这需要调用另一种方法而不是$(),但它比选择器黑客IMO要好得多.

javascript jquery jquery-selectors sizzle

7
推荐指数
1
解决办法
969
查看次数

使用 css 选择器解析节点中的 html 字符串?

我正在 node.js 中编写一个刮板。是否有一个模块可以让我使用 css 选择器?

css-selectors node.js npm

4
推荐指数
1
解决办法
7664
查看次数

有什么区别:jQuery中的last和:last-of-type?

请看这个图像:

在此输入图像描述

有人可以解释这个区别吗?

编辑

让我指出让我困惑的是什么.请注意:

  1. $row.is('tr.items:last') === false
  2. $row[0].id === $('tr.items:last')[0].id

这两个陈述似乎相互矛盾.第一个告诉我们这$row不是最后一个tr.items.但第二个告诉我$row的确是$('tr.items:last'),即最后一个tr.items.

:last-of-type选择器不会出现这种情况.

这里发生了什么?

jquery

3
推荐指数
1
解决办法
866
查看次数

伪造CSS:IE8中使用jQuery/JavaScript的only-child

我有一个菜单:only-child选择器,以便我可以指示子菜单.:后选择器在IE8中运行(我必须支持的唯一旧的IE版本),但是:only-child选择器没有,所以我在每个菜单项上都得到一个箭头,而不仅仅是带有子菜单的箭头.

.menu li > a:after { content: ' ?'; }
.menu li > a:only-child:after { content: ''; }
Run Code Online (Sandbox Code Playgroud)

我想要的是使用jQuery或JavaScript实现这一目标.我不想使用Modernizr或Selectivizr以及所有这些东西,只需要一个代码作为only-child的替代品.

如果你能帮助我,我真的很感激.对于jQuery和JavaScript,我是新手,所以请详细解释.谢谢!

javascript css jquery css-selectors internet-explorer-8

3
推荐指数
1
解决办法
941
查看次数

如何在jQuery中选择一组多个匹配元素中除第一个之外的所有元素?

它必须迟到......鉴于以下HTML,除了每个段落中的第一段之外,如何选择所有段落div.thePost

我试过了:

$('.thePost').children('p:gt(0)')
Run Code Online (Sandbox Code Playgroud)

$('.thePost p:gt(0)')
Run Code Online (Sandbox Code Playgroud)

$('.thePost > p:gt(0)')
Run Code Online (Sandbox Code Playgroud)

所有这些都适用于第一个,div.thePost但最终选择<p>任何其他div中的所有其他标签与类thePost.

<div id="contentmiddle">

<div class="thePost">

  <h1>...</h1>

  <h3>...</h3>

  <span>...</span> 

  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>

</div><!-- /thePost -->

<div class="thePost">

  <h1>...</h1>

  <h3>...</h3>

  <span>...</span> 

  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>

</div><!-- /thePost -->

</div>?<!-- /contentmiddle -->
Run Code Online (Sandbox Code Playgroud)

jquery jquery-selectors

1
推荐指数
1
解决办法
215
查看次数

jquery用th获得最后一个tr

使用jquery如何用th改变最后一个tr的css

$("#mytable tr").has('th').last().parents('tr').css({'color':'blue'});
Run Code Online (Sandbox Code Playgroud)

HTML

<table border="1" id="mytable">
    <tr>
        <th>row 1, cell 1</th>
        <th>row 1, cell 2</th> 
    </tr>
    <tr> 
        <th>row 1, cell 1 - change this</th>
        <th>row 1, cell 2 - change this</th> 
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>
Run Code Online (Sandbox Code Playgroud)

javascript jquery jquery-selectors

0
推荐指数
2
解决办法
685
查看次数