一直以来，对css选择器不是很了解。推荐下张鑫旭的《css选择器世界》这本书，让你对css选择器有更深的认识！！

先来一图，带你了解整本书的目录

第一章 概况

CSS选择器很强，它作为CSS世界的支柱。下面，介绍CSS选择器的一些基本概念。

1. 选择器、选择符、伪类、伪元素

  // 选择器
  body{font-size:18px;}
  .container{
    display:block;
  }
  // 选择符 
  li+li{}
  body div{}
  .header > .tab{}
  // 伪类
  a:hover{}
  :disabled{}
  // 伪元素
  ::before {}
  :first-child{}

2.无效的选择器特性以及实际应用 举个例子，hover：active比较早支持的伪类。：focus-within如IE浏览器较早版本无法支持。如果像下面这样用，会使CSS选择器无效

  .exa:hover,.exa:active,.exa:focus:within{
  
  }

实际应用

  // IE可识别
  .exa:hover,.exa:active{}
  // IE不可识别
  .exa:focus:within{
  
  }

第二章 选择器优先级

CSS大部分样式冲突、样式覆盖等问题都与CSS优先级错位有关

• 0级 * 通配符 操作符、逻辑组合 权重0
• 1级 标签选择器 权重 1
• 2级 类选择器 伪类 属性选择器 权重10
• 3级 ID选择器 #header 100
• 4级 style属性内联 1000
• 5级 ！important

查看下面例子😐

// 通配符
  *{
  padding:0;
  margin:0;
  }
  // 操作符空格 后代元素
  .container .wrap{
    flex:1;
  }
  操作符 > 子元素
  ul > li{
    margin-top:25px;
  }
  ...
  // 标签选择器
  div{
  color:#fff;
  font-size:25
  }
  
  // 类选择器
  .container{
  
  }
  // 属性选择器
  input[type="radio"]{}

带入一个CSS 增加权重的技巧；之前不曾用过

  .foo.foo{
  
  }
  // 或者
  .foo[class="foo"]{
  
  }  

了解了选择器越级的冷知识

第三章 CSS选择器的命名

CSS选择器命名是常困扰开发者的事情之一。究竟是面向CSS属性命名，还是面向HTML语义命名。所以，这是开发者的一个痛点。

关于是否区分大小写

那么，到底CSS命名怎么样才算合法呢？首先，问大家一个问题，CSS选择器是否区分大小写？

图片中敏感表示区分，不敏感表示不区分；

关于是否合法

对这段话的理解，我个人认为

• 选择器可以数字开头，但是需要转义；也支持其它字符开头
• 不支持不合法的ASCII字符 如果要用，需要转义
• 中文字符也是有效的

关于CSS命名，是个哲学问题

• 建议短命名 ;

过长的命名会占用CSS文件；短命名也更简洁

  // 建议
  .some-intro {}
  // 不建议
  .some-instroduction{
  
  }

• 单命名还是组合命名 建议：多人合作的项目，建议还是组合命名；

  // 像这些，极易被第三方或者他人的代码覆盖
  .title
  .text
  .box 
  .header 
  .main
  .aside
  // 建议
  .dialog-title
  .news-box
  .buy-pro-text
  .ajax-error-text
  // 建议 前缀
  .cs-header{}
  .cs-main{}
  .cs-aside{}
  

• 面向属性的名

  .clearfix{}
  // 简写
  .db{
  display:block;
  }
  .df{
    display:flex;
  }
  .f1{
    flex:1;
  }
   .tx

// .pic_default_img{
  标签
}
// active 的好处
.cs-content.active{
    height:auto;
}
.active > .cs-content-more{
  display:none;
}

下面4-12章，粗略讲讲CSS选择器

• 后代选择器 p span
• 子选择器 > p > span
• 相邻兄弟选择器 p+p
• 兄弟选择器 ~
• 元素选择器
• 属性选择器

对于属性选择器，作者比较着重讲。下面带大家进入

• ID选择器。

作者的建议，还是少用ID选择器吧。毕竟是唯一属性，一般配合JavaScript使用。

• 属性选择器例如：

  [attr] 例如 [disabled]{}

  [attr=value] [type='checkbox'] [attr^="val"] [attr$="val"]

    <a href="https://www.baidu.com">链接</a>
    [href^='https:']
  

  • 用户行为伪类
  1. :link
  2. :hover
  3. :visited
  4. :active
  • :focus-within 这个属性选择器还是蛮好的。当表单获取焦点的时候，设置子元素label的样式或其它标签都可以

      .cs-input:focus-within .cs-label{
            color:red;
      }
  

  5.:only-child 也是蛮强大的

  6.子索引伪类 nth-of-child

  这里介绍一个之前没用到的点

      /* 匹配4-10个元素 */
        li:nth-child(n+4):nth-child(-n+10){
            color:red;
      }
  

  7.类型索引伪类nth-of-type

  8.逻辑组合伪类 :not 9:其它伪类 :fullscreen

          :fullscreen .img{
            position: absolute;
            left:50%;
            top:50%;
            transform: translate(-50%, -50%);
        }
  

总结

系统地学习了下CSS选择器，在使用选择器的时候，更加得心应手。

参考资料

css选择器世界题库