正文 

当前位置： 首页 > 知识 >

是否有文本节点的 CSS 选择器？

     2023-03-05     265

关键词：

【中文标题】是否有文本节点的 CSS 选择器？【英文标题】：Is there a CSS selector for text nodes? 【发布时间】：2022-01-04 17:49:55 【问题描述】：

我想做的（显然不是在 IE 中）是：

p:not(.list):last-child + :text 
  margin-bottom: 10px;

这会给文本节点一个边距。 （这甚至可能吗？）如何使用 CSS 获取文本节点？

【问题讨论】：

您可以使用::first-line 进行近似计算，尽管顾名思义，它仅适用于文本的第一行。 （另外，我认为只能设置一些属性） 【参考方案1】：

文本节点不能应用边距或任何其他样式，因此您需要应用样式的任何内容都必须在元素中。如果您希望元素内的某些文本具有不同的样式，请将其包装在 span 或 div 中，例如。

【讨论】：

我仍然非常想念文本节点上的 ::before 和 ::after。 I'm nevertheless desperately missing ::before and ::after on text nodes. 确实。他们可能不接受格式化，但他们肯定接受content。 问如何定位文本节点是一个完全合理的问题。我意识到 OP 专门说“边距”，但它们是其他样式，可以应用于文本节点，您可能希望将其应用于文本节点而不是父节点。例如，假设我想要文本下方的边框底部。将该边框底部应用于文本节点会产生所需的结果，但将其应用于父 div 会在整个 div 周围创建一个底部边框。当然，不幸的是，CSS 不允许您通过添加 HTML 元素来定位文本节点……至少现在是这样。 你可以为它设置字体，当然可以，但是没有应用任何其他样式 你现在只能做这样的事情***.com/questions/10645552/…【参考方案2】：

您不能使用 CSS 定位文本节点。我和你在一起;我希望你能......但你不能:(

如果您不将文本节点包装在 <span> like @Jacob suggests 中，则可以改为使用周围元素 padding 而不是 margin：

HTML

<p id="theParagraph">The text node!</p>

CSS

p#theParagraph

    border: 1px solid red;
    padding-bottom: 10px;

【讨论】：

【参考方案3】：

文本节点（不包含在特定标签中）现在可以使用::target-text pseudoelement 选择器在非常特定的用例中定位。匹配文本字符串的查询参数（url 编码；例如空格必须编码为%20）可以这样设置样式：

::target-text  /* color, background color, etc */

与其他highlight pseudoelements 一样，仅支持某些样式属性，如listed here。

有一个demo 用于此（父链接位于MDN page 上用于::target-text）。将“文本”的查询参数字符串更改为不同的字符串，以查看不同文本的样式。

::target-text 伪元素选择器的一个限制是只能设置第一个匹配的文本字符串的样式。此外，at 67.8%，截至 2022 年 1 月，浏览器支持并不多。

【讨论】：

截至 2022 年 2 月 13 日，::target-text 功能为实验性。

输入中的实际文本是不是有 CSS 选择器？ （对于“文本缩进”替代）[重复]

...(fora"text-indent"alternative)[duplicate]输入中的实际文本是否有CSS选择器？（对于“文本缩进”替代）[重复]【发布时间】：2021-07-2708:05:45【问题描述】：我需要使用transf 查看详情

js之dom操作

...性，读取节点类型3、hasChildNodes()：判断调用方法的节点是否存在子节点，存在返回true，不存在返回false。主流浏览器会将换行符、制表符、空格当做文本节点处理，IE9以下会忽略它们。4、childNodes：只读属性，获得节点的子节点... 查看详情

是否有任何 Java HTML 解析器在其中生成的节点保留原始文本的索引？

】是否有任何JavaHTML解析器在其中生成的节点保留原始文本的索引？【英文标题】：ArethereanyJavaHTMLparserswherethegeneratedNodesretainindexestotheoriginaltext?【发布时间】：2011-11-0922:01:29【问题描述】：我想以XML格式查询HTML文档（例如使用XP... 查看详情

是否有用于溢出的 css 伪选择器？

】是否有用于溢出的css伪选择器？【英文标题】：Isthereacsspseudoselectorforoverflow?【发布时间】：2012-10-2404:08:33【问题描述】：我正在尝试根据其父div是否溢出来改变其样式。.pDivdisplay:block;width:300px;height:100px;border:1pxsolidrgb(0,0,0);.cDi... 查看详情

是否有针对 IE10 的特定 CSS 选择器？

】是否有针对IE10的特定CSS选择器？【英文标题】：AreThereSpecificCSSSelectorsTargetingIE10?【发布时间】：2011-11-1108:59:42【问题描述】：由于IE在版本10中摆脱了条件cmets，我迫切需要找到专门针对IE10的“CSShack”。请注意，被“黑”的必... 查看详情

是否有一个 css 选择器可以选择当前元素之外的元素？ [复制]

】是否有一个css选择器可以选择当前元素之外的元素？[复制]【英文标题】：Isthereacssselectorwhichselectsanelementoutsidethecurrentelement?[duplicate]【发布时间】：2016-02-2718:53:42【问题描述】：代码比文字更能解释<divclass="parent"><spancla... 查看详情

是否有 CSS 不等于选择器？

】是否有CSS不等于选择器？【英文标题】：IsthereaCSSnotequalsselector?【发布时间】：2011-03-2204:54:05【问题描述】：在CSS中是否有类似!=（不等于）的东西？例如，我有以下代码：input......但是对于某些输入，我需要取消它。我想通过... 查看详情

前置所有 CSS 选择器

...allCSSselectors【发布时间】：2012-06-2501:08:38【问题描述】：是否有一个文本过滤器或javascript/jquery函数可以在样式表中的所有css选择器前面加上一些东西？我试图用twitterbootstrap只影响一个div，但它正在影响它之外的侧边栏，有没有... 查看详情

css节点选择器

基础选择器基础选择器是选择器的所有选择器的基本组成元素，也最简单，包含如下5个类别：ID选择器标签选择器类选择器属性选择器：类选择器算是一个特殊的属性选择器，通用的属性选择器举例如下：#css代码[href="http://w... 查看详情

是否有按类前缀的 CSS 选择器？

】是否有按类前缀的CSS选择器？【英文标题】：IsthereaCSSselectorbyclassprefix?【发布时间】：2011-03-2107:14:36【问题描述】：我想将CSS规则应用于其中一个类与指定前缀匹配的任何元素。例如我想要一个适用于类以status-开头的div的规... 查看详情

是否有可以在 C# 中使用的类似 jQuery 的 CSS/HTML 选择器？

】是否有可以在C#中使用的类似jQuery的CSS/HTML选择器？【英文标题】：IsthereajQuery-likeCSS/HTMLselectorthatcanbeusedinC#?【发布时间】：2010-12-0712:40:46【问题描述】：我想知道是否有可以在C#中使用的类似jQuery的css选择器。目前，我正在使... 查看详情

是否有可以在 Firefox 中测试 CSS 选择器的插件？

】是否有可以在Firefox中测试CSS选择器的插件？【英文标题】：Isthereanaddonwhichyoucantestcssselectorsinfirefox?【发布时间】：2011-01-1314:33:57【问题描述】：我想知道Firefox中是否有这样的插件，您可以在其中测试css路径以检查它们是否找... 查看详情

如何使用 jQuery 选择具有特定文本的中间节点：包含选择器？

】如何使用jQuery选择具有特定文本的中间节点：包含选择器？【英文标题】：HowtoselectmiddlenodeswithspecifictextusingjQuery:containsselector?【发布时间】：2021-02-2300:13:05【问题描述】：我想获取包含特定文本的html元素，我使用了:contains选... 查看详情

css选择器——属性选择器和基于元素结构关系的选择器

...器，于是css2引入了属性选择器。3.属性选择器　　a)根据是否存在该属性来选择　　　　如果希望选择有某个属性的元素，例如要选择有class属性的所有h1元素，使其文本为银色，可以这样写：/*根据单个属性来选择*/h1[class]{color:s... 查看详情

CSS 选择器（id 包含部分文本）

】CSS选择器（id包含部分文本）【英文标题】：CSSselector(idcontainspartoftext)【发布时间】：2012-08-2218:12:36【问题描述】：我有一个问题。我有这样的元素：&lt;a&gt;id=someGeneratedSome:Same:0:name的元素&lt;a&gt;id=someGeneratedSome:Same... 查看详情

是否有 CSS“haschildren”选择器？ [复制]

】是否有CSS“haschildren”选择器？[复制]【英文标题】：IsthereaCSS"haschildren"selector?[duplicate]【发布时间】：2012-08-2518:36:16【问题描述】：可能重复：IsthereaCSSparentselector?是否有一个css选择器我只能在子元素存在时使用？考虑... 查看详情

类似于 sublime 的“CSS 选择器列表”的结尾

...滑出的面板，按顺序列出了所有使用的CSS选择器。Sublime是否在包中提供上述功能 查看详情

路径中每个节点的 css 选择器

】路径中每个节点的css选择器【英文标题】：cssselectorforeverynodeinpath【发布时间】：2017-07-1102:13:24【问题描述】：我试图让一个div填充剩余屏幕空间的高度，并在这里找到了很好的答案：Makeadivfilltheheightoftheremainingscreenspace（选择... 查看详情