css3 选择器的兼容性_CSS选择器的局限性

css3 选择器的兼容性

A great deal can be accomplished with pure CSS, but the power of the syntax is limited by its inability to affect certain elements. Understanding those limitations is the first step to determining whether a CSS-only, hybrid JavaScript-CSS script or pure JavaScript solution is best for your web design and development problems.

使用纯CSS可以完成很多工作，但是语法的功能受到其无法影响某些元素的限制。 了解这些限制是确定仅CSS，混合JavaScript-CSS脚本还是纯JavaScript解决方案最适合您的Web设计和开发问题的第一步。

CSS擅长什么？ (What’s CSS Good At?)

The easiest way to describe CSS selectors is that they work from the outside in of the DOM, and from top to bottom. For example, it’s easy for link foo to affect the appearance of a div with an id of bar in the code below.

描述CSS选择器的最简单方法是，它们从DOM的外部开始，从上到下运行 。 例如，在以下代码中，链接foo很容易影响id为bar的div的外观。

<a href="#">foo</a>
<div id="bar">
	<p>Content
</div>

So long as B follows A, we can use a simple adjacent selector:

只要B跟随A ，我们就可以使用一个简单的相邻选择器 ：

a:hover + div#bar {
	/* rules for appearance of the div */
}

It’s possible to do this even if foo isn’t right next to bar:

即使foo不在bar旁边，也可以这样做：

<a href="#" class=foo>foo</a>
<a href="#">boop</a>
<div id="bar">
	<p>Content
</div>

With the following CSS:

使用以下CSS：

a.foo:hover ~ div#bar {
	/* rules for appearance of the div */
}

But CSS can’t do “backwards” selection:

但是CSS 不能 “向后”选择：

<div id="bar">
	<p>Content
</div>
<a href="#" class="foo">foo</a>

In the code above, foo cannot influence the appearance of bar.

在上面的代码中， foo不能影响bar的外观。

It’s entirely possible to work “down” through the DOM with CSS:

完全有可能使用CSS在DOM中 “向下”工作：

<div id="bing">
	<p><a href="#" class="boom">Content</a> here
</div>

… using a descendant selector:

…使用后代选择器：

#bing:target p a.boom {
	font-weight: bolder;
}

But CSS can’t work from the “inside out”: there’s little you can do to the .boom link that will affect the #bing container, at least using CSS. In some cases you can provide the impression that interactions with child elements alters the appearance of their parents – a good example would be my Reverse Focus UI technique – but it’s not technically possible.

但是CSS无法从“由内而外”的方式工作： .boom链接#bing ，这至少会使用CSS来影响#bing容器。 在某些情况下，您可以提供与子元素的交互会改变其父母外观的印象 -一个很好的例子就是我的Reverse Focus UI技术 -但这在技术上是不可能的。

CSS还不能做什么？ (What Else Can’t CSS Do?)

Poor click event support 不良点击事件支持

:hover is fine, but :hover很好，但是 :focus is mostly constrained to form elements, and :focus通常被限制为表单元素，而 :target, as it is currently implemented in browsers, usually carries a significant presentation deficit. :target ，因为它当前在浏览器中实现，通常会带来严重的表示缺陷。

No walking backwards through the DOM 不要在DOM中向后走

appearance of A following B, and thus able to affect it: 外观 ，从而能够影响它：

<a href="#" class="foo">foo</a>
<a href="#">boop</a>
<div id="bar">
	<p>Content
</div>

The CSS:

CSS：

a.foo {
	position: relative;
	top: 5rem;
}
a.foo:hover + div {
	border: 1px solid red;
}

… will present foo below bar, while continuing to affect it.

…会在bar下方显示foo ，同时继续影响它。

No loops 无循环

example in the recent past. 示例 。

4096 selector limit 4096个选择器限制

An unusual limit that is increasingly encountered by developers as stylesheets get larger, longer, and more complex. Any version of Internet Explorer before version 10 has a limit of 4096 selectors per stylesheet, and will ignore any declarations after encountering that number.

随着样式表变得更大，更长和更复杂，开发人员越来越遇到一个不寻常的限制。 版本10之前的任何Internet Explorer版本每个样式表的限制为4096个选择器，遇到该数字后将忽略任何声明。

结论 (Conclusion)

The optimal solution is to use each web technology for the task it is best at: CSS for presentation and simple animation rules, JavaScript for ad-hoc selection and manipulation of the DOM. The optimal result is often a hybridized combination of the two, an example of which I will present in the very near future here in this blog.

最佳解决方案是将每种网络技术用于最擅长的任务：用于表示CSS和简单的动画规则，用于临时选择和操作DOMJavaScript。 最佳结果通常是两者的混合组合，我将在不久的将来在此博客中提供一个示例。

翻译自: https://thenewcode.com/684/The-Limits-Of-CSS-Selectors

css3 选择器的兼容性