选择器Selectors

2024-07-18 17:20:10

CSS 选择器

Sciter 支持的选择器

CSS 2.1 和 CSS 3 选择器

模式	代表	描述
*	任何元素	通用选择器
E	E 类型的元素	类型选择器
E[foo]	具有“foo”属性的 E 元素	属性选择器
E[foo="bar"]	“foo”属性值正好等于“bar”的 E 元素	属性选择器
E[foo~="bar"]	一个 E 元素，其“foo”属性值是空格分隔值的列表，其中一个值正好等于“bar”	属性选择器
E[foo^="bar"]	一个 E 元素，其“foo”属性值正好以字符串“bar”开头	属性选择器
E[foo$="bar"]	一个 E 元素，其“foo”属性值正好以字符串“bar”结尾	属性选择器
E[foo*="bar"]	一个 E 元素，其“foo”属性值包含子字符串“bar”	属性选择器
E[foo\|="en"]	一个 E 元素，其“foo”属性具有以“en”开头（从左起）的连字符分隔值列表	属性选择器
E:root	一个 E 元素，文档的根目录	结构伪类
E:nth-child(n)	一个 E 元素，其父元素的第 n 个子元素	结构伪类
E:nth-last-child(n)	一个 E 元素，其父元素的第 n 个子元素，从最后一个元素开始计数	结构伪类
E:nth-of-type(n)	一个 E 元素，其类型的第 n 个兄弟姐妹	结构伪类
E:nth-last-of-type(n)	一个 E 元素，其类型的第 n 个兄弟姐妹，从最后一个开始计数	结构伪类
E:first-child	一个 E 元素，其父元素的第一个子元素	结构伪类
E:last-child	一个 E 元素，其父元素的最后一个子元素	结构伪类
E:first-of-type	一个 E 元素，其类型的第一个兄弟姐妹	结构伪类
E:last-of-type	一个 E 元素，其类型的最后一个兄弟姐妹	结构伪类
E:only-child	一个 E 元素，其父元素的唯一子元素	结构伪类
E:only-of-type	一个 E 元素，仅同类型的同级元素	结构伪类
E:empty	没有子元素（包括文本节点）的 E 元素	结构伪类
E:link E:visited	E 元素是目标尚未访问的超链接的源锚点（：link）或已访问（：visited）	链接伪类
E:lang(fr)	语言“fr”中 E 类型的元素（文档语言指定如何确定语言）	：lang（）伪类
E::before	在 E 元素之前生成的内容	伪元素：：before 伪元素
E::after	在 E 元素之后生成的内容	伪元素：：after 伪元素
E.warning	类为“warning”的 E 元素（文档语言指定如何确定类）。	类选择器
E#myid	ID 等于“myid”的 E 元素。	ID 选择器
E:not(s)	与简单选择器 s 不匹配的 E 元素	否定伪类
E F	E 元素的 F 元素后代	后代组合器
E > F	E 元素的 F 元素子元素	子组合器
E + F	紧跟 E 元素前面的 F 元素	下一个同级组合器
E ~ F	前面是 E 元素的 F 元素	后续同级运算器

Sciter 快捷方式选择器

模式	代表
E(name)	等价于 E[name=“name”]
E\|name	等效于 E[type=“name”]

状态 CSS 选择器

这些选择器在 JavaScript 中反映为 element.state.xxx。

其中一些仅由运行时设置，而另一些则允许由 JS 设置。

模式	比赛	JS
E:empty	没有子元素或 `<input>` 未设置值的元素	元素.state.empty
E:active	鼠标/触摸按在元素上	元素.state.active
E:hover	鼠标位于元素内	element.state.hover
E:focus	E 元素是焦点	元素.state.focus
E:tab-focus	E 元素通过 TAB 遍历获得焦点	元素.state.tabfocus
E:owns-focus	一个 E 元素在其内部具有集中的后代	element.state.ownsfocus
E:focusable	E 元素是可聚焦的	元素.state.focusable
E:link	E 元素具有 behavior：hyperlink	element.state.link
E:visited	Sciter 没有使用，但 JS 代码可以设置它	元素.state.visited
E:checked	选中元素（例如单选按钮、复选框或选项）	元素.state.checked
E:current	元素是当前元素（例如，select 中的选项）	元素.state.current
E:disabled	元素被禁用	元素.state.disabled
E:read-only	元素是只读的（例如 textarea 或 htmlarea）	元素.state.readonly
E:expanded	元素已展开（“选择”\|“树”中的选项）	元素.state.expanded
E:collapsed	元素被折叠（Select\|Tree 中的选项），元素可以设置：Expanded 或：Collapsed 标志	元素.state.collapsed
E:node	元素是 select\|tree 中的可展开/可折叠节点选项	元素.state.node
E:incomplete	元素不完整（图像或框架没有到达内容）	element.state.incomplete
E:busy	元素繁忙（IMG 或帧正在加载）	元素.state.busy
E:invalid	input 元素的值无效	element.state.invalid
E:animating	元素上具有运行过渡或动画（包括滚动）	元素.state.animating
E:popup	元素现在显示为弹出窗口	元素.state.popup
E:owns-popup	一个 E 元素有 E.popup（popupEl）为它显示的弹出窗口	element.state.ownspopup
E:drag-over	拖动 E 元素	元素.state.dragover
E:drag-source	E 元素是拖动源，参见 window.performDrag（）	元素.state.dragsource
E:drop-target	未使用，仅供 JS 使用	元素.state.droptarget
E:ltr	元素处于 LTR 环境中	元素.state.isltr
E:rtl	元素位于 RTL 环境中	元素.state.isltr
E:theme(A)	E 元素或其父元素之一定义了 theme=“A-B” 或 theme=“B-A” 属性	不适用
E:window-root	E 元素是窗口根 - 窗口的根文档或为其创建窗口的弹出元素	不适用
E:blur-behind	一个：window-root 元素，它使用模糊背景	不适用

提示

在运行时，JS 可以将这些状态标志设置为

element.state.visited = true;

例如。

提示

在 JSX 中，可以通过在上述名称前面加上“state-”来设置这些状态标志：

render() {
 return <div state-visited={true}>...</div>
}