像 **++* 这样的选择器使用起来安全吗?

2023-11-27

我最近在尝试找到一种轻松分隔主要博客元素(例如段落和图像)的方法时遇到了这个 CSS 选择器。它的使用示例如下:

.post *+* {margin-top: 15px;}
/* or... */
.post > *+* {margin-top: 15px;}
/* if you don't want the margin to apply to nested elements */

乍一看,它似乎很有用。所以我的问题是:使用这些选择器有哪些缺点?

具体来说:

  1. 浏览器对此的支持如何?

  2. 是否存在您不希望文章中元素之间的边距均匀的情况,如果不是,首先声明它然后覆盖或简单地单独声明每个元素是否更容易?

  3. 由于您选择了所有内容两次,这是否存在性能问题?


  1. 浏览器对此的支持如何?

    基本上,IE7+ 和任何其他现代浏览器。

    每个浏览器可能存在极端情况,具体取决于实际选择或使用同级组合器查询哪些元素+,但我不会担心这些,因为事实上保证金正被应用于任何元素这是没有实际原因的兄弟姐妹。

  2. 是否存在您不希望文章中元素之间的边距均匀的情况,如果不是,首先声明它然后覆盖或简单地单独声明每个元素是否更容易?

    乍一看,它确实非常有用,但如果您仔细考虑一下,更具体地说明边距的应用范围可能会更好。我可以想象,这条规则将在样式表的其余部分被其他特定选择器多次覆盖,从而使其变得非常多余,甚至在许多情况下是不需要的。我想不出像你的例子这样的规则在现实世界中的任何用途。

    请记住,在这种特定情况下,垂直边距会塌陷,因此您只需要为一组元素定义垂直边距,而不必求助于应用margin-top独占于某个元素的所有后续同级元素。

  3. 由于您选择了所有内容两次,这是否存在性能问题?

    实际上,它并不是将所有内容都选择两次。浏览器只查看每个元素一次,然后确定每个元素是否跟随同一父元素下的另一个元素。它不关心它遵循哪种元素,只要它遵循另一个元素即可。它不会再次选择每个元素,然后比较它们是否是彼此的兄弟姐妹。

    Now, 人们说使用通用选择器*与任何组合器结合都会导致渲染性能灾难,所以人们说应该不惜一切代价避免这种事情。但这些东西根本不重要(老实说,像这样的选择器* + *仅比以下几微秒慢p + p),所以你真的不需要担心。首先考虑CSS规则本身的实用性,然后据此决定是否真的需要该规则。


现在说了这么多(现在已经很晚了),根据我上面所说的关于折叠边距的内容,我可能会重写这样的示例:

.post > * { margin: 15px 0; }

可能只值得更换* with p如果您知道您唯一想要间隔的子级是段落:

.post > p { margin: 15px 0; }

或其中的任何段落.post就此而言(例如在块引号内):

.post p { margin: 15px 0; }

(*我承认,与后代选择器一起使用是公平的游戏;另一方面,子组合器仅限于一层嵌套,因此对于任何痴迷于性能的人来说,这根本不会有什么坏处。)

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

像 **++* 这样的选择器使用起来安全吗? 的相关文章

  • 无法正确显示行

    我应该在这个问题的开头说我完全没有 html css javascript 背景 所以请对我宽容点 如果我使用了错误的术语或者问了一个愚蠢的问题 没有提供足够的信息 请抱歉 我正在尝试让一个可扩展的表工作 通过阅读论坛线程 教程 将 nex
  • 每 2 行后使 html 表格的边框变厚

    我创建了一个包含一些内容的表 其中有 12 行和 2 列 我想显示边框 但每 4 行之后 我想将水平边框设置为比正常情况更粗 怎么做 请在这里帮忙 试试这个选择器 table tr nth of type 4n td border bott
  • 使用 python 在一个 html 页面中显示分割数据框的 HTML 代码

    我是 html css 新手 所以对以 html 格式显示的数据有疑问 我有一个很长的列表 我想将其拆分并以 html 格式显示为两个单独的列 例如 而不是 Col1 Col2 1 a 2 a 3 a 4 a 5 b 6 b 7 b 8 b
  • div 中的中心文本?

    我有一个div 30px高和500px宽的 这div可以包含两行文本 一行在一行 并相应地设置样式 填充 但有时它只包含一行 我希望它居中 这可能吗 要水平居中 请使用text align center 要垂直居中 只能使用vertical
  • Sass:@use 出错,未定义变量

    我正在使用 Sass 并且想要使用 use关键字而不是 import 因为 import有很多问题 另外只有dart sass支持这个功能 我将node sass改为dart sass 然而 问题出现了 我原来的代码 import carb
  • Bootstrap:如何将按钮组对齐在中心(垂直)

    在下面的代码中
  • 两列表:一列尽可能小,另一列占据其余部分

    我在 div 中有一个 to columns 表 div table tbody tr td class action a a td td class content p Bigger text variable size p td tr
  • 为什么我的交互式图像仅在 Internet Explorer 上出现故障?

    我的问题 我为自己制作了一个图像地图 交互式图像 它在 Chrome safari 和 Firefox 上完美运行 然而 当我在可怕的互联网浏览器上尝试它时 它真的很糟糕 这些小点应该扩展到更大的盒子中 在互联网浏览器上它要么不起作用 要么
  • 使用 CSS 折叠和展开元素

    我正在尝试构建一个页面 加载时仅可见标题 并且 当用户单击标题时 每个标题下方的表格会在隐藏和显示状态之间切换 我的限制是只能在 CSS 中执行此操作 这是我到目前为止想到的 https jsfiddle net Argoron c1ypx
  • Webpack 4:如何使用 LESS 获取 CSS 源映射?

    多年来我一直在尝试让 CSS 源映射在 webpack 中工作 但没有成功 我不确定链条中哪里出了问题 我希望有人能指出我正确的方向 这是发生的事情 行号是错误的 实际上文件名也是错误的 main less只是包含一堆 import也就是说
  • css3按钮背景颜色无限过渡

    有没有办法仅使用 css3 使按钮的背景颜色从灰色渐变为蓝色 然后又回到灰色 一个很好的例子是默认操作按钮是可可 我知道这可以在 javascript 中完成 但我宁愿只使用 css 来完成此操作 您好 我已经通过 CSS3 动画制作了按钮
  • 将 SVG 的高度设置为行高?

    我想将我的 SVG 图像作为图标包含在标题旁边 h1 img src icon sell svg class icon Verkaufen h1 字体大小为h1 is 36px和line heigt is 1 1 我使用检查器工具发现计算出
  • 为什么我的列表项项目符号与浮动元素重叠

    我有一个 XHTML Strict 页面 我在其中将图像浮动在常规文本段落旁边 一切都很顺利 除非使用列表而不是段落 列表的项目符号与浮动图像重叠 更改列表或列表项的边距没有帮助 边距是从页面左侧开始计算的 但浮动会将列表项推到右侧insi
  • 如何在不使用变换或顶部/左侧的情况下转换列表中项目的位置

    有一天我偶然发现一个例子 https codepen io itslit pen gvKrMY它使用 Vue js 但我的问题更多是关于 Vue 用于实现状态之间转换的 CSS 和 HTML 卡片暂时获得等级 shuffleMedium m
  • 自定义rc-time-picker的样式

    我在用rc time picker我的项目的包 但我在自定义样式时遇到问题pop up of my time picker成分 这是我的组件的屏幕截图 首先 我需要更改时间的背景颜色item在当时li from light grey 在屏幕
  • 将图像作为框架放置在 iframe 周围?

    我有一个网站尝试以移动格式显示 但在宽屏幕上 我确信 iframe 是正确的选择 我正在尝试将 iframe 加载到 iPhone 的图像中 你可以看一个例子here http webfro gs south tour iframe tes
  • 如何选择具有“A”类但不具有“B”类的 div?

    我有一些 div div class A Target div div class A B NotMyTarget div div class A C NotMyTarget div div class A D NotMyTarget di
  • Firefox 不会在使用 jQuery AJAX 加载的内容上呈现 CSS 样式

    我有一个网站 允许用户对书籍和文章发表评论 主表单有一个搜索输入 用于查找相关书籍或文章 来源 我使用 jQuery 根据输入的搜索词从外部站点动态加载新源 然后还使用 AJAX 返回列表中的源 我有两个问题 现在 在用户输入四个字符后 j
  • 使用css bootstrap时如何仅向一列添加右边框?

    我正在尝试使用CSS引导框架 http getbootstrap com css tables在我的项目中 我正在使用带有以下类的表table table bordered table striped 我想删除除第一列之外的所有列的边框 这
  • HTML 锚点,禁用样式

    我有一些 html 锚链接代码 与文档的其余部分不同 我希望它看起来不是链接 有没有一种简单的方法可以禁用由于将文本包装在锚标记中而引起的样式更改 而不必强行使其相同 即 如果我更改正文字体样式 我不必也更改其他一些 link东西 将颜色设

随机推荐

  • 如何在CSS选择器中排除特定的类名?

    当用户鼠标悬停类名为的元素时 我尝试应用背景颜色 reMode hover 但我不想改变颜色 如果元素also has reMode selected 注意 我只能使用 CSS 而不是 javascript 因为我在某种有限的环境中工作 为
  • 聚合物预载旋转器

    有时聚合物加载需要一段时间 并且在使用时 页面保持空白 直到一切准备就绪 有没有办法在页面提供服务和聚合物完成其魔力的时间之间显示某些内容 The 文档描述了unresolved属性清除了其中一些问题 虽然申请很常见unresolved t
  • 如何使用 React.js 在 Sails.js 上渲染服务器端模板?

    我正在尝试使用 Sails js 和 React 构建一个同构应用程序 客户端部分很简单 但我遇到了服务器端渲染的问题 当我尝试使用 React 服务器渲染 jsx 文件时 我得到了以下信息 renderToString You must
  • 使用 Retrofit v1.9.0 添加重复参数

    有一个类似的问题被问到here 但我的情况有点不同 我正在尝试提出类似于以下内容的请求 我有两个问题让事情变得困难 首先 重复参数 多次设置 foo 的值 会阻止使用QueryMap 我无法选择以不同的方式传递查询字符串中的值 就像作为数组
  • 选择递增整数

    我想知道是否可以从mysql表中选择递增的整数 如果可能的话 我怎样才能实现这一目标 我的情况是 我有一堆数据 我需要做INSERT INTO newtable SELECT somefield FROM sometable 然而 有一个字
  • Restangular POST 始终为空

    我想我不明白 POST 是如何在 RESTful api 中完成的 当在 Restangular 中创建一个新对象时 var user name John id 123 Restangular one building 5 post use
  • IIS7:为所有 aspx 页面设置“无缓存”,但不包括图像/css/js

    我不想在任何地方缓存我的 aspx 页面 由于某种原因 IE 忽略从我的母版页设置的元标记 我想看看是否可以将 Http 响应标头设置为 Cache Control no cache 设置类似 HttpContext Current Res
  • WiX XmlConfig:在 XmlConfig 中嵌套 XmlConfig 的目的

    目的和 或收益是什么 除了增加创建 删除属性的可读性之外 嵌套一个XmlConfig另一个元素中的元素XmlConfig元素 我所指的示例 我正在使用WiX 3 6
  • 将 Castle Windsor 与 SignalR 集成 - 我应该如何处理这个问题?

    我正在开始使用 SignalR 一旦配置完所有内容 它就可以很好地工作 然而 我开发的几乎所有应用程序都使用 Castle Windsor 因此能够将它们一起使用会很棒 我想这样做的原因是这样我可以在持久连接内使用 Castle 依赖项 服
  • 如何将包含“include”关联的记录转换为 JSON

    如果我做类似的事情 result Appointment find all include gt staff logger debug result inspect 那么它只打印出约会数据 而不打印出相关的员工数据 如果我执行 result
  • C# 如何使用共享 HttpClient 传递 cookie

    我进行了以下设置 JS 客户端 gt Web Api gt Web Api 我需要将身份验证 cookie 一路向下发送 我的问题是将其从一个 Web api 发送到另一个 由于与使用 FormsAuthentication 的旧系统集成
  • 导入模块在终端中有效,但在 IDLE 中无效

    我正在尝试导入pyodbcWindows 计算机上的模块 它可以在终端中运行 但不能在 IDLE 中运行 IDLE中的错误信息是 Traceback most recent call last File FilePath Filename
  • 从圆上的 3 个点计算圆的中心和半径

    有人可以显示可以快速完成此操作的代码吗 假设我们得到三分 p1 p2 p3 按左 gt 右顺序 因此 解决方案还应该检查圆是否有效 即 p1 p2 p3 是否是逆时针的 要计算圆参数 请查看 http paulbourke net geom
  • 连接 python 和 javascript 进行双向通信

    我想通过 python 提供来自 javascript 代码的查询 但我在这个领域根本没有经验 我想要构建的是这样的 1 请求 js open connection server py for var i 0 i lt 10 i docum
  • 检查 Android 上的互联网连接

    我有以下代码用于检查我的应用程序上的互联网连接 wifi EDGE GPRS 3G 代码是 public static boolean checkConn Context ctx ConnectivityManager conMgr Con
  • 当内存不足时,如何防止变长数组崩溃?

    在支持可变长度数组之前 我会像这样动态分配它们 int foo size t n int arr malloc n sizeof int if arr return ENOMEM not enough memory else do stuf
  • 生成签名 apk 时出现“:app:lintVitalRelease”错误

    我尝试在 Google Play 上上传我的 apk 但遇到错误消息 您上传了可调试 APK 出于安全原因 您需要先禁用调试 然后才能将其发布到 Google Play 了解有关可调试 APK 的更多信息 然后我写了android debu
  • 调用 ObjectSpace.count_objects 时哈希键的含义是什么?

    在 Ruby 1 9 YARV 中 您可以获取所有当前分配的对象的计数 如下所示 ObjectSpace count objects 它返回一个像这样的哈希值 TOTAL gt 1226560 FREE gt 244204 T OBJECT
  • C# ToDictionary 的 JavaScript 等效项

    我正在寻找一种方法来获取以下列表 directory name Albert age 40 gender M name Suzanne age 27 gender F name Robert age 19 gender M name Con
  • 像 **++* 这样的选择器使用起来安全吗?

    我最近在尝试找到一种轻松分隔主要博客元素 例如段落和图像 的方法时遇到了这个 CSS 选择器 它的使用示例如下 post margin top 15px or post gt margin top 15px if you don t wan