最新的 CSS 父选择器 [重复]

2024-01-09

我能找到的关于此的最新信息是W3C 选择器 4 级编辑草稿 http://dev.w3.org/csswg/selectors-4/,但是,据我所知,它不再提及父选择器。

我知道有一个谷歌对此进行的调查 https://docs.google.com/forms/d/1x0eXPBj1GN8Zau-7k9J_JGhoM6uGEqlJBkBBDFswT2w/closedform,但现在已经结束了。

父选择器发生了什么?它是否会被引入,或者是否已被删除?


调查最终导致主题选择器(所谓的“家长选择器”的正确名称)被更通用的选择器所取代。:has()伪类,已记录here http://dev.w3.org/csswg/selectors-4/#relational(有一个有趣的主播名字,#relational,我想知道这是否会坚持下去)。

只有当此功能的规范更加稳定时,实现可能才会到来。目前,随着诸如用伪类完全取代主题选择器这样的颠覆性变化,我并不指望它会很快发生。也就是说,很可能:has()伪类将会保留,但由于其本质,它是否可以在 CSS 中实现还有待观察。看同一草案的这一部分 http://dev.w3.org/csswg/selectors-4/#profiles了解实施概况。


原因:has()更通用的是因为,对于主题选择器,在任何草案中都从未明确说明单个复杂选择器是否可以具有多个主题选择器(因为单个复杂选择器只能有一个主题)和/或如果功能伪- 类如:matches()接受了主题选择器。但是因为伪类是一个简单的选择器,所以它适合现有的选择器语法,并且您可以可靠地假设:has()任何接受伪类的地方都会被接受。

举个例子,这使得如下的选择器在理论上是完全可能的:

/* 
 * Select any p
 * that is a sibling of a ul
 * that has more than one li child.
 */
ul:has(> li:nth-of-type(2)) ~ p,     /* p follows ul */
p:has(~ ul:has(> li:nth-of-type(2))) /* p precedes ul */

然而,使用主题选择器,这只有在以下情况下才可能实现::matches()接受主题选择器,该选择器从未在规范中直接说明:

ul:matches(! > li:nth-of-type(2)) ~ p, /* p follows ul */
!p ~ ul:matches(! > li:nth-of-type(2)) /* p precedes ul */

您还可以在这里看到为什么我不喜欢任何一种形式的选择器的名称“父选择器”——它可用于这么多.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

最新的 CSS 父选择器 [重复] 的相关文章

  • 如何简化这个 LESS CSS Box-shadow mixin? (带有“方向”的多个阴影)

    如何减少这段代码 可能使用循环 以拥有一个接受方向和数字的 函数 dir 想要的 方向 number 我需要多少次影子 这里是10次 color 阴影的颜色 Example 可以工作 但不是很容易使用 perspective box dir
  • 重新创建 CSS3 过渡三次贝塞尔曲线

    在 CSS3 过渡中 您可以将计时函数指定为 cubic bezier 0 25 0 3 0 8 1 0 在该字符串中 您仅指定曲线上点 P1 和 P2 的 XY 因为 P0 和 P3 始终分别为 0 0 0 0 和 1 0 1 0 根据苹
  • Bootstrap 5 是否删除了行之间的间距?

    我开始使用 bootstrap 5 并注意到行之间没有空格 我们是否必须明确使用spacing https getbootstrap com docs 5 0 utilities spacing 实用程序喜欢mb 3 or mb 2等等试图
  • 如何将 div 与其父级的顶部对齐,但保持其内联块行为?

    See http jsfiddle net b2BpB 1 http jsfiddle net b2BpB 1 问 如何让box1和box3对齐到父div的顶部boxContainer boxContainerContainer backg
  • 如何在bootstrap中默认隐藏侧边栏?

    我在这里有一个很好的参考 作为 Bootstrap 在设计 Web 表单应用程序时的侧边栏 http startbootstrap com template overviews simple sidebar http startbootst
  • 如何将大于整个页面 100% 的元素居中对齐?

    我有一个宽度为 100 的 div 并且隐藏了一个宽度为 3000px 的 div 我希望3000px的div左右均匀地被切断 我会使用背景位置 中心 然而 事情比这更复杂 3000px div 包含 30 100px div 我尝试过在
  • R Shinydashboard 自定义 CSS 到 valueBox

    我一直在尝试将 valueBox 的颜色更改为自定义颜色 超出 validColors 中可用的颜色 但一直无法这样做 我知道有一种方法可以使用标签来包含自定义 CSS 但是我无法将它们放在正确的位置 ui lt dashboardPage
  • 如何在php中使用一张图像绘制形状

    我需要使用图像的一部分来创建帧图像 例如 用户将从后端上传图像片段 现在我需要根据前端用户的要求在前端创建一个框架 用户将选择框架的高度和宽度 然后他将选择该图像片段 如下所示 我没有办法做到这一点 我尝试通过 css 和 html can
  • 使用 :hover 作为元素的内联样式(使用 HTML/CSS/php)[重复]

    这个问题在这里已经有答案了 可能的重复 如何将 a hover 规则嵌入到文档中间的样式属性中 https stackoverflow com questions 131653 how do i embed an ahover rule i
  • 在 Bootstrap 中使用 CakePHP 时如何修改包装器 div 错误类

    我在用着Bootstrap 3 0RC1 with CakePHP 2 3 6 尝试利用那些漂亮的课程 例如has error and has warning for 验证状态 http getbootstrap com css forms
  • 如何设置 CSS 网格的最大高度

    我有以下 CSS 网格 grid 3x4 display grid grid template columns 1fr 1fr 1fr grid template rows 1fr 1fr 1fr 1fr grid template are
  • 我的 CSS 未在 Internet Explorer 11 和 Firefox 中加载!仅适用于 Chrome

    我正在创建一个简单的网页 我的 CSS 只能在 Chrome 中使用 它在 Firefox 和 IE11 中都不起作用 这是我的 HTML h1 b u Adding a new Visitor u b h1 br div class wr
  • 设置浏览器窗口最小化的最小尺寸限制?

    有没有办法在所有浏览器中手动设置浏览器窗口的最小尺寸 你可以试试 body min width 600px 一旦视口小于 600 像素 您将得到一个水平滚动条 这仅适用于支持 min width CSS 属性的现代浏览器 我认为不可能限制用
  • 动态表单标签宽度的 CSS

    我目前正在重构我们的表单控制器之一 以便我们可以将其用于面向公众的网站 目前它正在为表单生成表格布局 但我正在尝试使用 CSS 表单来完成它 我正在尝试重现看起来像这样的东西http www stylephreak com uploads
  • div 边框上的内边距

    我想在 css 边框上添加填充 将其拉入 div 内 远离边缘 使用 css 可以吗 css3 很好 webkit 这是设计 我通过将一个 div 放在一个 div 中 然后给内部 div 一个边框来做到这一点 我想让标记尽可能精简 所以如
  • 调整文本区域大小

    我需要使用文本区域来显示一些文本 问题是 如果我放置 4 5 行文本 就会出现滚动条 如何使用 CSS HTML 使文本区域与其内容一样大 没有滚动条 文本区域不需要动态更改其大小 我仅使用它来显示文本 我也可以使用禁用的文本区域 我希望文
  • 防止浮动换行,直到元素达到最小宽度

    我有可变宽度的 HTML 布局 内容左侧有一个固定宽度的菜单 div 可变宽度 由 css max width 和 min width 设置 对于非常窄的浏览器窗口 我希望内容包裹在菜单下方 我目前通过设置来实现这一点float left在
  • 如何并排放置两个

    我有两个 div 我想要并排放置的元素 如下所示 navigation content 我想要导航 div 根据需要尽可能大 但不能更大 收缩以适应行为 内容 div 然后应该填充剩余的空间 如何在不指定百分比 例如 20 80 的情况下使
  • 如何更改 Bootstrap 3 div 列顺序

    正在做我的第一个响应式设计 在 Bootstrap 3 中可能会出现类似的情况 在 lg 上更改此设置 a b c sm 上的这个 a c b 您可以使用两个 div 一个用于第一类型的布置 另一个用于第二类型的布置 第一个仅在 lg 中显
  • 如何将送货地址复制到帐单地址

    我想知道是否可以将送货地址复制到帐单地址 当用户单击与送货地址相同的复选框时 送货地址值将被复制到账单输入字段 我完成了大部分部分 但我不确定如何将选择菜单 状态 值复制到帐单地址 我真的很感谢任何帮助 My code document r

随机推荐

  • 内容长度和其他 HTTP 标头?

    如果我在生成普通 HTML 页面时设置此标头 会给我带来什么好处吗 我看到一些框架会设置这个标头属性 我想知道为什么 与其他标头一起 例如Content Type text html 浏览器加载网站是否更快或更流畅 PS 他们这样做是这样的
  • 如何解压蟒蛇蛋?

    我试图在使用 py2exe 时捆绑一些 Egg 依赖项 如 py2exe 网站上所述 它不适用于这些依赖项 我需要先解压缩它们 我尝试过先运行easy install m lxml进而easy install always unzip lx
  • pandas 将日期时间列转换为时间戳

    我是熊猫初学者 我的数据框第一列是日期时间 例如 2016 年 9 月 19 日 10 30 00 并且许多记录都喜欢它 我正在尝试将此列转换为时间戳并将其写入另一个数据帧 我正在尝试一步完成 我正在尝试用 python 3 编写 impo
  • 设置 Apache CouchDB 屏幕在容器重新启动时重新出现

    我使用官方 Docker 镜像运行 CouchDB v2 3 我已使用 Fauxton 将数据库配置为单节点 data 目录挂载到本地目录 当我重新启动容器时 数据库仍然存在 所以卷绑定按预期工作 现在 每次我重新启动容器并导航到 设置 选
  • Spark Streaming + Kafka:SparkException:无法找到 Set 的领导者偏移量

    我正在尝试设置 Spark Streaming 以从 Kafka 队列获取消息 我收到以下错误 py4j protocol Py4JJavaError An error occurred while calling o30 createDi
  • 库中存储库的 NoSuchBeanDefinitionException

    我创建了一个用于在多个 Spring Boot 应用程序上共享代码的库 该库包含一个 Repository 类RequestRepository 将库添加到 Spring Boot 项目后 编译并成功运行单元测试 Library Reque
  • YSlow 规则“不要在 HTML 中缩放图像”背后的基本原理是什么

    我在以下地方遇到过这个规则YSlow http developer yahoo com performance rules html no scale为了提高性能 表示不应在 HTML 中调整图像大小 他们没有提到这条规则的任何具体原因 有
  • 为什么OpenGL(IOS)中有.pvr文件

    我正在 IOS 中使用 OpenGL 制作应用程序 使用 PVR 纹理来制作 3D 效果 我无法理解 pvr 文件 所以请朋友们了解一下 pvr 文件以及它在 OpenGL 中的重要性以及我该如何制作它 PVR 文件是各种纹理格式的容器 例
  • 从 condaenvironment.yaml 安装时的依赖项的 pip 依赖项

    我正在尝试为项目的用户创建一个 condaenvironment yml 文件 其中一种依赖项不是由 conda 分发的 而是通过 pip github 提供 我假设基于这个例子 https github com conda conda b
  • 使用 avro-tools 连接 Avro 文件

    我正在尝试将 avro 文件合并为一个大文件 问题是concat命令不接受通配符 hadoop jar avro tools jar concat input part output bigfile avro I get 线程 main 中
  • MYSQL INSERT 中的德语变音

    我的 mysql 插入语句有问题 我有一个将 utf 8 字符正确提交到插入文件的表单 我已经检查了 POST 变量 现在 当我查看数据库中的 INSERT 时 没有变音符号 而是问号 该错误必须位于插入语句之前 如果我从数据库输出 手动输
  • Scikit-learn Predict_proba 给出错误答案

    这是来自的后续问题如何知道 Scikit learn 中的 Predict proba 返回数组中表示哪些类 https stackoverflow com questions 16937243 how to know what class
  • 使用 Google Analytics 进行 Javascript 覆盖/对话跟踪

    使用 javascript 在我的例子中准确地说是 jQuery 我需要启用一个对话框 以便在 Google Analytics 中将其作为唯一的页面视图进行跟踪 尽管它只是一个模态叠加层 出于上下文目的 我不希望用户离开页面并且对话框内容
  • UITextField 上的 UITapGestureRecognizer 在 IOS 7.1 中不再工作

    我有一个UITapGestureRecognizer附于一个UITextField以获得类似 下拉 的效果 当 的时候UITextField被点击 我提出一个UIPopover与内容 这在 7 1 之前就像一个魅力 现在UITextFiel
  • 如何知道电子邮件地址是否无效?

    我在 www email it 上的电子邮件地址已被禁用 因为我已经很长时间没有使用它了 现在 当我访问 FB 时 我收到以下消息 Our systems have detected that email protected cdn cgi
  • 在 IntelliJ IDEA 14 中运行 JUnit 测试而不选择配置类型

    在带有 Gradle 插件的 IntelliJ IDEA 14 中 我想运行 JUnit 测试 而不询问配置类型 当我第一次运行测试时出现问题 本次运行没有配置 我从未在 IDE 中使用 Gradle 运行测试 因此禁用使用 Gradle
  • 如何根据其他列值设置唯一约束

    我编写以下脚本用于客户域维护 在我的脚本中 我想在表中进行修改 如果状态为活动 我想为端口字段设置唯一约束 否则 如果状态为非活动 我不想设置唯一约束 如何根据其他列值设置此约束 请帮我 bin bash echo Enter the Da
  • C# ui Automation [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我正在尝试在 C 中自动化 gui 这与浏览器自动化相同吗 我如何启动 ui 自动化 如果您使用 WPF Microsoft 有一个非
  • 如何使用 heroku CLI 连接到选定的应用程序

    我正在尝试在 Heroku 上部署我的 Java Web 应用程序 当我制作教程时 我使用创建了一个应用程序赫罗库创建命令 我们可以说它是 name app1 然后我在教程结束后删除了它并创建了一个新的来部署它 让它成为 new app 但
  • 最新的 CSS 父选择器 [重复]

    这个问题在这里已经有答案了 我能找到的关于此的最新信息是W3C 选择器 4 级编辑草稿 http dev w3 org csswg selectors 4 但是 据我所知 它不再提及父选择器 我知道有一个谷歌对此进行的调查 https do