仅子级的 CSS 选择器,包括文本

2024-04-12

我需要选择<b>标签,但前提是这是 a 中唯一的内容<p>。例如,选择 b 中<p><b>hello</b></p>但不在<p><b>hello</b> world</p>。这可能吗?:only-child不这样做。


CSS 选择器对文本节点一无所知。因此,对内容使用 span 元素,如下所示:

<p>
  <b>hello</b><span>world</span>
</p>
<p>
  <span>world</span><b>hello</b>
</p>
<p>
  <b>hello</b>
</p>


p b:only-child{
  color:red;
}

如果某个元素是其父元素的唯一子元素,“独生子”选择器就会选择该元素。术语“子”指的是不仅仅是文本的元素。

对于第一个“p”,子级是“b”和“span”。

对于第二个“p”,子级是“b”和“span”。

对于第三个“p”孩子来说只有“b”

仅选择最后一个“p”中的“b”

<p>
  <b>hello</b>world ===> children is only b;
</p>
<p>
  world<b>hello</b> ===> children is only b;
</p>
<p>
  <b>hello</b> ===> children is only b;
</p>

所有“b”元素都将被选择

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

仅子级的 CSS 选择器,包括文本 的相关文章

  • 每 2 行后使 html 表格的边框变厚

    我创建了一个包含一些内容的表 其中有 12 行和 2 列 我想显示边框 但每 4 行之后 我想将水平边框设置为比正常情况更粗 怎么做 请在这里帮忙 试试这个选择器 table tr nth of type 4n td border bott
  • 如何以最短的等待时间加速 Java Selenium 脚本

    我目前正在开发一个 java selenium 项目 这通常是一个小脚本 我必须在其中检查每个元素是否存在 并基于触发一些操作 但我们主要关心的是完成脚本的持续时间 基本上 我在脚本中使用了下面的每一个并运行了测试 尽管在每种情况下脚本都在
  • 删除特定数据表上的所有边框

    我需要使用 PrimeFaces 隐藏一个数据表的所有边框 而不是全部 我尝试了很多事情 但没有人奏效 有谁知道该怎么做 我已将以下样式 单独 应用于ui datatable class border hidden important bo
  • html 电子邮件内的背景图像 css - Gmail 不支持

    我想向我的用户发送如下所示的带有背景图像 css 的 html 正文电子邮件 div style width 500px height 1000px background color black background image none
  • 在 ember-cli 中安装 Foundation 5

    我对 ember 相当陌生 对构建工具也很陌生 我目前正在使用通常的基础安装以及基础 cli 和指南针来编译我的 css 这有点痛苦 并且对于团队工作来说非常糟糕 我认为用 Bower 安装文件并使用会更好ember cli compass
  • 网站在 iPhone 屏幕右侧显示空白区域

    我遇到问题http eiglaw com http eiglaw com iPhone 屏幕右侧显示约 25 像素宽的空白 边框 我在 stackoverflow 上研究了这个问题 这些帖子是相关的 但是当我尝试提供的各种解决方案时 我无法
  • 如何在其他div id的悬停中使用div显示块

    如何打开div悬停时标记href tag 这是我在悬停 href 标签上显示 div 标签的代码 Services is id of href tag Services is id of div tag Service hover Serv
  • 固定 div 位于居中 div 旁边

    我有一个网页 其中有可滚动的内容 此内容包含在 content 内 位于页面的中心 现在我希望导航栏出现在内容左侧 50 像素处 该栏应具有固定位置 不应滚动 这是我到目前为止所尝试过的 nav position fixed top 50
  • 如何使使用 css 调整大小的图像在 IE 中看起来不错?

    当使用 css 宽度 高度或属性宽度 高度缩放图像时 IE6 和 IE7 无法很好地缩放网页中的图像 我不确定它默认使用哪种算法 但这不好 在这些浏览器中缩放时 缩放图像会显示锯齿伪影 幸运的是 有一种方法可以通过简单的 css 规则强制
  • 主页(网格)上的缩略图现在显得模糊。如何纠正?

    我不知道这看起来是否愚蠢 但从早上开始我就无法纠正这个突然出现在我的博客网站上的错误www candidopinions in http www candidopinions in 我有一个网格视图模板 其中博客文章中的特色图像作为调整大小
  • 为什么我的列表项项目符号与浮动元素重叠

    我有一个 XHTML Strict 页面 我在其中将图像浮动在常规文本段落旁边 一切都很顺利 除非使用列表而不是段落 列表的项目符号与浮动图像重叠 更改列表或列表项的边距没有帮助 边距是从页面左侧开始计算的 但浮动会将列表项推到右侧insi
  • 先按行再按列布局 div

    我有一个容器div and 3 div里面如下 div div 1 div div 2 div div 3 div div 不知道每一个的内容div内部 但它们的高度和宽度是可变的 集装箱的高度由最高的决定div inside 我想展示这些
  • 使用 css 简单地将对象居中,无需修改

    我想使用 CSS 将对象居中 而不需要任何技巧 这可能吗 如何实现 我已经尝试过了 但是我的 p 标签消失了 centered position fixed top 50 left 50 有多种方法可以使元素居中 但这取决于您的元素是什么以
  • 有角度的动态背景图片

    在 html 模板中 我有这种带有动态图像的样式 div style background none width 200px height 150px div 它适用于网络浏览器和 Android 浏览器 但是 使用 style 的动态背景
  • 最大宽度调整以适应文本?

    不是最好的标题 但无论如何 我有一个元素max width和一些文字 如果文本长度超过一行所能容纳的长度 我会得到以下结果 My text here hello everyone 换句话说 它占据了完整的最大宽度 但由于单词向下移动 右侧有
  • CSS 类命名约定

    在网页上 有两个控件块 主要和次要 大多数人会使用什么类名 选择一 div class primary controls div
  • 网站的主体和元素固定在 980px 宽度上,不会缩小

    我试图在 Rails 应用程序顶部启动前端 仅 HTML CSS 页面 但在使用 320px 视口时遇到问题 有些元素不会按比例缩小 我不明白为什么 我已经完成了检查元素 为各种元素提供了max width 100 and or width
  • CSS3 信封形状

    正如您可能已经猜到的 该图像是邮件信封形状的一部分 如果可能的话 我想使用 CSS3 创建该形状 我已经制作了其他部分 但这个很棘手 该形状需要两侧都有三角形切口和圆角 大概是 border radius bottom left borde
  • 表格行未扩展到全宽

    我有一个表格 当我将表格的宽度设置为 100 并将表格行的宽度设置为 100 时 没有任何反应或宽度发生变化 Table Normal position relative display block margin 10px auto pad
  • HTML 锚点,禁用样式

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

随机推荐

  • 在 mongoDB 中的同一 API 中并行查询同一文档

    我有一个用打字稿编写的 API 我尝试使用 Promise allsettled 对同一文档运行并行查询 但它的性能更差 我猜它们是按顺序运行的 有没有办法在 mongoDB 的同一连接中对同一文档执行并行查询 这是代码 console t
  • 绑定值未传递给 WPF 中的用户控件

    我仔细观察了很久 却被困住了 我试图通过 Window 的绑定将参数从 Window 传递到 UserControl1 在 MainWindow 中 UserControl1 被包含两次 一次通过 MyValue 上的绑定传递参数 MyCu
  • 如何使用 jpa 规范添加不同的属性进行查询

    我正在使用 jhipster 标准和 jpa 规范来实现研究端点 嗯 它正在工作 但请继续向我发送副本 此型号有前置 public class Prestation extends AbstractAuditingEntity implem
  • 删除字符串开头和结尾的换行符

    我注意到 trim 不会从字符串的开头和结尾删除换行符 因此我尝试使用以下正则表达式来完成此操作 return str replace s n s n g 这并没有删除新的线条 我担心我已经超出了我的能力范围 EDIT字符串是用 ejs 生
  • 使用 jQuery 实现打字机效果

    编辑 我并没有真正问我原来问题中应该问的所有问题 为了帮助寻找类似答案的人更容易找到答案 问题最终是这样的 如何制作带有闪烁光标的打字机效果 该光标在语句末尾暂停 擦除语句并写入新语句 看看下面 Yoshi 的回答 它正是这样做的 demo
  • Android jetpack 导航组件对话框结果

    到目前为止 我仅使用导航组件即可成功导航到对话框并返回 问题是 我必须在对话框中执行一些操作并将结果返回到调用对话框的片段 一种方法是使用共享视图模型 但为此我必须使用 of activity 这会让我的应用程序有一个单例占用内存 即使我不
  • 如何在图像视图上画一个圆圈

    如何在用户触摸图像的位置在图像上绘制一个圆圈 图像是使用imageview设置的 我在网上找到了一种解决方案 它在新画布上创建图像位图并在其上绘制圆圈 解决方案位于http joerg richter fuyosoft com p 120
  • 将您的 Web 应用程序发布到野外

    假设您已经编写了下一个社交网络现象 或任何其他网络应用程序 您已选择 Java Tomcat Apache 和 Oracle 或您喜欢的任何设置 您知道希望将其发布到网络上并让人们注册并开始使用它 对于您在家中编写并希望将其传播到野外的东西
  • 比较两个数据表并选择第二个表中不存在的行

    我有两个数据表 我想从第一个数据表中选择第二个数据表中不存在的行 例如 Table A id column 1 data1 2 data2 3 data3 4 data4 Table B id column 1 data10 3 data3
  • STL 绳索 - 何时何地使用

    我想知道在什么情况下你会在另一个STL容器上使用绳子 绳子是一根可伸缩的绳子 实施 它们是为 高效运作涉及 字符串作为一个整体 操作如 赋值 串联和 子字符串花费的时间几乎是 与长度无关 细绳 与 C 弦不同 绳索是 非常合理的代表 长字符
  • 如何使用dynamoose查询本地dynamoDB?

    作为一名开发人员 我不想一直连接到 Amazon Web 服务 我在本地计算机上安装了 DynamoDB 引用了AWS Docs https docs aws amazon com amazondynamodb latest develop
  • 使用 array.filter 进行多级过滤

    我有一个过滤功能 它使用filter快速搜索数组中的文本 filtered filtered filter row gt return Object keys row some key gt return String row key to
  • 将 crontab 文件替换为 -e

    有人知道如何将文件放入 crontab e 吗 我无法使用 crontab 的常规形式为其提供路径 但仍需要替换整个内容 也许将 EDITOR 设置为某些内容 您可以使用以下命令将 cron 作业从文件中获取到 crontab 中 cron
  • 包含 Angular 2+ 日期管道格式的文本

    我正在尝试使用DatePipe在 Angular 2 中 我希望输出日期的格式为 08 23 2017 at 11 07 AM 但是 我无法找出包含文本的正确方法at以我的日期格式 当我这样指定格式时 my date date MM dd
  • CGO_ENABLED 如何影响动态链接和静态链接?

    我们正在编译要在 docker 上运行的 Go 代码 并且正在调查为什么我们的二进制文件没有执行 我们发现它缺少一些动态库 尽管我们想要静态链接的二进制文件 这就是它的编译方式 env GOOS linux CGO ENABLED 1 GO
  • Mongodb 文本搜索多个字段

    我有一个 mongodb 文档 如下所示 document title suburb id date 我想添加一个搜索功能 人们可以通过郊区和标题搜索文档 我正在使用文本搜索功能 我想要这样的东西 var search and search
  • 如何在多台机器之间共享 zsh 历史记录?

    我对在机器之间共享配置文件感到非常满意 但我发现我经常想在 zsh Ctrl R 中搜索 但我不记得在哪台机器上输入了命令 理想情况下 我希望它可以从我的任何机器中搜索先前命令的规范重复数据删除列表 鉴于我有时会在没有网络连接的情况下同时在
  • 绕过 OPENQUERY 的字符限制失败使用 EXECUTE

    我目前正在使用 SQL Server Management Studio 17 连接到 Oracle 数据库实例 然后提取一些数据并将其插入到我拥有的 SQL Server 表中 我尝试过执行以下操作 DROP TABLE IF EXIST
  • 如何从magento前端上传产品图片

    我正在尝试在管理面板中上传产品的图片 它工作正常 但现在我想在前端上传产品的图像 我的意思是客户可以从前端上传产品的图像 那么这怎么可能呢 首先在媒体 导入中上传图像 if isset FILES file name FILES file
  • 仅子级的 CSS 选择器,包括文本

    我需要选择 b 标签 但前提是这是 a 中唯一的内容 p 例如 选择 b 中 p p b hello b p 但不在 p b hello b world p 这可能吗 only child不这样做 CSS 选择器对文本节点一无所知 因此 对