目录
1. 类名选择器--- .class
2. id选择器 --- #id
3.通配符 --- *
4.标签选择器
5.后代选择器
5.1 直接子类选择器 element>element
5.2 后代子类选择器 element element
6.兄弟选择器 --- element + element1
7.属性选择器 （要用[]）
8.结构伪类选择器
8.1 nth-child(n) 选择某个父元素的一个或多个特定的子元素
8.2.nth-of-type
9.伪元素选择器
10.各种选择器的权重
1. 类名选择器--- .class
根据元素的class名选择（class名不唯一）
2. id选择器 --- #id
根据元素id选择（id唯一，不重复）
3.通配符 --- *
选择所有元素
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
4.标签选择器
通过标签类型选择元素
标签选择
span {
display: block;
width: 50%;
height: 30px;
background-color: lightblue;
}
5.后代选择器
5.1 直接子类选择器 element>element
例：.father>p选择为父级类名为father的p标签
.father>p{
background-color: lightcoral;
}
5.2 后代子类选择器 element element
例：.father span 选择类名为father的元素的所有后代span元素
.father span {
display: block;
width: 100%;
background-color: lightsalmon;
}
6.兄弟选择器 --- element + element1
选择紧跟着element元素后面的element1
.father + .f_b {
background-color: rgb(33, 177, 153);
}
以上所有选择器代码如下：
标签选择
子
father的儿子
直接子类选择器找不到我
father的孙子
效果：
7.属性选择器 （要用[]）
E[att]——选择具有att属性的元素EE[att="val:]—— 选择具有att属性且属性值等于val的E元素E[att^="val:]—— 选择具有att属性且属性值以val开头的E元素E[att$="val:]—— 选择具有att属性且属性值以val结尾的E元素E[att*="val:]—— 选择具有att属性且属性值中含有val的E元素
代码演示：
效果展示：
8.结构伪类选择器
8.1 nth-child(n) 选择某个父元素的一个或多个特定的子元素
n可以是数字，也可以是公式如果n是数字，就是选择第n个子元素，数字从1开始n可以是关键字，even：偶数，odd：奇数n也可以是公式，常见公式如下：
公式取值2n偶数2n+1奇数5n5,10,15……n+5从第五个开始到最后，包含第五个
代码演示：
- 第1个li标签
- 第2个li标签
- 第3个li标签
- 第4个li标签
- 第5个li标签
- 第6个li标签
- 第7个li标签
- 第8个li标签
- 第9个li标签
- 第10个li标签
效果展示：
8.2.nth-of-type
用法和 nth-child() 类似
nth-child 和 nth-of-type 的区别：
nth-child 对父元素里面所有孩子排序选择（序号固定）先找到第n个孩子，然后看是否和对应元素匹配nth-of-type 对父元素里面指定的子元素进行排序选择，先去匹配对应元素，然后根据对应元素找到第n个孩子
9.伪元素选择器
伪元素选择器可以帮助我们利用css创建新标签元素，而不需要HTML标签，从而简化HTML结构。
选择符简介::before在元素内部的前面插入内容::after在元素内部的后面插入内容
代码演示：
在我前面加内容
在我后面加内容
效果展示：
注意：
before 和 after 创建一个元素，但是属于行内元素before 和 after 必须要有content 属性
10.各种选择器的权重
选择器权重值!important最高优先级内联样式1000id选择器100类、伪类选择器10标签选择器1通配符0
css的选择器还有很多，本文列举的只是博主认为常用的。
永远相信美好的事情即将发生！
推荐文章
您阅读本篇文章共花了：
发表评论