css选择器

一般选择器

// * 页面中的所有的元素
// 标签选择器 类名选择器. id选择器# 

关系选择器

• 子代选择器 父元素>子元素 (>)

只会选中子代元素，不会选中后代的元素

• 子后代选择器 父元素 子元素 (空格隔开)

会选中子代元素，也会选中后代的元素

• 相邻选择器 兄弟元素 + 后面的相邻兄弟元素

只会选中 该元素的后面相邻的兄弟元素，而且后面的兄弟元素匹配才行

属性选择器 （att是属性名的简称 val是属性值的简称）

• [name] 具有name属性的元素
• [att="val"] 具有att属性且属性值完全等于val的元素(一个字符都不能少，包括空格)
• [att^="val"] 具有att属性, 且属性值的整个字符串, 以val开头
• [att$="val"] 具有att属性, 且属性值的整个字符串, 以val结尾
• [att*="val"] 具有att属性, 且属性值的整个字符串, 含有val字符

// 选中 class 中包含有el-icon- 的所有标签
[class*='el-icon-'] {
    color: yellow;
  }

伪类选择器

• :first-child 选中第一个子元素
• :last-child 选中最后一个子元素
• :nth-child(n) 选中第n个元素(n从0开始,但是第1个子元素是 :nth-child(1))
• :nth-last-child(n) 从后开始选中第n个元素
• :not(css选择器) 选择不含有某个选择器的元素

:nth-child(1) 表示选中第一个子元素, 同 :first-child
:nth-child(2n) 表示偶数个子元素选中 从第2个开始 

// 如下表示 只会选中ul的前面2个li元素
ul li:nth-child(-n+2) {
  color: red;
}

//  如下表示 只会选中ul的后面3个li元素
ul li:nth-last-child(-n+3) {
  color: red;
}

// 如下表示 会选中所有的li元素但是除了最后1个li
ul li:not(li:last-child) {
  color: red;
}

伪元素选择器

• ::before ::after

修改谷歌滚动条样式

::-webkit-scrollbar {
  width: 6px; // 纵向滚动条
  height: 6px; //横向滚动条
  background: red; //整个滚动条背景色
}
    
::-webkit-scrollbar-thumb {
    background: white;  //滚动bar背景色
    border-radius: 4px;
}

// 某个容器的滚动条样式
.test::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background: transparent;
}

.test::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
}