zoukankan      html  css  js  c++  java
  • CSS3之属性选择器

    先来看一个常用的选择器的例子:

     1 img[alt] {  border: 3px dashed #e15f5f;  } 

    这个选择器会匹配页面标签中任意一个含有 alt 属性的图片标签:

    1 <img class="oscarMain" src="img/oscar.png" alt="atwi_oscar" />

    还可以通过设定属性值来缩小匹配范围:

     1 img[alt="atwi_oscar"] {  border: 3px dashed #e15f5f;  } 

    这样就仅会匹配 alt 属性值为 atwi_oscar 的图片。

    以上所说的这些事 CSS2都能搞定。

    CSS3给我们带来了三种“子字符串匹配”的属性选择器。

    一、CSS3 的子字符串匹配属性选择器

    a.“匹配开头”的属性选择器。

    “匹配开头”的属性选择器语法如下:

     1 Element[attribute^="value"] 

    在实际使用中,如果我想选择网站中所有 alt 属性值以 film 开头的图片,则对应代码如下:

     1 img[alt^="film"] {  border: 3px dashed #e15f5f;  } 

    b.“匹配包含内容”的属性选择器。

    “匹配包含内容”的属性选择器语法如下:

     1 Element[attribute*="value"] 

    在实际使用中,如果我想选择网站中所有 alt 属性值中包含 film 字符串的图片,则对
    应代码如下:

     1 img[alt*="film"] {  border: 3px dashed #e15f5f;  } 

    c.“匹配结尾”的属性选择器。

    “匹配结尾”的属性选择器语法如下:

     1 Element[attribute$="value"] 

    在实际使用中,如果我想选择网站中所有 alt 属性值以 film 结尾的图片,则对应代码
    如下:

     1 img[alt$="film"] {  border: 3px dashed #e15f5f;  } 

    干货,赶紧记下来吧,哈哈。

    联系作者: VX:Mm_Lewis
  • 相关阅读:
    还原大备份mysql文件失败的解决方法
    第一次招聘
    Data Transformation Services (DTS) Package Example
    .net Page 执行事件顺序
    批量修改相同結構的table layout
    js 中exec、test、match、search、replace、split用法
    存储过程分页,按多条件排序(原创)
    Lisp 的本质 [转]
    【原创】jQuery方法的写法不同导致的兼容性
    WinForm 图片变灰方法
  • 原文地址:https://www.cnblogs.com/lewis-messi/p/8328578.html
Copyright © 2011-2022 走看看