标签: css-selectors

我有一个类似于html的代码

<div class="form">
<form>
<input type="text"/>
<input type="submit"/>
</form>
</div>

我想选择具有属性class = form的div的所有输入

我在CSS中试过但没有成功:

.form > input {}
div[class="form"] > input {}
div[class=form] > input {}

那么请问如何在CSS中选择类的子元素？

提前致谢 ;)

我有一个ul列表,并希望隐藏所有不在锚内的文本.这是来自CMS的标记,因此我无法添加其他选择器...

<ul class="list">
  <li class="sub">
    <a href="#">link</a> not linked
  </li>
</ul>

我尝试使用以下css但它不起作用.

.list .sub:not(a) {
  display: none;
}

为什么这不起作用？

Jsfiddle:http://jsfiddle.net/9tg0g44e/

一种菜鸟的菜鸟,但我有一个div有这个标签:

<div class="" id=":1" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" aria-labelledby=":1.label" aria-setsize="10" aria-posinset="1">

我已经测试过我的jQuery正在运行(目前使用的是2.1.3版本).我已经测试了推荐的选择器,这些选择器来自众多其他SO帖子中关于选择器中的冒号,然后是其他一些.我已经分别尝试了下面的每个jQuery调用,并且没有一个实际上隐藏了我想要的元素.

$(function() {
  $("#\\:1").hide();
  $("#\:1").hide();
  $(":1").hide();
  $("\3A1").hide();
  $("\3a1").hide();
  $("\3A 1").hide();
  $("\3a 1").hide();
  $('[aria-labelledby="\\:1.label"]').hide();
  $('[aria-labelledby="\\:1.label"] *').hide();

  $(document.getElementById(":1")).hide();
  $(document.getElementById("\:1")).hide();
});

没有任何反应或我收到上述调用的语法错误.

Chrome表示顺便说一句,CSS路径是'#\ 3a 1'.

编辑 这适用:

$(function() {
  setTimeout(function() {
    $("#\\:1").hide();
  }, 1000);
});

我想问题是div实际上没有加载或什么的.这仍然是一个问题,因为上述解决方案存在缺陷,原因很明显.我会向谷歌集团询问这个API(它是块状的),也许有一个回调,当它加载或什么的时候.

编辑

总noob错误 - 我正在寻找的内容实际上插入了init函数中.这就是为什么在我通常称之为jQuery的时候它并不存在; 我需要把它放在这里:

init = function() {

  Blockly.inject(document.getElementById('blocklyDiv'),
      {toolbox: document.getElementById('toolbox')});
  Blockly.Xml.domToWorkspace(Blockly.mainWorkspace,
      document.getElementById('startBlocks'));
  $("#\\:1").hide();
}

我有 :

<div class="myclass"> 
   <div >
       <div>
           <div>
           </div>
       </div>
   </div>
</div>

好吧,我正在使用.myclass div:first-child {}为第一个div赋予样式但我发现如何通过继承将样式应用于嵌套的div ....
知道我做得不好吗？

我有一个案例需要在页面上选择不同的节点组,我需要排除某些子元素.我最常见的任务是选择所有<img>元素,但不选择某些元素的后代.

以我的小提琴为例:http://jsfiddle.net/rjdbys13/ 我有2个<div>,每个都有一个<img>内部.我想选择所有图像,但不能选择其中一个图像<div>(都有不同的类).

要做到这一点,这适用于jQuery和Sizzlejs,我可以使用像这样的选择器img:not(.amazingDiv img).根据我的理解,这将选择所有<img>不<div>包含s 的后代的元素amazingDiv.这很好,正如我所说的那些支持更详细:not语法的库,但它失败并出现错误querySelectorAll:

Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Document': 'img:not(.amazingDiv img)' is not a valid selector.

我真的想避免对我收集的元素进行任何"后处理",那么有没有办法通过使用来实现我正在寻找的东西querySelectorAll？(我也试过使用库"qwery","微选择器"和"坚果")

编辑:由于我搜索选择器组合以支持一些复杂的:not功能是徒劳的,我选择使用第三方选择器引擎 - 捷豹(github.com/alpha123/Jaguar).这不是主意,而且速度较慢,但​​最终结果可能更有效,因为我不需要"后处理"我的结果.

   <td>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </td>

我想得到p除前3个以外的所有s。

我就是这样

td p:not(:nth-child(1),:nth-child(2),:nth-child(3))

但是，如果我要p除前20个以外的所有内容，该怎么办？我是否需要像上面一样手动编写？

这是我用来从网页获取所有文本内容的代码。但它不起作用，我不知道我在做什么错。

<tr style="color:#000000" class="odd">
  <td style="padding:5px 5px 5px 10px" align="center"><input type="checkbox" name="cards[]" id="card_278002" value="278002"></td>
  <td align="center">411756</td>
  <td align="center">Sherrie</td>
  <td align="center">89852</td>
</tr>

那就是我的Js代码：

function get42() {
    return document.querySelectorAll('tr>td').textContent;
}
console.log(page.evaluate(get42));

输出：null..我在做什么错？

您好我如何组合我的document.querySelectorAll如果我有这样的情况:

<div>
 <p class="flower">Flower 1</p>
 <p class="bee">Bee 1</p>
 <p class="tree"></p>
</div>

<div>
 <p class="flower">Flower 2</p>
 <p class="dude"></p>
 <p class="snow-leopard"></p>
</div>

<div>
 <p class="flower">Flower 3</p>
 <p class="tree"></p>
 <p class="mountain"></p>
 <p class="wizard"></p>
 <p class="bee">Bee 3</p>
</div>

我一直想选花,如果有一只蜜蜂,我想将它附在花上,我不在乎其余的.花和蜜蜂在div中没有​​特定的顺序,有些情况下没有蜜蜂.还假设花和蜂有一个类,但结构的其余部分不像示例中那样干净.到目前为止,我唯一的解决方案是升级几个级别然后使用正则表达式.最后我想把它们都包含在一个json中:

[{flower: "yellow", bee:"bumblebee"},...]

这种方法:

var flowers = document.querySelectorAll(flower);
var bees = document.querySelectorAll(bee);

然后在两个阵列上进行迭代不起作用.

说我有这个清单:

<nav>
  <ul class="the_list">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

我怎样才能将样式,例如底部边框仅应用于ul的前两个子节点,而不使用JQuery,只使用CSS？

长时间读者,第一次海报.

我使用Squarespace创建了一个站点.我有一个关于在页面上选择特定元素的问题.

在具有多个图像的页面上,我正在尝试仅对其中一个图像应用悬停.但我只选择了1张图片.我正在使用的自定义CSS代码将鼠标悬停在该页面上的所有图像上:

.collection-54d92b4ee4b0661469eb9a15 .sqs-block-image {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.collection-54d92b4ee4b0661469eb9a15 .sqs-block-image:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  background: #2098d1;
  height: 4px;
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.collection-54d92b4ee4b0661469eb9a15 .sqs-block-image:hover:before, .sqs-block-image:focus:before, .sqs-block-image:active:before {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

我发现了这个:https://stackoverflow.com/a/9795713/4774292说"Id-selector.当您想要将样式应用于单个特定元素时很有用." …