首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用css选择器从元素获取文本,但不包括嵌套元素中的文本

使用CSS选择器从元素获取文本,但不包括嵌套元素中的文本,可以通过以下方法实现:

  1. 使用:not()伪类选择器来排除嵌套元素。例如,如果要获取<div>元素中的文本,但不包括嵌套的<span>元素中的文本,可以使用以下选择器:
代码语言:txt
复制
div:not(div span) {
  /* 样式或其他操作 */
}

这将选择所有不是<div>元素的子元素中的文本。

  1. 使用::before::after伪元素来添加额外的内容,并通过CSS样式控制它们的显示。例如,如果要获取<div>元素中的文本,但不包括嵌套的<span>元素中的文本,可以使用以下样式:
代码语言:txt
复制
div::before,
div::after {
  content: "";
  display: none;
}

div {
  /* 样式或其他操作 */
}

这将在<div>元素的前后添加空的伪元素,并通过display: none隐藏它们。

  1. 使用JavaScript来处理。通过JavaScript可以更灵活地操作DOM元素和文本内容。以下是一个示例代码,用于获取<div>元素中的文本,但不包括嵌套的<span>元素中的文本:
代码语言:txt
复制
const divElement = document.querySelector('div');
const textContent = Array.from(divElement.childNodes)
  .filter(node => node.nodeType === Node.TEXT_NODE)
  .map(node => node.textContent)
  .join('');

console.log(textContent);

这段代码首先通过querySelector方法获取到<div>元素,然后使用childNodes属性获取到所有子节点,通过filter方法筛选出文本节点,再通过map方法获取到文本内容,最后使用join方法将文本内容拼接成一个字符串。

以上是三种常见的方法,可以根据具体情况选择适合的方法来获取元素的文本内容,但不包括嵌套元素中的文本。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Scrapy框架使用之Selector用法

在这里我们查找是源代码title文本,在XPath选择器最后加text()方法就可以实现文本提取了。 以上内容就是Selector直接使用方式。...值得注意是,选择器最前方加 .(点),这代表提取元素内部数据,如果没有加点,则代表根节点开始提取。此处我们用了./img提取方式,则代表a节点里进行提取。...现在为止,我们了解了ScrapyXPath相关用法,包括嵌套查询、提取内容、提取单个内容、获取文本和属性等。 4. CSS选择器 接下来,我们看看CSS选择器用法。...Scrapy选择器同时还对接了CSS选择器使用response.css()方法可以使用CSS选择器来选择对应元素。...因此,我们可以随意使用xpath()和css()方法二者自由组合实现嵌套查询,二者是完全兼容。 5. 正则匹配 Scrapy选择器还支持正则匹配。

1.9K40

如何使用CSS伪类选择器

/author/craig-buckler/[2] 总览 CSS选择器允许你通过类型、属性、位于HTML文档位置来选择元素。...如果一个元素能够被激活(如选择、点击或接受文本输入),或者能够获取焦点,则该元素是启用 :disabled:匹配一个被禁用输入框。...MDN解释::is()CSS伪类函数将选择器列表作为参数,并选择该列表任意一个选择器可以选择元素。这对于以更紧凑形式编写大型选择器非常有用。 你经常需要在不止一个元素上面应用相同样式。...任何选择器语法错误都会破坏所有元素样式。 像Sass这样CSS预处理器允许嵌套(这也将出现在原生CSS[6])。...但是: 在原生嵌套到来之前,你仍需要一个CSS构建工具。你可能想使用像Sass这样方案,但这可能给一些开发团队引入复杂性。 嵌套可能会导致其他问题。

2.2K40

『知识巩固#1』Html、Css基础整理

checked 表示默认选中 指选项默认值 multiple 上传文件时实现多选 value 给按钮添加或修改按键文字,包括submit、reset、button 单独button标签 也可以作为按钮使用...css写入style标签,通常约定为html文件head标签内 外联式 写入单独.css文件 通过link引入link 行内式 css 写在标签style属性 基础选择器...2 {css} 两者均包括 交集选择器:紧挨着 作用 选中页面同时满足多个选择器标签 选择器1.选择器2 {css} 满足既又原则 伪类选择器 hover 当鼠标放置到目标上时,样式改变 任何一个标签都可以写...display: inline-block 转换为行内块元素 display: inline 极少…… 转换规范: 块级元素作为大容器,可以嵌套很多元素,但是不能用小范围元素嵌套大范围元素 如p标签不能嵌套...div、p、h a标签内部可以嵌套任意元素,除了a标签 css特性 继承性 子元素没有的 从父元素处继承;子元素有的,不继承 可以理解为 父元素样式先赋给子元素元素自己样式又赋给自己 后者覆盖前者

4K20

CSS 基础

html5 html5 是html第五个演进版本 text 文本 text-align 属性,规定元素文本水平对齐方式...,该属性只给块元素设置,行元素设置没效果,该属性值为 center / left / right,可以设置块元素里面文本和图片对齐方式 text-indent 属性,规定文本首行文本缩进 p...-- 行元素可以通过块元素嵌套来达到文本水平对齐方式 --> 富强民主文明和谐,自由平等公证法制,爱国敬业诚信友善; 富强民主文明和谐,自由平等公证法制...属性,设置元素背景颜色属性为元素设置一种纯色,这种颜色会填充元素内容、内边距和边框区域,扩展到元素边框外边界(但不包括外边距),如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色...(255,0,0) ·background-image· 属性,为元素设置背景图像,元素背景占据了元素全部尺寸,包括 内边距 和 边框,但不包括外边距 background-color: red;

3.2K40

JQuery快速入门

:contains(text) 选取含有文本内容为text元素 :empty 选取不包含子元素或者文本元素 :has(selector) 选取含有选择器所匹配元素元素 :parent 选取含有子元素或者文本元素...表单选择器 :input 获取所有,,和元素 :text,:password,:hidden 获取所有单行文本框/密码框/不可见元素...之前就介绍$(document).ready()相信大家都不会陌生,其与window.onload实际上有一些区别的,前者是当DOM加载完成后触发,而后者则是页面所有元素(包括所有关联元素)加载完成后执行...对于jQuery事件来说,其均使用事件冒泡机制,而不支持时间捕获机制(可以用原生js)。...事件冒泡就是当页面上有个元素时,其中一个嵌套在另一个,如果均绑定了click事件,那么触发内层元素click事件时,会同时触发外部click事件。

2.5K100

1-选择器与DOM对象

$("#has").text("文本插入"); 2.5.html()函数  指定元素第一个元素获取html内容,以字符串形式返回。...()函数 获得匹配元素集合每个元素相邻同胞元素,如果提供选择器,则取回匹配该选择器下一个同胞元素。... 3.6,remove()函数 移除被选元素包括所有文本和子节点。 该方法不会把匹配元素 jQuery 对象删除,因而可以在将来再使用这些匹配元素。...=== $p // 将移除了n6追加到body元素起始位置 // 虽然在前面n6已经文档中被移除 // 但不会将其jQuery对象移除,因此我们还可以使用该jQuery对象,将n6再次放入文档...3.8, empty() 函数  被选元素移除所有内容,包括所有文本和子节点。 3.9, replaceWith() 函数  将指定 HTML 内容或元素替换被选元素

2.8K110

前端开发学习──CSS(1)

通过使用CSS可以实现表现和内容分离,同时提高了页面浏览速度,也更加易于维护和改版 CSS选择器 CSS 两个主要部分构成:选择器,以及一条或多条声明。 选择器{声明1;......一个标签只能调用一个ID选择器 一个标签可以同时调用类选择器和ID选择器 通配符选择器:给所有的标签都使用相同样式,不推荐使用,增加浏览器和服务器负担 *{属性:值;} 复合选择器 概念:两个或者两个以上基础选择器通过不同方式连接在一起...只要能代表标签,标签、类选择器、ID选择器自由组合 后代选择器首选要满足包含(嵌套)关系。 父集元素在前边,子集元素在后边。 子代选择器 选择器>选择器{属性:值;} ?...文本元素 常用属性 font-size:16px; 文字大小 font-weight: 700 ; 值100-900,文字粗细,不推荐使用font-weight:bold; font-family...(不推荐使用) 标签分类 块元素 典型代表,Div,h1-h6,p,ul,li 特点: ★独占一行 ★可以设置宽高 ★ 嵌套(包含)下,子块元素宽度(没有定义情况下)和父块元素宽度默认一致。

73610

jQuery

2.1.1 基础选择器 名称 用法 描述 ID选择器 $(’#id’) 获取指定ID元素 全选选择器 $(’*"’) 匹配所有元素选择器 $(".class") 获取同一类class元素 标签选择器...$(“ul>li”); 使用>号,获取亲儿子层级元素;注意,并不会获取孙子层级元素 后代选择器 $(“ul li”); 使用空格,代表后代选择器获取ul下所有li元素包括孙子等 2.1.3...获取li元素,选择索引号为2元素,索引号index0开始。...:odd $(“li:odd”) 获取li元素,选择索引号为奇数元素 :even $(“li:even”) 获取li元素,选择索引号为偶数元素 2.1.4 其他选择器 语法 用法 说明...($('div').html());// 123 $('div').html('ljc'); //div只剩ljc 普通元素文本内容 只会获取文本内容

8.4K10

CSS第二天

> .mark { css } ⭕并集选择器 找到多类元素 选择器之间通过 ,分隔 div,p,span { css } 交集选择器 找同时满足多个选择器元素 选择器之间紧挨着 p.mark { css...} ⭕hover伪类选择器 选中鼠标悬停在元素状态 :hover a:hover { css } 选择器注意点: 后代选择器选择器选择器之前通过 空格 隔开 子代只包括:儿子 并集选择器:...、button、select…… 特殊情况:img标签有行内块元素特点,但是Chrome调试工具显示结果是inline 默认有一个间隙,那个间隙是写代码换行那个间隙,你把代码排成一排,就没有间隙了...注意点: p标签不要嵌套div、p、h等块级元素 a标签可嵌套任意元素,但a标签不能嵌套a ---- CSS 三大特性: 1️⃣继承性: 子元素有默认继承父元素样式特点(子承父业) 可通过调试工具判断样式是否可继承...important写在属性值后面,分号前面!!important不能提升继承优先级,只要是继承优先级最低!实际开发不建议使用 !important 。

1.2K10

探索CSS入门到精通Web开发(二)

本书将通过一系列深入浅出方式,带你入门到精通CSS,探索Web开发奥秘。...你将学到: CSS基础知识: 我们会CSS基础语法和常用属性开始,让你了解如何使用CSS来设置网页样式,包括文字样式、颜色、布局等方面。...CSS预处理器: 介绍CSS预处理器(如Sass和Less)使用,以及它们如何帮助你更高效地编写和管理CSS代码。.../my.css"> 行内式: css写在标签style属性 作用范围 当前标签 配合js使用 zhishiyigedivbaioqian 基础选择器: 标签选择器: 就是以标签来命名选择器...:inline-block转换成行内块元素 display:inline 转化成行内元素 特殊注意:p标签不要嵌套div p h等块级元素 a标签内部不能嵌套a标签 盒子模型: 页面每一个标签多可以称为盒子

13010

探索CSS入门到精通Web开发(二)

本书将通过一系列深入浅出方式,带你入门到精通CSS,探索Web开发奥秘。...你将学到: CSS基础知识: 我们会CSS基础语法和常用属性开始,让你了解如何使用CSS来设置网页样式,包括文字样式、颜色、布局等方面。...CSS预处理器: 介绍CSS预处理器(如Sass和Less)使用,以及它们如何帮助你更高效地编写和管理CSS代码。.../my.css"> 行内式: css写在标签style属性 作用范围 当前标签 配合js使用 zhishiyigedivbaioqian 基础选择器: 标签选择器: 就是以标签来命名选择器...:inline-block转换成行内块元素 display:inline 转化成行内元素 特殊注意:p标签不要嵌套div p h等块级元素 a标签内部不能嵌套a标签 盒子模型: 页面每一个标签多可以称为盒子

13510

CSS笔记(3)

实际开发都是外部样式表,适合于样式比较多情况,核心是:样式单独写到CSS文件,之后把CSS文件引入到HTML页面中使用. 1.新建一个后缀为.css样式文件,把所有的CSS代码都放入此文件.... 2.在html页面,使用标签引入这个文件 Emmet语法 Emmet语法前身是...常用复合选择器包括:后代选择器,子选择器,并集选择器,伪类选择器等等. 1.后代选择器(重要) 后代选择器又称为包含选择器,可以选择父元素里面的子元素.其写法就是把外层标签写在前面,内层标签写在后面...因为a链接在浏览器具有默认样式,所以我们在实际工作中都需要给链接单独指定样式. 2.focus伪类选择器 :focus伪类选择器用于获取焦点表单元素....焦点就是光标,一般情况表单元素才能获取,因此这个选择器也主要针对于表单元素来说. 效果如下: 当鼠标点击文本框时,边框颜色会变化.

47710

探索CSS入门到精通Web开发(二)

本书将通过一系列深入浅出方式,带你入门到精通CSS,探索Web开发奥秘。...你将学到: CSS基础知识: 我们会CSS基础语法和常用属性开始,让你了解如何使用CSS来设置网页样式,包括文字样式、颜色、布局等方面。...CSS预处理器: 介绍CSS预处理器(如Sass和Less)使用,以及它们如何帮助你更高效地编写和管理CSS代码。.../my.css"> 行内式: css写在标签style属性 作用范围 当前标签 配合js使用 zhishiyigedivbaioqian 基础选择器: 标签选择器: 就是以标签来命名选择器...:inline-block转换成行内块元素 display:inline 转化成行内元素 特殊注意:p标签不要嵌套div p h等块级元素 a标签内部不能嵌套a标签 盒子模型: 页面每一个标签多可以称为盒子

14910

前端之CSS内容

二、CSS语法 1、CSS实例 每个CSS样式由两个组成部分:选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 ?...2、CSS注释 /*这是注释*/ 三、CSS几种引入方式 1、行内样式 行内式是在标记style属性设定CSS样式。不推荐大规模使用。...*/ p[title="213"] { color: green; } 4、分组和嵌套 4.1 分组 当多个元素样式相同时候,我们没有必要重复地为每个元素设置样式,我们可以通过在多个选择器之间使用逗号分隔分组选择器来统一设置元素样式...其实是按照不同选择器权重来决定,具体选择器权重计算方式如下图: ? 除此之外还可以通过添加 !import 方式来强制让样式生效,但不推荐使用。因为如果过多使用 !...也就是说,该元素不但被隐藏了,而且该元素原本占用空间也会页面布局消失。

5.2K100

python3 爬虫学习:爬取豆瓣读书Top250(三)

CSS选择器 点击查看更多CSS选择器详细介绍 在htmlCSS选择器,用‘#’代表‘id’,用‘.’代表‘class’。...当两个选择器中间有空格时,它表示一个子元素选择器。...嵌套可以是任意层级,只要后面那个选择器在前面的选择器里面。如果只需要直接嵌套在第一层符合条件元素,可以用 > 分隔。比如:.item > .book。...我们使用BeautifulSoup对象select()方法,将CSS选择器作为参数传入到select()里面,可以把下面的例子改写一下: #查找所有属性为class = 'pl2' div 标签...= i.find('a') #获取a标签文本内容用tag.text,但是这里还可以这样写:获取a标签title属性值 name = tag['title'] #获取a标签href

1.4K10

CSS技术入门

基础概念选择器要在 HTML 元素设置 CSS 样式,你需要在元素设置 "id" 和 "class" 选择器CSS id 选择器以 # 来定义class 选择器用于描述一组元素样式,class...important" 规则优先级最大;样式声明方式:点 .a.b获取同时含有a和b元素空格(也叫做选择器嵌套)A B 表示选择A元素所有后代B元素大于符号 >A>B 表示选择A元素所有亲儿子后代...:bold;}盒子模型CSS 盒模型本质上是一个盒子,封装周围 HTML 元素,它包括:边距,边框,填充,和实际内容。...样式分组和嵌套在样式表中有很多具有相同样式元素。h1{ color:green;}h2{ color:green;}为了尽量减少代码,你可以使用分组选择器。...每个选择器用逗号分隔.在下面的例子,我们对以上代码使用分组选择器:h1,h2{color:green;}嵌套选择器它可能适用于选择器内部选择器样式。

2.8K61

CSS学习笔记(基础篇)

---- 文本元素 属性 font-size:50px; //文字大小 font-weight: 700; //值100-900,文字粗细,700约等于Bold,不推荐使用...(不推荐使用,转行内元素最好使用display: inline-block;) 浮动作用 文本绕图 ? 制作导航(经常使用) 把无序列表ul li 浮动起来做成导航。 网页布局 ?...特点: 1.元素使用绝对定位之后不占据原来位置(脱标) 2.元素使用绝对定位,位置是浏览器出发。 3.嵌套盒子,父盒子没有使用定位,子盒子绝对定位,子盒子位置是浏览器出发。...4.嵌套盒子,父盒子使用定位,子盒子绝对定位,子盒子位置是从父元素位置出发。 5.给行内元素使用绝对定位之后,转换为行内块。...通常情况下,这个由很多小背景图像合成大图被称为精灵图,如下图所示为淘宝网站一个精灵图。 ? 工作原理: CSS 精灵其实是将网页一些背景图像整合到一张大图中(精灵图)。

4.5K30

前端入门系列之CSS

内联样式 内联样式是仅影响一个元素CSS声明,被 style 属性包括着: <!...这种情况下,每一对括号必须逻辑上嵌套,跟嵌套 HTML 元素标签嵌套方式相同。...1 边距 margin: 0; 2 行高 另一个例子是 line-height,设置元素每行文本高度。你可以使用单位设置特定高度,但使用一个无单位值往往更容易,它就像一个简单乘法因子。...第三个和第四个选择器在链接文本颜色样式上进行竞争——第二个选择器获胜,使文本变白,因为缺少一个元素选择器,缺少选择器被换成类选择器,它值是十,而不是个位。所以专用性值为113和104。...(没有应用任何样式时,先使用自定义属性,否则使用默认样式) inherit 值是最有趣——它允许我们显式地让一个元素其父类继承一个属性值。 让我们看一个例子。

2.6K10
领券