css——选择器 选择器优先级 优先级提升 选择器权重计算 继承性

1、选择器

id选择器：#id{ }
命名时，仅数字、字母、下划线可用，且数字不可开头，标签也不可用于id命名
id选择器不可重复 独一无二

类选择器：.className{ }
命名时，仅数字、字母、下划线可用，且数字不可开头，标签也不可用于class命名
一个标签可用多个类名 共性样式可以巧用

后代选择器：空格隔开最上面两个选择器 如（.className #id{ }、.className .className{ }、#id #id{ }）
只要是后代就可选中（包括重孙）

子元素选择器：>隔开最上面两个选择器 如（.className>#id{ }、.className>.className{ }、#id>#id{ }）
类似后代选择器 不过仅能选中儿子 重孙不可选中

交集选择器：无空格隔开 选择器1选择器2{ }
选择交集元素 （用的较少）
用这个选择器，可以调控，为任意元素添加样式（用于动画调控）：

.first .text > img{
    margin: 0 40px;
    opacity: 0.2;
    transition: margin .5s, opacity .5s;
}

.first.current .text > img{
    margin: 0 5px;
    opacity: 1;
    /*
    或者放这里
    transition: margin .5s, opacity .5s;
    */
}

allLis[0].onclick = function () {
	for(let i;i<allLis.length;i++){
		allLis[i].classList.remove('current')
	}
    setTimeout(function () {
        this.classList.add('current')
    }, 500)
};

并集选择器：逗号隔开 选择器1，选择器2，选择器3{ }
可同时给几个选择器定义样式

通配符选择器：*{ } ：给当前页面所有标签设置样式（注：一般不会用 因为降低服务器速率）

属性选择器：

1. 选择含有此属性等于 value 的元素[attribute=value]{ }（例如：p[class=cc]{ } 选中 class 为 cc 的 p 元素）
2. 以。。。开头的[attribute^=value] （例如：p[class^=cc]{ } 选中 class 以 cc 开头的 p 元素 同下）
3. 以。。。结尾的[attribute$=value]
4. 包含特定值的[attribute*=value]
5. 所有包含此属性的[attribute]（例如：p[class]{ } 选中所有含有 class 属性的 p 元素）

内容选择器：

1. :empty——选中既没文本也无子元素（空格都不能有）的指定元素
2. :parent——找到有文本或子元素的指定元素
3. :contains（" “）——找到包含” "中文本的指定元素
4. :has（" “）——找到包含” "中子元素的指定元素
5. :target——可以为锚点目标元素添加样式，当前目标元素被触发为当前锚链节的目标时，调用此伪类样式（锚点介绍）

伪类选择器：

• a标签的点击触发样式
  a:link{} //未访问
  a:visited{} //已访问
  a:hover{} //鼠标悬停
  a:active{} //鼠标长按

  注意：四个属性顺序最好不要随意改变 ，若是想要慢动画效果 可以结合transition

• 兄弟选择器：
  1、相邻兄弟 选择器1+选择器2{ }：给1后面紧跟的2设置样式
  2、通用兄弟 选择器1~选择器2{ }：给1后面所有的2设置样式
  如果想给后面有2的1设置样式，配合伪元素使用：
  

    dt, dd {
      display: inline;
      margin: 0;
      padding: 0;
    }
    
    dt {
      font-weight: 800;
    }
    
    dd + dt::before {// 给后面有 dt 的 dd 设置样式
      content: "\A";
      white-space: pre;
    }
    
    dd + dd::before {// 给后面有 dd 的 dd 设置样式
      content: ", ";
      font-weight: normal;
    }

• 序选择器：
  1、同级别（不区分类型）
  :first-child——同级第一个
  :last-child——同级最后一个
  :nth-child（n）——同级中的第n个
  :nth-last-child（n）——同级中倒数第n个
  :only-child——选中仅有一个子元素的元素

  2、同类型（区分类型）
  :first-of-type——同级同类第一个
  :last-of-type——同级同类最后一个
  :nth-of-type（n）——同级同类中的第n个
  :nth-last-of-type（n）——同级同类中倒数第n个
  :only-of-type——选中仅有一个子元素（仅限所选这个类型）的元素

  注：对于：nth-child（）、：nth-of-type（）及另外两个last
  可传入参数 odd—选中所有奇数 even—选中所有偶数
  亦或是(xn+y)其中x y自定义 选中符合式子的元素（n默认从零递增，但当n<=0时，选取无效，所以取前m个元素可以用nth-of-type(-n+m)，选取倒数m个元素可以用nth-last-of-type(-n+m)）

伪元素选择器
::focus——选择具有焦点的输入元素
::first-letter——选择元素的第一个字母

		/*设置第一个字符*/
        p::first-letter {
            font-size: 30px;
            margin-right: 5px;
            color: brown;
            float: left; /*文字环绕*/
        }

::first-line——选择元素的第一行

        /*设置第一行内容*/
        p::first-line {
            color: red;
        }

::selection——可改变选中文本的样式

        /*设置选中内容的样式*/
        p::selection {
            background-color: skyblue;
        }

• 重点：::before、::after
  ::before——在元素之前插入内容 content 定义的内容与样式
  ::after——在元素之后插入内容 content 定义的内容与样式
  1. 是一个行内元素，如果想设置宽高则需要转换成块级或行内块级元素
  2. 必须添加 content，哪怕不设置内容，也需要 content:""
  3. 新版本浏览器下， :和::都一样，按照伪元素来处理
  4. 它的功能完全等价于一个 dom 元素，但它不会在 dom 树中生成
  5. 用法实例：

<style>
        .father {
            width: 500px;
            height: 300px;
        }

        .father div:nth-of-type(1) {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            float: left;
        }

        .father div:nth-of-type(2) {
            width: 200px;
            height: 300px;
            background-color: pink;
            float: right;
            position: relative;
        }

        .father div:nth-of-type(2):after {
            content: '';
            display: block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #fff;
            position: absolute;
            top: -20px;
            left: -20px;
        }

        .father div:nth-of-type(2):before {
            content: '';
            display: block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #fff;
            position: absolute;
            bottom: -20px;
            left: -20px;
        }
    style>
    
    <div class="father">
    	<div>div>
    	<div>div>
	div>

获取伪类或伪元素

<style>
    h3::after {
        content: "rocks!";
    }
</style>

<h3>generated content</h3> 

<script>
    let h3 = document.querySelector('h3'), 
    result = getComputedStyle(h3, '::after').content;
    alert(`the generated content is: ${result}`);
    console.log(`the generated content is: ${result}`); 
    // the generated content is: "rocks!"
</script>

2、选择器优先级

内联>id>类>标签>通配符>继承>浏览器默认

3、优先级提升

！important（仅可直接选中）：使得优先级最大

p{color：red ！important;}

1、只能直接选中，不能用于间接选中
2、通配符选中标签也是直接选中的
3、仅提升选中的样式，而其他样式不会提升
4、必须写分号前面

4、选择器权重计算

内联 style（1000） > id多看id（100）>类名多看类名（10）>标签多看标签（1）（都一样时 谁写后面听谁的）通配符权重为0 不计入
注：一般只有选择器直接选中才会用到权重计算

5、继承性

1、以color/font-/text-/line开头属性可继承
2、只要是后代就可继承
3、a标签文字颜色和下划线无法继承
4、h标签的文字大小无法继承