详解CSS选择器|青训营笔记

“这是我参与「第四届青训营 」笔记创作活动的的第1天

一文详解css的选择器和常见布局，帮你解决前端的常见的布局难题

1.CSS选择器

• CSS选择器的作用是从HTML页面中找出特定的某类元素

基础选择器

1.通配符选择器

• *{ } （匹配所有元素，效率非常低,常作为初始化使用）
  例：*{margin:0；padding:0}

2.标签选择器

• 标签名 { }
  例：div{} p{}

3.id选择器

• <元素 id=“id值”>
  #id{ }
  id在一个页面中不能重复

4.类选择器

• ，哪个元素都可以使用，用class都能调用
  <元素 class=“name”>
  .name{ }

组合选择器

• 基本选择器一起使用，必须满足多个条件才能应用样式，达到精确选择（权重会叠加，下文再谈）

1.后代选择器

• 后代选择器又称为包含选择器，可以选择父元素里的子元素。写法是将外层标签写在前面，内层标签写在后面，中间空格分开

例：div p{ } //选择div的后代p

2.子选择器

• 选择元素的子代 简单来讲就是选择元素的亲儿子
  例:div > p{ } //此时选择div的所有后代p

3.相邻选择器

• 可选择紧接在另一元素后的元素，且二者有相同父元素。
  例 div + p{ }//选择div的兄弟 p 两者拥有相同的父元素

4.属性选择器

• 属性选择器可以为拥有指定属性的 HTML 元素设置样式
  div p[class="blue"] { background: blue; }
* /选择 div 下的 p 标签的 class 属性值为 blue 的元素 */

5.伪类选择器

• 伪类选择器用于向某些选择器添加特殊的效果。
  伪类选择器书写最大特点是用冒号 : 表示。
  伪类选择器种类多，比如链接伪类选择器、结构选择器等

• 链接伪类选择器

  1. a:link /选择所有未被访问的链接/
  2. a:visited /选择所有已被访问的链接/
  3. a:hover /选择鼠标指针位于其上的链接/
  4. a:active /选择活动链接（鼠标按下未弹起的链接）/
  5. a:focus /* 获得焦点时

• 结构伪类选择器

  1.ul:first-child，表示父元素的第一个子元素。
  2. last-child 代表父元素的最后一个子元素
  3. nth-child(n) 选择第几个元素
  4. nth-last-child(n) 从第n个开始到最后一个元素

选择器的权重

• 复杂选择器的权重会根据子选择器叠加\

!important>内联样式>ID选择器>class选择器/伪类/属性选择器>元素选择器>通配符选择器