乐趣区

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

jiezi

根本选择器

标签选择器

  • 应用 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 后可继承）
退出移动版