CSS3选择器的研究，案例
  在上⼀篇列出了⼏乎所有的CSS3选择器，和伪类选择器，当是并没有做案例的研究，本想在那篇⽂章⾥⾯写，但想想如果把案例都写在那篇⽂章⾥⾯，对于查来说就不是很⽅便，所有另开⼀篇来讲实例。
属性选择器
[title]：选择带有title属性的元素
[title='hello']：选择属性是title并且值是hello的元素css选择器分为哪几类
[title~='hello']：选择属性是title并且部分值是hello的元素，hello需要是单独的值，以空格分开
[title*='hello']：选择属性是title并且其中包含了hello的元素
[title|='hello']：选择属性是title并且值是以hello开头并且允许hello后⾯以-的任意字符
[title^='hello']：属性以hello开头的任意字符
[title$='hello']：属性以hello结束的任意字符
[title^='hello'][title$='.py']：选择属性以hello开头并且以.py结束的元素
连结符
h1~p：选择h1元素后⾯的所有同级p元素
p~p：选择p元素后⾯的所有同级p元素，除了第⼀个p元素
h1+p：选择h1元素后⾯的第⼀个同级p元素
如果span在第⼀个p标签前⾯是不⾏的，因为+是选择的第⼀个同级元素。如果你不想限制类型，只要选择第⼀个，那么可以这样。
伪类选择器
  nth系列，数字
nth-child()：按照位置来算数
nth-of-type()：按照类型来算数
nth-last-child()：从末尾按照位置开始算
nth-last-of-type()：从末尾按照类型来算数
通过(-n+number)来指定选择前⼏个元素
-n会向负数⽅向增加先从0开始,-1,-2,-3...
使⽤:nth-child(odd)或:nth-child(even)实现隔⾏变⾊。
  odd
even
单个选择
first-child：选择第⼀个元素，按位置
first-of-type：选择第⼀个元素，按类型
last-child：选择最后⼀个元素，按位置
last-of-type：选择最后⼀个元素，按类型
only-child：没有其他兄弟元素的时候会被选中
only-of-type：可以有兄弟元素但要类型不同
使⽤only-of-type可以让你从其他类型元素中挑选出⼀个元素来，反之only-child需要元素单独存在才⾏。这个肯定有⼤作⽤，待发现。
伪类
:target
1.  　通过:target来模拟点击事件
2.  　<a href="#a" id="a"></a>
3.  　利⽤target实现tab栏切换
4.  　使⽤target伪类，可以轻松地突出显⽰⽤户要阅读的评论
利⽤target制作的tab切换，当然它还是有很多缺陷的，不过⼤家可以通过它扩展扩展。
:empty
  选择没有⼦元素并且没有⽂本节点的元素
  利⽤:empty给默认提⽰。
  不过这个得注意⼀下，ul不能换⾏必须这样写<ul></ul>如果有换⾏就匹配不了了。其实购物车也可以利⽤这个来做默认提⽰。
:root
  选择根元素，在HTML中root永远是html元素
  和⽤html是⼀样的，其他⽤处暂时没想到。
:not
  参数⽀持传递⼀个元素甚⾄其他伪类选择器，但不⽀持传递连结符以及伪元素
  选择除了指定参数以外的任意元素
案例1：除了span
案例2：除了第⼀个元素
案例3：除了第⼀个和最后⼀个
还有其他妙⽤⾃⾏开发。
:optional
  选择不是必须填写的input元素
  也就是获取到input没有加required属性的元素
:required
  选择有加required属性的元素
:read-write
  获取可读写的input元素
:read-only
  获取只可读的input元素
:
out-of-range
  当input元素的值是超出范围时，max和min限定的范围，注意类型要是number
:valid
  选择所有合法的输⼊，适⽤于表单元素有限制，如最⼩输⼊元素和属性的最⼤值，电⼦邮件具有合法的电⼦邮件，或者数值等数字字段。
案例1：我们可以利⽤它给输⼊错误的给个提⽰。
取个反就好，默认给它错误的颜⾊。
案例2：结合:not来使⽤
元素状态伪类
:checked
  当checkbox被选中时
:disabled
  当元素被禁⽤时
:enabled
  当元素没有被禁⽤时
伪元素
::first-line
  选择第⼀⾏⽂字
::first-letter
  选择第⼀个字
::after
  在元素末尾添加⼀个伪元素
::before
  在元素开头添加⼀个伪元素
我们在制作⼀些⼩图标时就完全可以使⽤::after和::before，就不必再使⽤其他标签了。::selection
  应⽤到选中的⽂本上
合理利⽤这些选择器，可以帮你解决很多问题，⽬前还在研究中，本篇内容长期更新。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。