我有一个页面可能是以下之一：

<span id='size'>33</span>

要么

<span id='size'>
    <b>33</b>
    <strike>32</strike>
</span>

我想在这两种情况下获取值’33’,我可以使用CSS选择器吗？
我尝试使用以下内容,#size with no b sibling或b是#size sibling：

document.querySelector('#size:not(>b),#size>b').innerText

但我一直收到错误 – “错误：Syntax_ERR：DOM例外12”

根据w3 Spec仅支持Simple Selectors,事实是“大于号”(U 003E,>)“被视为Simple Selectors定义的一部分.

你不能用常规的CSS选择器来做,但是你可以用几行JS来做：

var element = document.querySelector('#size');
var b = element.querySelector('b');
var text = b ? b.innerText : element.childNodes[0].nodeValue;

console.log(text);

我有一个class =’myTestClass’的元素 – 如何将CSS样式应用于这个元素的所有子元素。我只想把风格应用于元素的孩子。不是大孩子。

I Could use .myTestClass > div { margin:0 20px; }

它适用于所有的小孩，但我想要一个适用于所有孩子的解决方案。我以为可以使用*，但是

.myTestClass > * { margin:0 20px; }

不行

添加：

.myTestClass> *选择器不适用于firefox 26中的规则，而根据firebug没有其他的边距规则。如果我用div替换*，它可以工作。

如 David Thomas所述，这些子元素的后代将(可能)继承大多数分配给这些子元素的样式。

您需要将.myTestClass扭曲到一个元素内，并通过添加.wrapper * descendant selector将样式应用于后代，然后添加.myTestClass> * child selector应用风格的元素儿童，不是其大孩子。例如：

JSfiddle – DEMO

.wrapper * {
    color: blue;
    margin: 0 100px; /* Only for demo */
}
.myTestClass > * {
    color:red;
    margin: 0 20px;
}

<div>
    <div>Text 0
        <div>Text 1</div>
        <span>Text 1</span>
        <div>Text 1
            <p>Text 2</p>
            <div>Text 2</div>
        </div>
        <p>Text 1</p>
    </div>
    <div>Text 0</div>
</div>

我有< div id ='mydiv'>而我需要选择所有的pre和div元素，这是#mydiv的孩子。

我可以这样做：

div#mydiv > pre,div#mydiv > div

但是，可以这样做，以便#mydiv只被引用一次？

div#mydiv > pre,div

将选择页面上的所有div，而不管他们是否是#mydiv的子代，所以逗号不是一种方法。也许有另一种语法我不知道？

你必须参考#mydiv两次

#mydiv > pre,#mydiv > div

我删除了无关的div元素选择器，因为ID足够具体。

我尝试使用：only-child伪类,但不幸的是,这似乎没有考虑文本节点：

<style type="text/css">
  div span:only-child {
    color: red;
  }
</style>

<div>
  Test
  <span>This still becomes red :(</span>
</div>

<div>
  <span>This becomes red,as it should!</span>
</div>
<div>
  <span>This does not become red - great!</span>
  <span>This does not become red - great!</span>
</div>

我试图在我无法引入新类的情况下找到一种方法来检测特定元素何时在其容器元素中完全独立.

有没有办法用CSS实现这一目标？

Is there a way to achieve this with CSS?

不幸的是,没有.

包含在一个old revision的CSS工作组“错误”列表中缺少了这个想法……

No naked text mixing with elements. All raw text should have an addressable,stylable element wrapping it,created by CSS if necessary.

Current list

文本节点不是元素,CSS不能选择(或忽略)不存在的元素.

因此,在页面中合并文本时始终使用文本元素可能是最佳做法…您永远不知道何时需要设置样式.