关于前端学习:CSS样式CSS选择器

根本选择器

标签选择器

• 应用HTML标签增加款式

  标签名{
    款式名:款式值;
  }
  
  <div></div>
  div{
    width: 100px;
    height: 100px;
  }

id选择器

• 给HTML标签增加一个id属性

• id属性的特点：每人id名在一个页面中只容许呈现一次，这叫做id的唯一性

  #id名{
    款式名:款式值;
  }
  
  <div id="box"></div>
  #box{
    width: 100px;
    height: 100px;
  }

class选择器

• 给HTML标签增加一个class属性

• 一个class名在页面中可呈现多个，每个标签能够有多个class名

  #class名{
    款式名:款式值;
  }
  
  <div class="box"></div>
  .box{
    width: 100px;
    height: 100px;
  }

通配符

• 通配符是指所有标签都能够应用款式

  *{
    padding:0;
    margin:0;
  }

群组选择器

• 多个标签共用一个款式时，可将多个选择器同时设置雷同款式，打消代码冗余

  选择器1,选择器2,选择器3,选择器4{
    款式名:款式值;
  }
  
  div,#id,.class,*{
    width: 100px;
    height: 100px;
  }

选择器命名标准

• 不能应用特殊字符
• 尽量应用小写字母结尾
• 多个单词应用下划线（_）、连字符（-）、前面单词首字母大写形式命名
• 不能应用中文命名
• 语义化命名

选择器命名办法

• 下划线命名法：container_left
• 连字符命名法：container-left
• 驼峰式命名法：containerLeft

层级选择器

后辈选择器

• 抉择父选择器下所有合乎子选择器的子孙元素

  父选择器 子选择器{
    款式名:款式值;
  }
  
  ul li{
    width:100px;
    height:100px;
  }

父子选择器

• 抉择父选择器下所有合乎子选择器的子元素

  父选择器 > 子选择器{
    款式名:款式值;
  }
  
  ul > li{
    width:100px;
    height:100px;
  }

兄弟选择器

• 抉择雷同的父元素下符合条件的所有兄弟元素

  选择器1 ~ 选择器2{
    款式名:款式值;
  }
  
  div ~ p{
    width:100px;
    height:100px;
  }

相邻选择器

• 抉择雷同的父元素下符合条件的第一个元素

  选择器1 + 选择器2{
    款式名:款式值;
  }
  
  div + p{
    width:100px;
    height:100px;
  }

伪类选择器

• 同一个标签，依据其不同的种状态，有不同的款式，须要应用伪类选择器进行设置

  选择器:伪类选择器{
    款式名:款式值;
  }

• 鼠标点击之前的状态(只能设置给 a 元素)

  选择器:link{
    款式名:款式值;
  }

• 鼠标点击时的状态(只能设置给 a 元素)

  选择器:visited{
    款式名:款式值;
  }

• 鼠标划入标签状态

  选择器:hover{
    款式名:款式值;
  }

• 鼠标按下的状态

  选择器:active{
    款式名:款式值;
  }

• 在元素之前增加或删除内容

  选择器::after{
    款式名:款式值;
  }

• 在元素之后增加或删除内容

  选择器::before{
    款式名:款式值;
  }

• 匹配表单元素禁用

  选择器::disabled{
    款式名:款式值;
  }

• 匹配表单元素禁用

  选择器:disabled{
    款式名:款式值;
  }

• 匹配表单元素选中

  选择器:checked{
    款式名:款式值;
  }

• 匹配获取焦点元素

  选择器:fous{
    款式名:款式值;
  }

属性选择器

• 应用元素的属性和属性值进行抉择元素

通过属性名进行抉择元素

选择器[属性名]{
    款式名:款式值;
}

<div class="box1">1</div>
<div>2</div>
div[class]{
    width: 100px;
    height: 100px;
    background: red;
    margin: 10px;
}
只有第一个div满足条件，所以第一个div款式失效

通过属性名和属性值同时满足进行抉择元素

选择器[属性名="属性值"]{
    款式名:款式值;
}

<div class="box1">1</div>
<div class="box2">2</div>
div[class="box1"]{
    width: 100px;
    height: 100px;
    background: red;
    margin: 10px;
}
只有第一个div满足条件，所以第一个div款式失效

通过属性名和属性值满足其中一项进行抉择元素

选择器[属性名*="属性值"]{
    款式名:款式值;
}

<div class="box1">1</div>
<div class="box2">2</div>
div[class*="box1"]{
    width: 100px;
    height: 100px;
    background: red;
    margin: 10px;
}
两个div都满足其中一个条件，所有都失效

满足最后面的属性名和属性值进行抉择元素

选择器[属性名^="属性值"]{
    款式名:款式值;
}

<div class="box box1">1</div>
<div class="box1 box2">2</div>
div[class^="box1"]{
    width: 100px;
    height: 100px;
    background: red;
    margin: 10px;
}
只有第二个div的第一个class="box1"满足条件，所以只对第二个div失效

满足最初面的属性名和属性值进行抉择元素

选择器[属性名$="属性值"]{
    款式名:款式值;
}

<div class="box box1">1</div>
<div class="box1 box2">2</div>
div[class$="box1"]{
    width: 100px;
    height: 100px;
    background: red;
    margin: 10px;
}
只有第一个div的最初一个class="box1"满足条件，所以只对第一个div失效

属性组合匹配选择器：多个条件同时满足

构造伪类选择器（角标从0开始）

类型选择器

选择器:nth-of-type(角标){
    款式名:款式值;
}

孩子选择器

选择器:nth-of-child(角标){
    款式名:款式值;
}

第一个选择器（角标从0开始）

选择器:first-of-type{
    款式名:款式值;
}

最初一个选择器（角标从0开始）

选择器:last-of-type{
    款式名:款式值;
}

惟一选择器（角标从0开始）

选择器:only-of-type{
    款式名:款式值;
}

选择器权重关系

• !important > 行内款式(1000) > id选择器(100) > class选择器(10) > 标签选择器(1) > 通配符
• 群组选择器不扭转选择器的权重
• 应用 !important 能够晋升款式的权重
• 层级选择器应用相加法或者约分法进行表权重关系

款式继承

• 继承父级款式，文字相干款式能够继承，布局款式不能被继承（设置inherit后可继承）