`
yanzhihong23
  • 浏览: 59184 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

css selector 选择器

    博客分类:
  • css3
 
阅读更多

 父子兄弟

a > b     b必须是a的子元素

a + b     b必须紧跟在其同胞标签a的后面

a ~ b     b必须跟(不一定紧跟)在其同胞标签a的后面

* 有个非常有意思的用法,即非子选择符

a * b     任何是a孙子元素,而非子元素的b标签都会被选中

 

在HTML5中,属性值的引号可加可不加

 

UI伪类

链接伪类

a::link

a::visited

a::hover

a::active 

     如果不按照这里列出的顺序使用它们,浏览器可能不会显示预期结果,建议大家可以这
么想:“LoVe? HA! ”
 

target伪类

     e::target 如果用户点击一个指向页面中其他元素的链接,则那个元素就是目标(target),可以

用::target 伪类选中它。维基百科在其引证中大量使用了:target 伪类

 

结构化伪类

     ::first-child

     ::last-child

     ::nth-child(n)     最常用于提高表格的可读性

 

伪元素

     ::first-letter  用例   This

     ::first-line

     ::before

     ::after

     可用于在特定元素前面或后面添加特殊内容

     eg.      <p class="age">25</p>

               p.age::before {content:"Age: ";} 

               p.age::after {content:" years.";}

               result:     Age: 25 years.

 

分享到:
评论

相关推荐

    CSSSelector生成器

    CSSSelector生成器是一款帮助开发者快速、准确创建CSS选择器的工具,尤其对那些不熟悉高级选择器或需要优化选择器效率的开发者而言,它具有很大的价值。 **JavaScript开发与CSS相关** JavaScript,一种广泛使用的...

    selenium css selector 定位详解

    而CSS选择器(CSS Selector)是Selenium进行页面元素定位的一种非常重要的方式。本文将详细介绍如何使用Selenium配合CSS选择器来进行页面元素的精准定位。 #### 二、CSS选择器简介 CSS选择器是用于匹配文档中的...

    SelectorGadget CSS选择器

    SelectorGadget是一款强大的浏览器插件,专为网页开发者和设计师设计,主要功能是自动化生成CSS选择器。在网页开发过程中,我们经常需要精确地定位HTML元素以便进行样式修改或JavaScript操作,而SelectorGadget则能...

    css-selector-tokenizer, 解析和 stringifies CSS选择器.zip

    css-selector-tokenizer, 解析和 stringifies CSS选择器 CSS模块:CSS选择器标记器解析和 stringifies CSS选择器。import Tokenizer from "css-selector-tokenizer";let input = "a#content.act

    CSS 学习笔记之CSS Selector

    CSS选择器是CSS(层叠样式表)中用于定位网页元素并为其添加样式的重要工具。理解并熟练掌握CSS选择器是每个前端开发者的基础技能。下面将详细解释CSS选择器的各种类型及其用法。 1. 类型选择器: 类型选择器是最...

    复制Css选择器「Copy Css Selector」-crx插件

    扩展开发工具和上下文菜单,添加...用鼠标右键单击元素并选择复制Css选择器菜单项到缓冲区,所以您可以将复制的选择器复制到任何文本编辑器。 对于快速获取选择器来测试框架(如Selenium)非常有用。 支持语言:English

    JSoup CSS选择器用法大全

    下面将详细介绍 JSoup 支持的各种 CSS 选择器及其用法。 1. **基本选择器**: - `*`: 通配符选择器,匹配任何元素。 - `tag`: 按照元素名称选择,如 `div` 选择所有的 `&lt;div&gt;` 元素。 - `#id`: 通过元素的 ID ...

    WebDriver xpath css selector

    CSS selector(层叠样式表选择器)是一种用于选取HTML和XML文档中元素的语言,它广泛地应用于Web开发中的CSS样式设置。在WebDriver中,我们同样可以使用CSS selector来定位元素,这通过find_element_by_css_selector...

    CSS选择器-.pdf

    根据 W3C 标准,元素选择器又称为类型选择器(type selector),它匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。例如,下面的规则匹配文档树中所有 h1 元素: h1 {font-family: ...

    postcss-selector-namespace:使用postcss命名CSS选择器

    postcss-选择器命名空间 安装 $ npm install postcss-selector-namespace 用法 var postcss = require ( 'postcss' ) var selectorNamespace = require ( 'postcss-selector-namespace' ) var output = postcss ( ) ...

    css-selector:CssSelector组件将CSS选择器转换为XPath表达式

    Symfony的CssSelector组件正是为了将CSS选择器转换为XPath表达式而设计的。它基于Python的cssselect库,这个库实现了W3C CSS Selectors Level 3的大部分功能,并遵循BSD许可证。通过这个组件,开发者可以轻松地在...

    postcss-selector-parser:CSS选择器解析器,与postcss集成,但不需要它

    postcss选择器解析器 选择器解析器,具有用于处理选择器字符串的内置方法。 安装 使用可以: npm install postcss-selector-parser 快速开始 const parser = require ( 'postcss-selector-parser' ) ; const ...

    CSS3选择器教辅.pdf

    - :root、:empty、:target、:enabled、:disabled、:checked、:not(selector)等:这些选择器用于选择文档根元素、没有子元素的元素、URL片段标识符指向的元素、启用或禁用的表单控件、被选中的单选或复选框、不属于...

    CSS Selector Helper for Chrome:trade_mark:-crx插件

    语言:English 开发工具侧栏,可帮助查找Selenium WebDriver测试的唯一CSS选择器。 与浏览HTML相比,Chrome:trade_mark:CSS...6)找到CSS选择器*后,单击“选择器到剪贴板”按钮以复制完整且格式正确的选择器。 7)要

    CSS选择器测试器「CSS Selector Tester」-crx插件

    用CSS Selector Tester快速测试你的CSS选择器!在选择器文本字段中创建或复制选择器,匹配的HTML元素将突出显示并计数。确保你的CSS选择符与你打算的元素匹配! 1.3.3 - 小错误修复,固定图标。 1.3.2 - 小错误修复...

    谷歌浏览器插件 SelectorsHub 编写和验证xpath、cssSelector、Playwright

    它可以作为智能编辑器来编写和验证xpath、cssSelector、Playwright选择器、jQuery和JSPath。SelectorHub还可以用于自动生成唯一的#xpath、css选择器和所有可能的选择器。 but,毕竟是机器生成的,路径有时候不是很...

    前端开源库-css-selector-extract

    【前端开源库-css-selector-extract】是一个专门用于前端开发的开源工具,它的主要功能是能够从CSS代码中高效地提取出指定的CSS选择器。这个工具对于开发者来说尤其有用,因为它可以帮助他们更好地理解和分析项目中...

    CssSelector组件将CSS选择器转换为XPath表达式。-PHP开发

    CssSelector组件CssSelector组件将CSS选择器转换为XPath表达式。 资源文档贡献报告问题,并在Symfony主存储库中发送拉取请求CssSelector组件CssSelector组件将CSS选择器转换为XPath表达式。 资源文档贡献报告问题,...

    postcss-prefix-selector:使用选择器为所有CSS规则添加前缀

    postcss前缀选择器 使用自定义命名空间.a =&gt; .prefix .a每个CSS选择器添加前缀。 目录 安装 $ npm install postcss-prefix-selector 与PostCSS结合使用 const prefixer = require ( 'postcss-prefix-selector' ) ...

    ABBAdata CSS Selector Finder-crx插件

    包含以下功能:-高度可定制CSS选择器生成:-启用/禁用ID,类名称,标签名称-过滤出特定ID,类名称,标签名称-使用特定属性和/或属性值-使用备用选择器根元素-易于使用的界面,可测试任意CSS选择器并突出显示所有匹配...

Global site tag (gtag.js) - Google Analytics