二、CSS 速览—— CSS 选择器、伪类、继承性和层叠性

1. CSS的选择器

基础选择器：

• 标签选择器：通过同名标签选择，同名标签可设置公共样式

  <style>
    h3 {
          
          color:red;}
    p {
          
          color:blue;}
  </style>
  <p>段落</p>
  

• id选择器：通过标签的id属性选择

  <style>
    #id1 {
          
          color:red;}
  </style>
  <p id="id1">段落</p>
  

• 类名选择器：通过class属性选择

  <style>
    .pa {
          
          color:blue;}
    .paa {
          
          color:red;}
  </style>
  <p class="pa">段落</p>
  <p class="pa pas">段落</p>
  

• 通配符选择：选择包含html在内的所有标签，通常用来清除默认样式

  <style>
    * {
          
          color:blue;}
  </style>
  <p>段落</p>
  

高级选择器：

• 后代选择器：注意后代关系可不为父子关系

  <style>
    div ul li {
          
          color:blue;}
  </style>
  

• 交集选择器：多个选择器直接连接，中间无任何符号

  <style>
    p.par {
          
          color:blue;}
  </style>
  

• 并集选择器：多个选择选择器，逗号分隔

  <style>
    #id, .pa, p {
          
          color:blue;}
  </style>
  

2. 选择器的伪类

<a>标签的伪类

    <style>
        a:link {
      
      
            color: red;
        }
        a:visited {
      
      
            color: green;
        }
        a:hover {
      
      
            color: yellow;            
        }
        a:active {
      
      
            color: blue;         
        }
    </style>
    <a href="https://www.baidu.com">点击跳转到百度</a>

普通选择器，如span等，有hover、active伪类

书写顺序：<a>标签有2~3个触发状态，严格按照书写顺序 link、visited、hover、active 执行

3. CSS的继承性和层叠性

继承性：后代标签继承祖先的文字样式
层叠性：选择器设置的样式被其它选择器覆盖，即层叠

选择器权重

	id选择器	class选择器	标签选择器
权重	100	010	001
选择器数量	a	b	c
总权重	100*a+10*b+c=abc

若选择器都没选中目的标签，选择器离目的标签近的优先级高，即就近原则，选择器越明确权重越高； 若选择器层级相同，按照id>class>标签顺序计算权重