20220623

1.CSS选择器

     (1)ID选择器 ：  #elem{ }      id="elem"  

注意：1.在一个页面中，ID值是唯一的，只能出现一次，出现多次是不符合规范的

           2.命名规范：字母 ，_， - ，数字（第一个不能是数字）

           3.命名方式：驼峰式（searchButton）

                                下划线写法：search_button

                                短线写法：search-button

 

   （2）CLASS选择器：  css:  .elem{ }    html:class="elem"

  注意：1.class选择器可以复用

             2.可以添加多个class样式

 

             3.多个样式的时候，样式的优先级根据css决定，而不是class属性中的顺序

（根据这个顺序）

             4.标签+类的写法

 

 （3）标签选择器 ：     css:div{ }     html:<div>

                使用的场景：1.去掉某些标签的默认样式时

                                      2.复杂的选择器中，如 层次选择器

（4）群组选择器：     css:div ，p，span{ }

          可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，完成代码的复用

 （5）通配选择器：  *{  }  包含所有的标签 ，尽量避用

 （6）层次选择器：

     1. 后代   M N{  }：(只有M后面的N才会有用，)

  2.  父子  M>N { }（只管一代，儿子后面的就不会生效）

 3.兄弟  M~N{  } ------> 只会管M下面的N 在M之上的N不会生效

  4.相邻  M+N {  } ------>只会管M邻接的下一个N

（7）属性选择器

  =：完全匹配，需要一模一样

 *=：部分匹配，即出现相关即可

^=：起始匹配

$=：结束匹配

【】【】【】：多个组合匹配

（8）伪类选择器

     M：伪类{  }

：link---访问前的样式（只能添加给a标签）  :visited --访问后的样式（只能添加给a标签）   :hover---鼠标移入时的样式（可以给所有标签）  :active--鼠标按下时的样式（可以给所有标签）

 注意：如果四个伪类都要生效，注意顺序：link visited hover active

           一般网站只设置  a{ } ,   a:hover{ }

 :after,:before -----添加文本内容（在后面或前面加文本内容）----用content属性

:checked ,:disabled,:focus（获取光标时） --针对表单元素

结构性伪类选择器：

nth-of-type(){     } :小括号里填次序。如果写2n则是偶数序列，2n+1则为奇数序列

           nth-of-type(){     } 和 nth-child()区别：前者在同类型中选取，后者不考虑类型

  first-of-type

  last-of-type

  only-of-type:只有一个的时候才生效

2.CSS样式继承

   文字相关的样式可以被继承，布局相关的样式不能被继承（默认是不能继承的，但可以设置继承属性 inherit）

 3.CSS优先级

   相同样式优先级：当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况

 

内部样式和外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高

单一样式优先级：style行间>id>class>tag（div）>*（通配）>继承

 （此时输出红色）

 !important 提升样式优先级，非规范，不建议使用（不能让继承属性提升优先级）

 

标签+类与标签（标签+类优先级高）

 

群组优先级：群组选择器与单一选择器的优先级相同，靠后写的优先级高

层级优先级：

（1）权重比较

   style 权重：1000

   id 权重：100

   class 权重：10

例如：

       ul  li  .box  p  input{}  :  1+1+10+1+1

       .drl span  #elem{ } : 10+1+100

  tag 权重：1

（2）约分比较(约去等级相同的)