From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../css_selectors/comparison_with_xpath/index.html | 43 +++++++ files/zh-cn/web/css/css_selectors/index.html | 136 +++++++++++++++++++++ 2 files changed, 179 insertions(+) create mode 100644 files/zh-cn/web/css/css_selectors/comparison_with_xpath/index.html create mode 100644 files/zh-cn/web/css/css_selectors/index.html (limited to 'files/zh-cn/web/css/css_selectors') diff --git a/files/zh-cn/web/css/css_selectors/comparison_with_xpath/index.html b/files/zh-cn/web/css/css_selectors/comparison_with_xpath/index.html new file mode 100644 index 0000000000..c196e077e6 --- /dev/null +++ b/files/zh-cn/web/css/css_selectors/comparison_with_xpath/index.html @@ -0,0 +1,43 @@ +--- +title: Comparison of CSS Selectors and XPath +slug: Web/CSS/CSS_Selectors/Comparison_with_XPath +translation_of: Web/XPath/Comparison_with_CSS_selectors +--- +
{{CSSRef("Selectors")}}{{QuickLinksWithSubpages("/en-US/docs/Web/XPath")}}{{Draft}}
+ +

本文旨在记录CSS选择器和XPath之间的区别，以便Web开发人员能够更好地为正确的工作选择合适的工具。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
XPath featureCSS equivalent
ancestor, parent or preceding-sibling axis{{CSSxRef(":has",":has()")}} selector {{experimental_inline}}
attribute axisAttribute selectors
child axisChild combinator
descendant axisDescendant combinator
following-sibling axisGeneral sibling combinator or adjacent sibling combinator
self axis{{CSSxRef(":scope")}} or {{CSSxRef(":host")}} selector
diff --git a/files/zh-cn/web/css/css_selectors/index.html b/files/zh-cn/web/css/css_selectors/index.html new file mode 100644 index 0000000000..33963cb0d6 --- /dev/null +++ b/files/zh-cn/web/css/css_selectors/index.html @@ -0,0 +1,136 @@ +--- +title: CSS 选择器 +slug: Web/CSS/CSS_Selectors +tags: + - CSS + - CSS Selector + - CSS 优先级 + - Overview + - Reference + - Selectors + - 参考 + - 直接子代组合器 + - 选择器 +translation_of: Web/CSS/CSS_Selectors +--- +
{{CSSRef("Selectors")}}
+ +

CSS 选择器规定了 CSS 规则会被应用到哪些元素上。

+ +
+

备注：暂时没有能够选择 父元素、父元素的同级元素，或 父元素的同级元素的子元素 的选择器或者组合器。

+
+ +

基本选择器

+ +
+
通用选择器（Universal selector）
+
选择所有元素。（可选）可以将其限制为特定的名称空间或所有名称空间。
+ 语法：* ns|* *|*
+ 例子：* 将匹配文档的所有元素。
+
元素选择器（Type selector）
+
按照给定的节点名称，选择所有匹配的元素。
+ 语法：elementname
+ 例子：input 匹配任何 {{HTMLElement( "input" )}} 元素。
+
类选择器（Class selector）
+
按照给定的 class 属性的值，选择所有匹配的元素。
+ 语法：.classname
+ 例子：.index 匹配任何 class 属性中含有 "index" 类的元素。
+
ID 选择器（ID selector）
+
按照 id 属性选择一个与之匹配的元素。需要注意的是，一个文档中，每个 ID 属性都应当是唯一的。
+ 语法：#idname
+ 例子：#toc 匹配 ID 为 "toc" 的元素。
+
属性选择器（Attribute selector）
+
按照给定的属性，选择所有匹配的元素。
+ 语法：[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
+ 例子：[autoplay] 选择所有具有 autoplay 属性的元素（不论这个属性的值是什么）。
+
+ +

分组选择器（Grouping selectors）

+ +
+
选择器列表（Selector list）
+
, 是将不同的选择器组合在一起的方法，它选择所有能被列表中的任意一个选择器选中的节点。
+ 语法：A, B
+ 示例：div, span 会同时匹配 {{HTMLElement("span")}} 元素和 {{HTMLElement("div")}} 元素。
+
+ +

组合器（Combinators）

+ +
+
后代组合器（Descendant combinator）
+
 （空格）组合器选择前一个元素的后代节点。
+ 语法：A B
+ 例子：div span 匹配所有位于任意 {{HTMLElement("div")}} 元素之内的 {{HTMLElement("span")}} 元素。
+
直接子代组合器（Child combinator）
+
> 组合器选择前一个元素的直接子代的节点。
+ 语法：A > B
+ 例子：ul > li 匹配直接嵌套在 {{HTMLElement("ul")}} 元素内的所有 {{HTMLElement("li")}} 元素。
+
一般兄弟组合器（General sibling combinator）
+
~ 组合器选择兄弟元素，也就是说，后一个节点在前一个节点后面的任意位置，并且共享同一个父节点。
+ 语法：A ~ B
+ 例子：p ~ span 匹配同一父元素下，{{HTMLElement("p")}} 元素后的所有 {{HTMLElement("span")}} 元素。
+
紧邻兄弟组合器（Adjacent sibling combinator）
+
+ 组合器选择相邻元素，即后一个元素紧跟在前一个之后，并且共享同一个父节点。
+ 语法：A + B
+ 例子：h2 + p 会匹配所有紧邻在 {{HTMLElement("h2")}} 元素后的 {{HTMLElement("p")}} 元素。
+
列组合器（Column combinator）{{Experimental_Inline}}
+
|| 组合器选择属于某个表格行的节点。
+ 语法： A || B
+ 例子： col || td 会匹配所有 {{HTMLElement("col")}} 作用域内的 {{HTMLElement("td")}} 元素。
+
+ +

伪选择器（Pseudo）

+ +
+
伪类
+
: 伪选择器支持按照未被包含在文档树中的状态信息来选择元素。
+ 例子：a:visited 匹配所有曾被访问过的 {{HTMLElement("a")}} 元素。
+
伪元素
+
:: 伪选择器用于表示无法用 HTML 语义表达的实体。
+ 例子：p::first-line 匹配所有 {{HTMLElement("p")}} 元素的第一行。
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("CSS4 Selectors")}}{{Spec2("CSS4 Selectors")}}增加 || 列组合器，网格结构选择器（grid structural selectors），逻辑选择器（logical combinators）, location, time-demensional, resource state, linguistic and UI pseudo-classes, modifier for ASCII case-sensitive and case-insensitive attribute value selection.
{{SpecName("CSS3 Selectors")}}{{Spec2("CSS3 Selectors")}}新增 ~ 一般兄弟选择器和 伪类。
+ 规定伪元素选择器使用 :: 前缀。增加 属性 选择器。
{{SpecName("CSS2.1", "selector.html")}}{{Spec2("CSS2.1")}}新增 > 子元素选择器和 + 相邻兄弟选择器。
+ 新增 通用 选择器和 属性 选择器。
{{SpecName("CSS1")}}{{Spec2("CSS1")}}最初定义版本.
+ +

 伪类和伪元素的规范位于各自的页面中。

+ +

参见

+ + -- cgit v1.2.3-54-g00ecf