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

    <div id="section1"> 示例文本1</div>

    <div id="subsection1-1">示例文本1-1</div>

    <div id="subsection1-2">示例文本1-2</div>

    <div id="section2">示例文本2</div>

    <div id="subsection2-1">示例文本2-1</div>

    <div id="subsection2-2">示例文本2-2</div>

    CSS2中使用属性选择器来设置

    <style type=text/css>

    [id = section1]{

         background:yellow;

    }

    </style>

    CSS3中的属性选择器

    1.[att*=val]属性值包含用val指定的字符

    [id*=section]{

        background:yellow;

    }

    则页面中id为"section1"、"subsection1-1"、"subsection1-2"的div元素的背景色都变为黄色,因为这些元素的id属性中都包含"section"字符。

    2.[att^=val]属性值的开头字符为用val指定的字符,则该元素使用这个样式

    [id^=val]{

       background:yellow;

    }

    页面中id为"section1"、"section2"的div元素的背景色都变为黄色,因为这些元素的id属性的开头字符都为"section"。

    3.[att$=val]结尾字符为用val指定的字符

    [id$=-1]{

       background:yellow;

    }

    页面中为"subsection1-1"、"subsection2-1"的div元素的背景色变为黄色,因为其以"-1"结尾。

    注意:要在指定的匹配字符前必须加上""这个escape字符。

  • 相关阅读:
    指定的架构无效。错误: CLR 类型到 EDM 类型的映射不明确
    win7IIS错误修改路径最全的
    如何设置textarea光标默认为第一行第一个字符
    我的Hexo网站
    Leetcode Round 4 记录
    几何编程题
    Leetcode Round 3 记录
    几何概型
    Roman Number & Integer
    Single Number
  • 原文地址:https://www.cnblogs.com/wyaocn/p/5836032.html
Copyright © 2011-2022 走看看