css模糊匹配

1、全局选择器

  就是通配符 *

2、元素选择器

  如ul li p h1 div等

3、类选择器

  如.className{}

4、id选择器

  如#identity{}

5、属性选择器

CSS2支持的属性选择器用一个表达式[{属性 | 属性 {= | |= | ~=} 值}]

  [class="a"]只能匹配class="a"的元素

[class~="a"]则可以匹配class="a"、class="a b"的元素

[lang|=en]则可以匹配lang="en"、lang="en-us"的元素。

CSS3新增*=、^=、$=三种匹配方式[{属性 | 属性 {*= | ^= | $=} 值}]

*=表示模糊匹配,[href="163"]可以匹配href="163.com"、href="mail.163.com"等元素;

^=表示以指定字符开头,[href^="/"]则匹配href="/a/a.htm"、href="/b"的元素

$=表示以指定字符结尾,[scr$=".png"]则匹配所有png图片,如src="logo.png"

6、组选择器

简单说就是","选择器,如.className,#identity,td,th,li{},实现代码公用,实际开发过程随处可见。

7、关系选择器

后代选择器即空格" ",匹配父节点所有子孙节点。

    子选择器即">",匹配父节点直接子节点。

    下面代码段中,只有ol中的li标签不会被ul>li{}匹配

    <ul>

      <li></li>

      <li>

        <ol>

          <li></li>

        </ol>

      </li>

    </ul>

    相邻兄弟选择器即"+",匹配与之相邻、同时拥有相同父节点的节点(如若中间存在文本节点,文本节点将被忽略)。

    下面的第一个p标签将被h1+p{}匹配:

    <h1>我是标题</h1>

    我是纯粹的文本节点

    <p>我是文字</p>

    <p>我也是文字</p>

    广义兄弟选择器即"~",匹配位置在其后且具有相同直接父节点的节点。

8、伪类选择器

    CSS1支持开始:link :visited :active,但只是提供给a标签使用,而且这三个伪类之间是互斥的,也就是:link:active的组合是不生效的。CSS2新增了:hover :focus,而且不再局限于a标签,到这里我们最熟悉的伪类已悉数上场,下面来分析一下其区别。先来引入一个动态伪类的概念,如:hover :focus :active,也就是说这些伪类是在交互过程中动态添加到目标元素的(动态的状态),与之相对应的就是静态伪类,如:link :visited,表示的是元素的静态的状态。静态伪类和动态伪类内部是互斥的,不能进行组合,而静态和动态之间可以进行组合使用,如a:link:focus{} a:visited:focus{}会生效,而a:visited:link是不生效的。

    此外CSS2还支持了:first-child和:lang,需要注意的是:first-child是对元素本身状态的描述,而非其它元素,比如li:first-child的意思是“这个li是第一个子节点”,而非“li元素里面的第一个子节点”,这也是伪类和伪元素容易混淆的原因所在(第九点有说明)。:lang(char)相当于属性选择器[lang|=char],匹配的是带有char(举例)本身及连字符的元素,如char、char-ca、char-be等。

    CSS3为我们带来了更加广泛的伪类选择器…待续

9、伪元素选择器

  可能很多人会在伪类和伪元素之间迷惑,区别就在:伪类只是对目标元素本身起作用,而伪元素则相当于一个“新”的元素并只对其起作用,所以有的伪元素选择器有content属性,而伪类则没有。举一个最容易混淆的例子p:first-child和p:first-letter,乍一看以为两个都是伪元素,其实不然,:first-child只是对p这个元素属性的一个描述,也就是说这个p是其父级元素的第一个子节点;而:first-letter则是对p下第一个字符(其实也可以看做一个元素)的选择,而非p本身。

  包括:CSS1支持的:first-letter :first-line,CSS2支持的:after :before,CSS3并没有新增。伪元素可以和class联合使用。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 总结伪类和伪元素(转)

    先说一说为什么css要引入伪元素和伪类,以下是css2.1 Selectors章节中对伪类与伪元素的描述:

    山河木马
  • 选择最后一个元素及nth-child和nth-of-type的区别

    p:nth-child(2)悲剧了,其渲染的结果不是第二个p标签文字变红,而是第一个p标签,也就是父标签的第二个子元素。如下效果截图:

    山河木马
  • 使用jQuery筛选排除元素以修改指定标签的属性

    1、eq()    筛选指定索引号的元素 2、first()  筛选出第一个匹配的元素 3、last()   筛选出最后一个匹配的元素 4、hasClas...

    山河木马
  • Python时间序列选择波动率预测指数收益算法分析案例

    在传统的金融理论中,理性和同质的投资者是核心假设之一,表明每个投资者都有相同的信息,从而做出同样的决定。然而,投资者显然是不均衡的,信息的不对称在股市中很普遍。...

    拓端
  • 5.CSS层次选择器-CSS进阶

    这些都是CSS中最基本的选择器。 层次选择器,就是通过元素之间的层次关系来选择元素。 层次选择器在实际开发中也是相当重要的,常见的层次关系包括:父子、后代...

    见贤思齊
  • 数据结构(一)之基础知识

    用户2145235
  • 高性能JavaScript

    原因:数据存储位置对大地代码整体性能会产生重要的影响,直接变量和局部变量的访问速度快于数组和对象成员。因为局部变量位于作用域链的第一个对象中,全局变量位于作用域...

    Tiffany_c4df
  • 数据结构(一)之基础知识

    用户2145235
  • Android 5.0屏幕录制漏洞(CVE-2015-3878)威胁预警

    0x00 摘要 低技术门槛的漏洞利用或木马制作隐藏着极大的安全威胁,当这种安全威胁遇上手机用户的低安全意识时可能导致Android平台恶意软件的大规模爆发。36...

    逸鹏
  • 初学者|什么是语义角色标注

    本文记录自然语言基础技术之语义角色标注学习过程,包括定义、常见方法、例子、以及相关评测,最后推荐python实战利器,并且包括工具的用法。

    yuquanle

扫码关注云+社区

领取腾讯云代金券