zoukankan      html  css  js  c++  java
  • CSS2属性选择器和css3选择器的用法和区别

    兄弟们,这是我第一次写博客,希望对进来的人有用,写的不好别喷哈,谢谢.

    css2属性选择器:

      1.[attribute]

        例子:   [title]

        解释:   选择含有  title  属性的所有元素.  (<div title="nav"></div> 就会被选中)

      2.[attribute=value]

        例子:   [title=piple]  

        解释:   选择含有  title  属性并该属性的属性值为 piple 的所有元素.  (<div title="piple"></div> 就会被选中)

           注意,写的时候  不要  写成  [title="piple"]

      3.[attribute~=value]

        例子:  [title~=piple]

        解释:  选择含有  title  属性并该属性的属性值中含有  piple  单词的所有元素.  (<div title="nav piple"></div> 就会被选中,  而<div title="nav  piples"></div> 不会被选中)

           注意:  是  title  的属性值中有 piple 这个单词, 而并非是 title 属性的某个属性值中包含 piple 字符串.

      4.[attribute|=value]

        例子:  [title|=en]

        解释:  选择含有  title  属性并该属性的属性值中包含以 en-  开头的单词(该单词一定要是第一个属性值)

             或者单独含有 en  单词的所有元素.  (<div title="en"></div> ,<div title="en-p"></div> ,<div title="en-p piple"></div> 就会被选中)

                            (<div title="en piple"></div>, <div title="nav en"></div> , <div title="nav  en-ss"></div> 不会被选中)

    css3属性选择器:

      1.[attribute^=value]

        例子:  [title^=piple]

        解释:  选择含有  title  属性并该属性的属性值的第一个单词必须是以  piple  字符串开头的单词

             或者第一个单词是  piple 单词

           或者只含有  piple 单词

           或者只含有以 piple 字符串开头的单词的所有元素.

           (  <div title="piple"></div>,

            <div title="piples"></div>,

            <div title="piple sss"></div>,

            <div title="pipless ssds"></div> 

            就会被选中)

      2.[attribute$=value]

        例子:  [title$=piple]

        解释:  选择含有  title  属性并该属性的属性值的最后一个单词必须是以  piple  字符串结尾的单词

             或者最后一个单词是  piple 单词

           或者只含有  piple 单词

           或者只含有以 piple 字符串结尾的单词的所有元素.

           ( <div title="piple"></div>,

             <div title="tttpiple"></div>, 

            <div title="ssss piple"></div>, 

            <div title="ddd dfadpiple"></div> 

            就会被选中)

      3.[attribute*=value]

        例子:  [title*=piple]

        解释:  选择含有  title  属性并该属性的属性值的中的某一个单词必须包含  piple  字符串的单词

             或者所有单词中有一个单词是  piple 单词

           或者只含有  piple 单词

           或者只含有包含 piple 字符串的单词的所有元素.

           (<div title="piple"></div>, <div title="ssspiples"></div>, <div title="sss piple sss"></div>, <div title="ssss dadpipless ssds"></div> 就会被选中)

    区别:  

      主要是 [attribute~=value] 与 [attribute*=value] 以及 [attribute|=value] 与 [attribute^=value]  两组属性选择器的区别.

      他们的区别是  css2 的属性选择器以  单词为单位,  css3 的属性选择器以字符串为单位来计算.

  • 相关阅读:
    关于《构建之法》读后感
    Lab04
    实验3_2
    实验3
    (1)写一个程序,用于分析一个字符串中各个单词出现的频率,并将单词和它出现的频率输出显示。(单词之间用空格隔开,如“Hello World My First Unit Test”); (2)编写单元测试进行测试; (3)用ElcEmma查看代码覆盖率,要求覆盖达到100%。
    1)把一个英语句子中的单词次序颠倒后输出。例如输入“how are you”,输出“you are how”; (2)编写单元测试进行测试; (3)用ElcEmma查看代码覆盖率,要求覆盖率达到100%
    个人简介
    平凡如我......
    第四次博客作业
    《构建之法》读后感
  • 原文地址:https://www.cnblogs.com/foreveronlymiss/p/css.html
Copyright © 2011-2022 走看看