zoukankan      html  css  js  c++  java
  • CSS属性选择器中的通配符

    根据部分属性值选择

    如果需要根据属性值中的词列表的某个词进行选择,则需要使用波浪号(~)。

    假设您想选择 class 属性中包含 important 的元素,可以用下面这个选择器做到这一点:

    p[class~="important"] {color: red;}

    如果忽略了波浪号,则说明需要完成完全值匹配。

    部分值属性选择器与点号类名记法的区别

    该选择器等价于我们在类选择器中讨论过的点号类名记法。

    也就是说,p.important 和 p["important"] 应用到 HTML 文档时是等价的。

    那么,为什么还要有 "~=" 属性选择器呢?因为它能用于任何属性,而不只是 class。

    例如,可以有一个包含大量图像的文档,其中只有一部分是图片。对此,可以使用一个基于 title 文档的部分属性选择器,只选择这些图片:

    img[title~="Figure"] {border: 1px solid gray;}

    这个规则会选择 title 文本包含 "Figure" 的所有图像。没有 title 属性或者 title 属性中不包含 "Figure" 的图像都不会匹配。

    子串匹配属性选择器

    下面为您介绍一个更高级的选择器模块,它是 CSS2 完成之后发布的,其中包含了更多的部分值属性选择器。按照规范的说法,应该称之为“子串匹配属性选择器”。

    很多现代浏览器都支持这些选择器,包括 IE7。

    下表是对这些选择器的简单总结:

    类型描述

    [abc^="def"]选择 abc 属性值以 "def" 开头的所有元素

    [abc$="def"]选择 abc 属性值以 "def" 结尾的所有元素

    [abc*="def"]选择 abc 属性值中包含子串 "def" 的所有元素

    可以想到,这些选择有很多用途。

    举例来说,如果希望对指向 shunjian.me 的所有链接应用样式,不必为所有这些链接指定 class,再根据这个类编写样式,而只需编写以下规则:

    a[href*="shunjian.me"] {color: red;}

  • 相关阅读:
    English trip V2-B 14 Yes, I can! 是的,我能! Teacher:Russell
    I1-3 Weather Teacher:Corrine
    4-redis数据过期策略
    redis持久化
    redis优势
    解决error while loading shared libraries
    1-zookeeper基本原理和使用
    ObjectiveSQL框架让你不要再写复杂SQL
    sharding-proxy+sharding-ui安装使用配置
    vim 多行取消注释
  • 原文地址:https://www.cnblogs.com/magicsky0/p/3394618.html
Copyright © 2011-2022 走看看