CSS 选择器 & CSS3选择器

1、CSS 选择器

1.1 、CSS基础选择器

• 标签选择器：所有标签名都可以当做选择器，比如body、h1、dl、ul、span等等
• id选择器： 同一个页面内id不能重复（一般是JS中用ID选择器）
• 类选择器：任何的标签都可以携带class属性，class属性可以重复（CSS尽量用类选择器）

1.2 、CSS高级选择器

• 后代选择器：空格表示。选择的是后代，不一定是儿子
• 交集选择器：选择的元素是同时满足两个条件,一般都是以标签名开头。

image.png

        /* 选择的元素是同时满足两个条件，必须是h3标签，必须是special类 */
         h3.special{
            color:red;
         }

• 并集选择器（分组选择器）：逗号表示

        h3,li{
            color:red;
        }

• 通配符*：星号表示所有的元素

2、CSS3选择器

CSS3现状如下：

1. 浏览器支持程度差，需要添加私有前缀
2. 移动端支持优于PC端
3. 坚持渐进增强的原则（低版本没有酷炫效果，但是也不影响正常显示浏览）

CSS3选择器

1. 关系选择器
2. 属性选择器
3. 伪类选择器
4. 其他选择器

2.1.、关系选择器

• 子代选择器 ul>li 选择ul的儿子，即所有li元素

• 下一个兄弟选择器（紧邻选择器）：.box+li 选择.box后面的第一个li元素，即6

• 兄弟选择器 .box~li 选择.box后面所有的li元素，即6、7、8、9、10

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li class="box">5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
  

2.2、 属性选择器：通过属性来选择对应的元素

• E[属性名]——选择所有的具备这个属性的E元素
• E[属性名=值]——选择所有的具备这个‘属性 = 对应值’的E元素
• E[属性名~=值]——选择所有的包含这个‘属性 = 对应值’的E元素

CSS3新增的：

• E[属性名^=值]——从头去匹配这个‘属性 = 对应值’的E元素
• E[属性名$=值]——从尾去匹配
• E[属性名*=值]——从任意位置去匹配

PS:这几个匹配和对应正则表达式一样哈~

2.3. 伪类选择器

伪类以前学习过before、after、a:link

• E:first-child——从父级出发找到第一个孩子为E的元素（css2）

• E:last-child——从父级出发找到最后一个孩子为E的元素 （css3）

• E:nth-child(N)——从父级出发找到第N个孩子为E的元素（css3）N从1开始数

• E:first-of-type——匹配同类型中的第一个同级兄弟元素E

• last-of-type

  <ul>
  <li>列表项一</li>
  <li>列表项二</li>
  <li>列表项三</li>
  </ul>

如果我们要设置第一个li的样式，那么代码应该写成li:first-child {sRules}，而不是ul:first-child{sRules}。其它相关的伪类都如此。

小案例:

<style>

/*选中.box下面的第一个子元素，且第一个元素必须是p。
    必须同时满足这两个条件
    【错误写法】  */
 .box p:first-child {
        background-color: red;
    }

/*同级中第一个为p的元素
    【正确写法】  */
.box p:first-of-type {
        background-color: red;
    }

</style>
<div class="box">
    <div class="one">111</div>
    <p>222</p>
    <p>333</p>
</div>   

注意点：

1. even控制偶数，odd控制奇数
2. nth-child(5n+1):N从1开始数
3. 有一个跟nth-child（）特别类似的一个选择器 E:nth-of-type（）匹配同类型中的第n个同级兄弟元素E.

2.4、其他选择器

• input:focus{} ——选择获取焦点的表单
• input:enabled{} —— 选择可操控的表单元素
• input:disabled{} —— 选择不可操控的表单
• input:checked{} ——选择被选中的checkbox表单
• E:target{} —— 选择通过锚点跳转的当前E元素
• E:empty{} ——选择没有子节点的E元素包括文本节点（基本不用）