通用选择器，类选择器，id选择器，属性选择器，后代选择器，子代选择器，交集，并集选择器，伪类，伪元素

1. CSS选择器(selector)

通过CSS选择器找到特定的网页元素进行设置样式
- 按照一定的规则选出符合条件的元素，为之添加CSS样式
选择器的种类繁多，大概可以这么归类
- 通用选择器(universal selector)
- 标签选择器(type selectors)
- 类选择器(class selectors)
- id选择器(id selectors)
- 属性选择器(attribute selectors)
- 组合(combinators)
- 伪类(pseudo-classes)
- 伪元素(pseudo-elements)

2. 通用选择器

结构：*{css属性名:属性值;}
作用：找到页面中所有的标签，设置样式
注意点：
- 一般用于统一设置内外边距为0

* {
  margin: 0;
  padding: 0;
}

3. 标签选择器

结构：标签名{css属性名:属性值;}
作用：通过标签名，找到页面中所有这类标签，设置样式
注意点：
- 标签选择器选择的是一类标签，而不是单独某一个
- 标签选择器无论嵌套关系有多深，都能找到对应的标签

1
2
3

h1{
  font-size: 20px;
}

4. 类选择器

结构：.类名{css属性名:属性值;}
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
注意点：
1. 所有标签上都有class属性，class属性的属性值称为类名
2. 类名可以由数字，字母，下划线，中划线组成，但不能以数字或中划线开头
3. 一个标签可以同时有多个类名，类名之间可以空格隔开
4. 类名可以重复，一个类选择器可以同时选中多个标签

<style type="text/css">
  .red{
    color: #f00;
  }
  /* 精确到div元素下类black */
  div .black{
    color:#000;
  }
</style>
<div class="red"></div>
<div class="black"></div>

5. id选择器

结构：#id属性值{css属性名:属性值;}
作用：通过id属性值，找到页面中所有带有这个id属性值的标签，设置样式
注意点：
1. id值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识
2. 最好不要用标签名作为id值
3. id属性值类似于身份证号码，在一个页面中是唯一的，不可重复
4. 一个标签只能有一个id属性值
5. 一个id选择器只能选中一个标签

<style type="text/css">
    #red{
      color: #f00;
    }
</style>
<h1 id="red"></div>

6. class选择器 vs id选择器

class类名与id属性值区别
- class类名相当于姓名，可以重复，一个标签可以同时有多个class类名
- id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值
class选择器与id选择器的区别
- 类选择器以 . 开头
- id选择器以 #开头
实际开发
- 类选择器用的最多
- id一般配合js使用，除非特殊情况，否则不要使用id设置样式
- 实际开发中会遇到冗余代码的抽取，可以将一些公共的代码抽取到一个公共的类中

7. 属性选择器

通过元素上的HTML属性来选择元素

选择器	功能
[attr]	匹配具有attr属性的元素
[attr=”val”]	匹配具有attr属性，且属性值等于val的元素
[attr^=”val”]	匹配具有attr属性，且值以val开头的元素
[attr$=”val”]	匹配具有attr属性，且值以val结尾的元素
[attr*=”val”]	匹配具有attr属性，且值中含有val的元素
[attr\|=”val”]	匹配具有attr属性，且值等于val或者以val开头后面紧跟连接符-
[attr~=val]	匹配具有attr属性，且值包含val, 如果有其他值必须以空格和val分割

拥有某一个属性 [att]

<style>
  [title]{
  color: red;
}
</style>
<div title="box">title</div>

属性等于某个值 [att=val]
1
2
3
[title=box]{
color: red;
}

input

input[type="text"]{
  background-color:pink;
}

input[type]{
  background-color:pink;
}

button

<style>
  button{
    cursor: pointer;
  }
  button[disabled]{
    cursor: default;
  }
</style>

<button>按钮1</button>
<button disabled>按钮2</button>

8. 后代选择器

<div class="box">
    <p>1234</p>
      <div>
          <p>123</p>
      </div>   
</div>
<p>12</p>

8.1. 所有的后代(直接/间接的后代)

作用
- 根据html标签的嵌套关系，选择父元素后代中满足条件的元素
选择器语法

选择器1 选择器2{属性名:属性值;}
结果
- 在选择器1中所找到的后代(儿子，孙子，重孙子，…)中，找到满足选择器2 的标签，设置样式
注意点
- 后代包括儿子，孙子，重孙子，...
- 后代选择器中，选择器与选择器之间通过空格隔开

1
2
3

.box p{
   color: red;
}

8.2. 直接子代选择器(必须是直接自带)

作用
- 根据html标签的嵌套关系，选择父元素子代中满足条件的元素
选择器语法
- 选择器1 > 选择器2{属性名:属性值;}
结果
- 在选择器1中所找到的子代(儿子)中，找到满足选择器2 的标签，设置样式
注意点
- 子代只包括儿子
- 子代选择器中，选择器与选择器之间通过>隔开

1
2
3

.box > p{
   color: red;
}

9. 兄弟选择器

<div class="one">hahaha</div>
<div>heihei</div>
<div>xixi</div>
<div>hehe</div>

9.1. 相邻兄弟选择器 +

使用符号 + 连接

1
2
3

.one + div {
	color: red;
}

9.2. 普遍兄弟选择器 ~

使用符号 ~ 连接

1
2
3

.one ~ div {
  color: red;
}

10. 交集选择器

作用
- 选中页面中同时满足多个选择器的标签
- 在开发中通常为了精准的选择某一个元素
选择器语法
- 选择器1选择器2{属性名:属性值;}
结果
- （既又原则）找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式
注意点
- 交集选择器中的选择器之间是紧挨着的，没有东西分隔
- 交集选择器中如果有标签，标签选择器必须写在最前面

<style>
  p.red{
    color:red;
  }
  
</style>

<div>
  <div class="red">test-div</div>
  <p class="red">test-p-class</p>
  <p>test-p</p>
</div>

11. 并集选择器

作用
- 同时选择多组标签，设置相同的样式
选择器语法
- 选择器1, 选择器2{属性名:属性值;}
结果
- 在选择器1和选择器2选中的标签，设置样式
注意点
- 并集选择器中的每组选择器之间通过,隔开
- 并集选择器中的每组选择器可以是基础选择器或者复合选择器
- 并集选择器中的每组选择器通常一行写一个，提高代码可读性

<style>
  div,
  p,
  .red{
    color:red;
  }
  
</style>

<div>
  <p>test</p>
  <h1 class="red">h1-test</h1>
</div>

12. 伪类(pseudo-classes)

什么是伪类
- Pseudo-classes：翻译过来是伪类
- 伪类是选择器的一种，它用于选择处于特定状态的元素
比如，实现当手指放在一个元素上时, 显示另外一个颜色
常见的伪类有
1. 动态伪类(dynamic pseudo-classes)
  - :link、:visited、:hover、:active、:focus
2. 目标伪类(target pseudo-classes)
  - :target
3. 语言伪类(language pseudo-classes)
  - :lang( )
4. 元素状态伪类(UI element states pseudo-classes)
  - :enabled、:disabled、:checked
5. 结构伪类(structural pseudo-classes)
  - :nth-child( )、:nth-last-child( )、:nth-of-type( )、:nth-last-of-type( )
  - :first-child、:last-child、:first-of-type、:last-of-type
  - :root、:only-child、:only-of-type、:empty
6. 否定伪类(negation pseudo-classes)
  - :not()
所有的伪类: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

12.1. 动态伪类-链接

使用举例：
- a:link 未访问的链接
- a:visited 已访问的链接
- a:hover 鼠标挪动到链接上
- a:active 激活的链接(鼠标在链接上长按住未松开)
使用注意
- :hover必须放在:link和:visited后面才能完全生效
- :active必须放在:hover后面才能完全生效
- 所以建议的编写顺序是 :link、:visited、:hover、:active
除了a元素，:hover、:active也能用在其他元素上

12.2. 动态伪类-焦点 LVFHA

:focus指当前拥有输入焦点的元素(能接收键盘输入)，常用语表单控件
- input:focus{ color: red; }
- 效果：表单控件获取焦点时默认会显示外部轮廓线
因为链接a元素可以被键盘的Tab键选中聚焦，所以:focus也适用于a元素
动态伪类编写顺序建议为
- :link、:visited、:focus、:hover、:active
直接给a元素设置样式，相当于给a元素的所有动态伪类都设置了
- 相当于a:link、a:visited、a:hover、a:active、a:focus的color都是red

12.3. 结构伪类

目标：能够使用结构伪类选择器在HTML中定位元素
作用：根据元素在HTML中的结构关系查找元素
优势：减少对HTML中类的依赖，有利于保持代码整洁
场景：常用于查找某父级选择器中的子元素

取值

选择器	说明
E:nth-child(n)	匹配父元素中第n个子元素，并且是E元素
E:nth-last-child(n)	匹配父元素中倒数第n个子元素，并且是E元素
E:first-child	匹配父元素中第一个子元素，并且是E元素，等同于 :nth-child(1)
E:last-child	匹配父元素中最后一个子元素，并且是E元素，等同于 :nth-last-child(1)
E:first-of-type	匹配父元素的第一个同类型子元素，并且是E元素，等同于:nth-of-type(1)
E:last-of-type	匹配父元素的最后一个同类型子元素，并且是E元素，等同于:nth-last-of-type(1)
E:only-child	匹配父元素唯一的子元素，并且是E元素
E:only-of-type	匹配父元素中唯一的该类型子元素，并且是E元素
:root	根元素，就是HTML元素
:empty	内容完全空白的元素
:not(x)	x是选择器，表示为除x以外的元素

12.3.1. nth-child(n)

n为0,1,2,3,4,5，…
n可以组成常见公式

功能	公式
偶数	2n，even
奇数	2n+1，2n-1，odd
找到前5个	-n+5
找到从第5个往后	n+5

12.3.2. nth-of-type

选择器

选择器	说明
E:nth-of-type	只在父元素的同类型E子元素范围中，匹配第n个

区别

nth-child 直接在所有子元素中数个数
nth-of-type 先通过该类型找到符合的一堆子元素，然后在这一堆子元素中数个数

<style>
   /* 第3个子元素为div不满足条件 */
   li:nth-child(3){
       color: blue;
   }
   /* 选择的是同为li标签的第3个 */
   li:nth-of-type(3){
       color: red;
   }
</style>

<ul>
   <li>1</li>
   <li>2</li>
   <div>3</div>
   <li>4</li>
   <li>5</li>
</ul>

12.3.3. :not(x)

:not()的格式是:not(x)
- x是一个简单选择器
- 元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类(除否定伪类)
:not(x)表示除x以外的元素

<style>
  .box :not(.why){
    color: blue;
  }
</style>
<div class="box">
  <div class="item">item1</div>
  <div class="why">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
</div>

12.4. input:placeholder-shown

表示当前显示占位符文本的input 或 textarea 元素

13. 伪元素(pseudo-elements)

常用的伪元素有
- :first-line、::first-line
- :first-letter、::first-letter
- :before、::before
- :after、::after
为了区分伪元素和伪类，建议伪元素使用2个冒号，比如::first-line

13.1. ::first-line和::first-letter

::first-line可以针对首行文本设置属性
::first-letter可以针对首字母设置属性

13.2. ::before和::after

::before和::after用来在一个元素的内容之前或之后插入其他内容(可以是文字、图片)
目标：能够使用伪元素在网页中创建内容
区别
- 元素：HTML设置的标签
- 伪元素：由CSS模拟出的标签效果
种类

伪元素作用

::before 添加一个伪元素，其将成为匹配选中的元素的第一个子元素

::after 在父元素内容的最后添加一个伪元素
注意点
- 必须设置content属性才能生效
- 伪元素默认是行内元素

伪元素	作用
::before	添加一个伪元素，其将成为匹配选中的元素的第一个子元素
::after	在父元素内容的最后添加一个伪元素

<style>
    /* 在段落之前插入content属性中的文字内容
       显示为 He said hello
    */
    p::before{
      content: "He said";
    }

    /* 在段落之后插入content属性中的文字内容
       显示为 hello John
    */
    p::after{
      content: "John";
    }
</style>
<p> hello </p>

W.T.的博客

前端-CSS学习笔记03-CSS选择器

1. CSS选择器(selector)

2. 通用选择器

3. 标签选择器

4. 类选择器

5. id选择器

6. class选择器 vs id选择器

7. 属性选择器

8. 后代选择器

8.1. 所有的后代(直接/间接的后代)

8.2. 直接子代选择器(必须是直接自带)

9. 兄弟选择器

9.1. 相邻兄弟选择器 +

9.2. 普遍兄弟选择器 ~

10. 交集选择器

11. 并集选择器

12. 伪类(pseudo-classes)

12.1. 动态伪类-链接

12.2. 动态伪类-焦点 LVFHA

12.3. 结构伪类

12.3.1. nth-child(n)

12.3.2. nth-of-type

12.3.3. :not(x)

12.4. input:placeholder-shown

13. 伪元素(pseudo-elements)

13.1. ::first-line和::first-letter

13.2. ::before和::after