CSS选择器（selector）

最新推荐文章于 2024-05-29 22:48:09 发布
最新推荐文章于 2024-05-29 22:48:09 发布
阅读量2.1k 收藏 15
点赞数 4
分类专栏： HTML+CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_23062949/article/details/104243592
版权

目录

1. 通用选择器（universal selector）

在这里插入图片描述

2. 元素选择器（type selectors）

在这里插入图片描述

3. 类选择器（class selectors）

在这里插入图片描述

4. id选择器（id selectors）

一个HTML文档里面的id值是唯一的，不能重复
在这里插入图片描述

5. 属性选择器（attribute selectors）

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6. 后代选择器（descendant combinator）

在这里插入图片描述

7. 子选择器（child combinators）

在这里插入图片描述

8. 相邻兄弟选择器（adjacent sibling combinator）

在这里插入图片描述

9. 全体兄弟选择器（general sibling combinator）

在这里插入图片描述

10. 交集选择器

在这里插入图片描述

11. 并集选择器

在这里插入图片描述

12. 伪类（pseudo-classes）

① 动态伪类

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

② 结构伪类

:nth-child(数字)

在这里插入图片描述

:nth-child(n)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

:nth-last-child()

:nth-last-child()的语法跟:nth-child()类似，不同点是:nth-last-child()从最后一个子元素开始往前计数

:nth-of-type()

在这里插入图片描述

:nth-last-of-type()

在这里插入图片描述

:empty

在这里插入图片描述

其它

在这里插入图片描述

③ 元素状态伪类 :enabled :disabled :checked

在这里插入图片描述

④ 否定伪类 :not()

在这里插入图片描述
在这里插入图片描述

⑤ 目标伪类 :target

在这里插入图片描述

⑥ 语言伪类 :lang()

语言伪类很少用

13. 伪元素（pseudo-elements）

在这里插入图片描述

① ::first-line

在这里插入图片描述

② ::first-letter

在这里插入图片描述

③ ::before 和 ::after

在这里插入图片描述

gewen_1988
关注
  • 4
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
十个常用的 CSS Selector
Johnny0079的博客
03-19 2747
#01 ID Selector 格式：#id值 用于选取拥有 id 这个属性，并且 id 属性值相等的 HTML 元素，例： <div id="the-id">Hello World</div> #the-id { font-size: 24px; backgroud-color: yellow; padding: 8px; } id 在整个 HTML 页面内必须是唯一的，一个 id 只能用在一个 HTML 元素上，而一个 HTML 元素也只能有一个 id #0
JSoup CSS选择器用法大全
08-15
下面将详细介绍 JSoup 支持的各种 CSS 选择器及其用法。 1. **基本选择器**： - `*`: 通配符选择器，匹配任何元素。 - `tag`: 按照元素名称选择，如 `div` 选择所有的 `<div>` 元素。 - `#id`: 通过元素的 ID ...
元素定位之CssSelector
wld的博客
02-18 959
元素定位之CssSelector 一：使用chrome console检查css selector/xpath的有效性【检查】 步骤 1. 按F12打开chrome的开发者工具； 2. 再按Esc键调出console，chrome的Elements和Console展示在同一个窗口，便于查看。 3、在Console控制太重输入 ...
css选择器权重介绍
spider_man
10-27 257
选择器与伪元素的权重情况：高权重的选择会覆盖低权重的展示样式 选择器 表达式或示例 说明 权重 行内选择器 style="" 1000 id选择器 #aaa 100 类选择器 .aaa 10 标签选择器 h1 元素的tagname 1 属性选择器 img[alt]、div[class^='pus'] 10 相邻选择器 selecter...
css selector 元素定位
最新发布
qq_20878673的博客
05-29 1091
作为一种具有强大定位功能的元素定位方法，css selector可根据元素任意属性进行定位，又可根据元素位置进行定位，是定位元素的最终解决办法之一。CSS（Cascading Style Sheets）是一种语言，他用来描述HTML和XML文档的表现，CSS使用选择器来为页面元素绑定属性。这些选择器可以被Selenium用作另外的定位策略。CSS可以较为灵活的选择空间的任意属性，一般情况下定位速度比XPth快，CSS选择器常见语法如表所示.CSS选择器的常见语法选择器例子描述.class。
selenium：css_selector定位详解
三丰的博客
11-03 4942
selenium：css_selector定位详解 selenium：css_selector定位详解（css selector和xpath的比较） 来源：https://www.cnblogs.com/haifeima/p/10138154.html 目录 selenium使用css selector和xpath的比较 selenium提供的定位方式（常用） 推荐的定位方式的优先级 针对css selector和xpath的优先级做一个简单的说明 定位元素的注意事项（划重点
selenium学习----CSS selector
YGJ的博客
04-30 1705
CSS Selector选择web页面的元素
[前端笔记002]CSS的基础知识及选择器 -- selector
记一些学习笔记
11-08 522
CSS的基础知识及常用选择器，selector
自动化测试元素定位-CssSelector常用定位方式总结
u013976938的专栏
03-04 2414
CSS选择器的常见语法： 1. 根据 标签定位 tagName(定位的是一组，多个元素） e.g：find_element_by_cssSelector("div") 2. 根据 id属性定位(注意id使用#表示） e.g: find_element_by_cssSelector("#eleid") e.g: find_element_by_cssSelector("div#eleid") 3. 根据className属性定位（注意class属性使用.) e.g: find_element_.
CSS学习之CSS Selectors
tjl_moby的博客
08-30 406
CSS Selectors
css选择器(selector) xPath的选择器
09-25
去年我学jQuery的时候，曾经做过一点选择器（selector）的笔记,今天是CSS的选择器，以后还有一部分xPath的选择器。今天的笔记中包括44个选择器，基本涵盖了CSS 2和CSS 3的所有规定
SelectorGadget CSS选择器
05-27
SelectorGadget是一款强大的浏览器插件，专为网页开发者和设计师设计，主要功能是自动化生成CSS选择器。在网页开发过程中，我们经常需要精确地定位HTML元素以便进行样式修改或JavaScript操作，而SelectorGadget则能...
CSS选择器
01-08
Web前端css3选择器 参考文档： https://man.ilovefishc.com/css3/ 一、基本选择器 选择器 类型 功能描述 * 通配选择器 选择文档中所有的html元素 E 元素选择器 选择指定的类型的html元素 id ID选择器 ...
postcss-selector-namespace:使用postcss命名CSS选择器
05-13
postcss-选择器命名空间 安装 $ npm install postcss-selector-namespace 用法 var postcss = require ( 'postcss' ) var selectorNamespace = require ( 'postcss-selector-namespace' ) var output = postcss ( ) ...
CSS 学习笔记之CSS Selector
09-24
CSS选择器是CSS（层叠样式表）中用于定位网页元素并为其添加样式的重要工具。理解并熟练掌握CSS选择器是每个前端开发者的基础技能。下面将详细解释CSS选择器的各种类型及其用法。 1. 类型选择器： 类型选择器是最...
postcss-prefix-selector:使用选择器为所有CSS规则添加前缀
05-12
使用自定义命名空间.a => .prefix .a每个CSS选择器添加前缀。 目录 安装 $ npm install postcss-prefix-selector 与PostCSS结合使用 const prefixer = require ( 'postcss-prefix-selector' ) // css to be ...
CSS高级篇——更多选择器 (selectors)
老梁的专栏
10-02 1134
前面我们学习过，，这几种选择器配合起来使用可以让我们精确定位 HTML 元素。本篇要介绍的几个功能更加强大。
关于CSS selector 错误 Unsupported or invalid CSS selector: "%s"' % token)
ScanQ的博客
05-10 4344
'Unsupported or invalid CSS selector: "%s"' % token)ValueError: Unsupported or invalid CSS selector: "li&gt;"我出现这个错误   是因为修改css selector时把li后面的空格也删掉了   所以css selector 修改时要注意不要乱删除空格...
css selector什么意思
kexin178的博客
01-27 505
css selector指的是css选择器，是用来匹配网页中的dom元素的，常用选择器可分为标签名选择器、类选择器、id选择器、派生选择器、子元素选择器、分组选择器和伪元素选择器。 推荐：《css视频教程》 css selector指的是css 选择器，是用来匹配网页中的dom元素的，css样式的定义为：选择器{样式}。“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。 要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。HTML页
python selector css选择器
08-20
- *1* [css-selector：CssSelector组件将CSS选择器转换为XPath表达式](https://download.csdn.net/download/weixin_42100971/15059499)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值