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
  • 相关阅读:
    UICollectionView的简单使用(一)
    天气预报接口IOS版OC:SmartWeather API中key的计算方法
    IOS下Base64加密
    IOS下DES加密
    IOS的URL中文转码
    CTE Recursion Performance
    走过而立之年的Coder
    iOS多线程编程之锁的理解
    iOS设置PCH文件
    程序员:伤不起的三十岁
  • 原文地址:https://www.cnblogs.com/lewis-messi/p/8328578.html
Copyright © 2011-2022 走看看