【跟着mdn官方文档系统的学习css】选择器

每日鸡汤，每个你想要学习的念头都是未来的你向自己求救

让我们和官方文档一起系统得看一下css都有哪些选择器吧，按照优先级来

1. id.      #id 唯一值 （100）
2. class  .a {}  这个不用多说，最常见（10）
3. html 元素  （1）
4. 通用选择器  只有两个，  *、ns |* 、*｜*。  ns是namespace ,
   1. 新知识，css 中的命名空间namespace,   @namespace    属性将不会继承其所在元素的命名空间 todo 有点高深，命名空间是一个地址
      1. 看这里
5. 属性选择器，这个选择器不太熟悉，每次用都加了引号，这个都不能加引号，只有属性值可以加引号。 div[attr="value"],这个方括号里面不是非得用等号，还可以用其他的符号，比如.
   1. [attr|=value](选择attr以value开始)
   2. [attr~=value]在空格分割的句子中找包含value这个单词的attr
   3. 或者[attr]这样写，会选择所有具有attr属性的元素；
   4. 更多参考

---

下面是组合器

1. 逗号分隔，叫做分组选择器  =>  两个一般是并列，同级别，用逗号分隔一组一组的
2.  空格分割。 后代节点
3. >. 向右肩括号  直接子代节点
4. ～ 一般兄弟选择器，这个不常用
5. +  这个在做列表item的时候设置两个item之间的间距的时候非常有用 item+item {margin-top :10px;}
6.  || 列组合器 选择属于某个表格行的节点，这个也不常用

---

最后一个是很有用，但是还是不很熟的伪选择器

1. 伪类 按照未被包含在文档树中的状态信息来选择元素a:after(10)
   1. 有好多好多好多伪类，比如:last-child 
   2. :not() 、not的括号里面写简单的选择器不能写伪元素，写伪元素不生效，表示不符合一组选择器的元素，not不能被嵌套
   3. 注意注意！新知识，可以用:not()提高优先级，#foo:not(#foo)  和 #foo  明显前面的优先级高
   4. todo 这个选择器只会应用在一个元素上，无法用它来排除所有父元素。比如， body :not(table) a 依旧会应用到表格元素 <table> 内部的 <a> 上, 因为 <tr>将会被 :not(table) 这部分选择器匹配。
   5. 可以连着用a:not():not() ，也可以在括号中加入逗号

      /* 类名不是 `.crazy` 或 `.fancy` 的元素 */
      /* 注意，此语法尚未获广泛支持。 */
      body :not(.crazy, .fancy) {
        font-family: sans-serif;
      }

2. 伪元素 表示无法用html语义表达的实体
   1. 除了before after还有几个其他的伪元素（1）
   2. 比如color::selection (选中的状态)， 这个有用到，改变选取的颜色和背景色之类的
   3. ::first-line块级元素的首行，只在inline-block, table-cell, list-item 或者 table-caption的元素的情况下有效
   4. ::first-letter 块级元素的第一个字母，只在inline-block, table-cell, list-item 或者 table-caption的元素的情况下有效
   5. 按照规范应该使用双冒号，来区分伪元素和伪类，虽然浏览器都支持

 

持续更新中～～