css模糊匹配

1、全局选择器

  就是通配符 *

2、元素选择器

  如ul li p h1 div等

3、类选择器

  如.className{}

4、id选择器

  如#identity{}

5、属性选择器

CSS2支持的属性选择器用一个表达式[{属性 | 属性 {= | |= | ~=} 值}]

  [class="a"]只能匹配class="a"的元素

[class~="a"]则可以匹配class="a"、class="a b"的元素

[lang|=en]则可以匹配lang="en"、lang="en-us"的元素。

CSS3新增*=、^=、$=三种匹配方式[{属性 | 属性 {*= | ^= | $=} 值}]：

*=表示模糊匹配，[href="163"]可以匹配href="163.com"、href="mail.163.com"等元素；

^=表示以指定字符开头，[href^="/"]则匹配href="/a/a.htm"、href="/b"的元素

$=表示以指定字符结尾，[scr$=".png"]则匹配所有png图片，如src="logo.png"

6、组选择器

简单说就是","选择器，如.className,#identity,td,th,li{}，实现代码公用，实际开发过程随处可见。

7、关系选择器

后代选择器即空格" "，匹配父节点所有子孙节点。

    子选择器即">"，匹配父节点直接子节点。

    下面代码段中，只有ol中的li标签不会被ul>li{}匹配

    <ul>

      <li></li>

      <li>

        <ol>

          <li></li>

        </ol>

      </li>

    </ul>

    相邻兄弟选择器即"+"，匹配与之相邻、同时拥有相同父节点的节点（如若中间存在文本节点，文本节点将被忽略）。

    下面的第一个p标签将被h1+p{}匹配：

    <h1>我是标题</h1>

    我是纯粹的文本节点

    <p>我是文字</p>

    <p>我也是文字</p>

    广义兄弟选择器即"~"，匹配位置在其后且具有相同直接父节点的节点。

8、伪类选择器

    CSS1支持开始:link :visited :active，但只是提供给a标签使用，而且这三个伪类之间是互斥的，也就是:link:active的组合是不生效的。CSS2新增了:hover :focus，而且不再局限于a标签，到这里我们最熟悉的伪类已悉数上场，下面来分析一下其区别。先来引入一个动态伪类的概念，如:hover :focus :active，也就是说这些伪类是在交互过程中动态添加到目标元素的（动态的状态），与之相对应的就是静态伪类，如:link :visited，表示的是元素的静态的状态。静态伪类和动态伪类内部是互斥的，不能进行组合，而静态和动态之间可以进行组合使用，如a:link:focus{} a:visited:focus{}会生效，而a:visited:link是不生效的。

    此外CSS2还支持了:first-child和:lang，需要注意的是:first-child是对元素本身状态的描述，而非其它元素，比如li:first-child的意思是“这个li是第一个子节点”，而非“li元素里面的第一个子节点”，这也是伪类和伪元素容易混淆的原因所在（第九点有说明）。:lang(char)相当于属性选择器[lang|=char]，匹配的是带有char（举例）本身及连字符的元素，如char、char-ca、char-be等。

    CSS3为我们带来了更加广泛的伪类选择器…待续

9、伪元素选择器

  可能很多人会在伪类和伪元素之间迷惑，区别就在：伪类只是对目标元素本身起作用，而伪元素则相当于一个“新”的元素并只对其起作用，所以有的伪元素选择器有content属性，而伪类则没有。举一个最容易混淆的例子p:first-child和p:first-letter，乍一看以为两个都是伪元素，其实不然，:first-child只是对p这个元素属性的一个描述，也就是说这个p是其父级元素的第一个子节点；而:first-letter则是对p下第一个字符（其实也可以看做一个元素）的选择，而非p本身。

  包括：CSS1支持的:first-letter :first-line，CSS2支持的:after :before，CSS3并没有新增。伪元素可以和class联合使用。