序选择器

• CSS3中新增的选择器最具代表性的就是序选择器
• 作用：选中指定的任意标签然后设置属性
• 格式：
• 同级别的第几个：

1.       选择器:first-child｛
                            属性：值；
                             ｝ 
         解析：选中同级别中的第一个标签
   

2.       选择器:last-child｛
                            属性：值；
                             ｝ 
         解析：选中同级别中的最后一个标签
   

3.       选择器:nth-child(n)｛
                            属性：值；
                             ｝ 
         解析：选中同级别中的第n个标签
   

4.       选择器:nth-last-child(n｛
                            属性：值；
                             ｝ 
         解析：选中同级别中的倒数第n个标签
   

5.       选择器:only-child｛
                            属性：值；
                             ｝ 
         解析：选中父元素中唯一的标签
   

• 注意：不区分类型
• 同级同类型的第几个

1.       选择器:first-of-type｛
                            属性：值；
                             ｝ 
         解析：选中同级别中同类型的第一个标签
   

2.       选择器:last-of-type｛
                            属性：值；
                             ｝ 
         解析：选中同级别中同类型的最后一个标签
   

3.       选择器:nth-of-type(n)｛
                            属性：值；
                             ｝ 
         解析：选中同级别中同类型的第n个标签
   

4.       选择器:nth-last-of-type(n)｛
                            属性：值；
                             ｝ 
         解析：选中同级别中同类型的倒数第n个标签
   

5.       选择器:only-of-type｛
                            属性：值；
                             ｝ 
         解析：选中父元素中唯一类型的某个标签
   

• 其他用法：
• 同级别的

1.       选择器:nth-child(odd) ｛
                            属性：值；
                             ｝ 
         解析：选中同级别中的所有奇数
   

2.       选择器:nth-child(even) ｛
                            属性：值；
                             ｝ 
         解析：选中同级别中的所有偶数
   

3.       选择器:nth-child(xn+y) ｛
                            属性：值；
                             ｝ 
         解析：x和y是用户自定义的, 而n是一个计数器, 从0开始递增
   

• 同级同类型的

1.       选择器:nth-of-type(odd) ｛
                            属性：值；
                             ｝ 
         解析：选中同级别中同类型的所有奇数
   

2.       选择器:nth-of-type(even) ｛
                            属性：值；
                             ｝ 
         解析：选中同级别中同类型的所有偶数
   

3.       选择器:nth-of-type(xn+y)｛
                            属性：值；
                             ｝ 
         解析：x和y是用户自定义的, 而n是一个计数器, 从0开始递增
   

属性选择器

• 作用：根据指定的属性名称找到对应的标签, 然后设置属性
• 格式：
  1.
  选择器[attribute]｛
  属性：值;
  ｝
• 例子：
  p[id]{
  color: red;
  }
  <p id="identity1">内容</p>
• 作用:根据指定的属性名称找到对应的标签, 然后设置属性
  2.
  选择器[attribute=value]｛
  属性：值;
  ｝
• 例子：
  p[class=cc]{
  color: blue;
  }
  <p id="identity2" class="cc">内容1</p>
  <p class="cc">内容2</p>
• 作用：找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
• 最常见的应用场景, 就是用于区分input属性
• 属性的取值是以什么开头的
• [attribute|=value] CSS2（被代替了）
• [attribute^=value] CSS3
• 例子：
  img[alt^=abc]{
  color: red;
  }
  <img src="" alt="abcdef">
  <img src="" alt="abc-www">
  <img src="" alt="abc ppp">
• 两者之间的区别:
  • CSS2中的只能找到value开头,并且value是被-和其它内容隔开的
  • CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开
• 属性的取值是以什么结尾的
• [attribute$=value] CSS3
• 例子：
  img[alt$=abc]{
  color: blue;
  }
  <img src="" alt="defabc">
  <img src="" alt="ppp abc">
  <img src="" alt="www-abc">
• 属性的取值是否包含某个特定的值
• [attribute~=value] CSS2
• [attribute*=value] CSS3
• 例子：
  img[alt*=abc]{
  color: red;
  }
  <img src="" alt="abcwwwmmm">
  <img src="" alt="wwwmmmabc">
  <img src="" alt="wwwabcmmm">
  <img src="" alt="www-abc-mmm">
  <img src="" alt="www abc mmm">
• 两者之间的区别:
  • CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的
  • CSS3中的只要包含value就可以找到, 无论有没有被隔开

通配符选择器

• 作用: 给当前界面上所有的标签设置属性
• 格式：
  *{
  属性:值;
  }
• 注意：
• 由于通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签, 如果当前界面上的标签比较多, 那么性能就会比较差, 所以在企业开发中一般不会使用通配符选择器