CSS选择器｜青训营笔记笔记创作活动第2天 CSS选择器主要作用：向指定的html元素添加样式。格式：选择器

笔记创作活动第2天

CSS选择器

主要作用：向指定的html元素添加样式。
格式： 选择器 { 样式 }

元素选择器： 直接选择页面上的 html 元素。

html { background-color: white; }
p { margin: 0; }
h2 { color: black ;}
复制代码

类选择器： 选择带有指定 class 的元素。

/* 单类选择器 */
.title{
    color: red;
}
/* 多类选择器 */
.title.tag{
    /* 表示必须同时包含title和tag两个类（也可以有其他类），但类的排序（谁先谁后）不做要求 */
    color: red;
}
复制代码

ID选择器： 选择带有指定 id 的元素。

.id{ 
    color: black
}
复制代码

属性选择器 选择带有指定属性（或属性值）的元素。

img[alt]{
    /* 表示选择含有alt属性的img元素 */
    color: skyblue;
}
a[href="www.bytedance.com"]{
    /* 表示选择含有href属性且值为www.bytedance.com的a元素 */
    font-weight: bold;
}
p[class="title tag"] {
    /* 需要注意的是，区别于多类选择器，这里的title和tag有了顺序和只能有这两个类的要求，即匹配的是一整个字符串 */
    color: red;
}
复制代码

通配符的使用：
= 绝对等于
*= 包含
^= 以该值为开头
$= 以该值为结尾
|= 如示例

a[href^='http']{
    /* 表示选择含有href且值以http开头的a元素 */
    background: red;
}
a[href|='abc']{
    /* 表示选择含有href且值为abc或abc-xxx的元素 */
    background-color: red;
}
复制代码

派生选择器：

/* 后代选择器 */
body p {
    background-color: pink;
}
/* 子选择器 */
body > p {
    background-color: green;
}
/* 相邻兄弟选择器，选择类为.active元素向下的第一个兄弟元素，且该元素必须是p元素 */
.active + p {
    background-color: red;
}
/* 通用兄弟选择器，当前选中元素的向下的所有兄弟元素 */
.active ~ p {
    background-color: pink;
}
复制代码

伪类选择器：

ul li:first-child {
    /* 表示ul的第一个元素是li时，选中该li */
    background-color: red;
}
ul li:last-child {
    /* 表示ul的最后一个元素是li时，选中该li */
    background-color: yellow;
}
p:nth-child(1) {
    /* 选择当前p元素的父级元素，且父元素的第一个元素是p才生效 */
    background-color: hotpink;
}
p:nth-of-type(1) {
    /* 选中父元素下的第一个p元素（不要求父元素的第一个必须是p），按照类型 */
    background-color: blue;
}
复制代码

更多玩法：

p:nth-child(value) {
    background-color: skyblue;
}
复制代码

value的值可以是：

数字
关键字（even偶数 / odd奇数）
公式
- n 选择所有的孩子（n从0开始计算，但是没有第0个孩子，所以会忽略）
- 2n 选择偶数位置的孩子
- 2n+1 选择奇数位置的孩子
- 5n 选择5、10、15...（5的倍数）位置的孩子
- n+5 选择5、6、7...（5以后）位置的孩子
- -n+5 选择前五个孩子

伪元素选择器：

p::after {
    content: '.';
}
p::first-line {
    /* 选择p元素的第一行内容 */
    color: skyblue;
}
复制代码

补充

伪类和伪元素的区别：

通常为了便于区分，我们使用一个冒号来表示伪类，两个冒号表示伪元素；
伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息（如选择一个指定元素的子元素，或选择一个处于鼠标悬停状态的超链接元素）；
伪类选择元素是基于当前元素所处的状态（或位置），不同于class、id等静态的标志，由于状态是动态变化的（或DOM树发生了改变），所以当一个元素达到一个特定状态（或处于特定的位置）时，它可能得到一个伪类的样式；当状态（位置）改变时，它又会失去这个样式；
伪元素是对元素中特定内容进行操作（如选择段落的第一行），它所操作的层次比伪类还要再深一层；
伪元素偏向于元素的内容，它创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容（content）。

CSS提升页面性能的方法有哪些：

属性设置简写

比如设置一个元素的上下左右margin,可以直接简写margin: 10px 12px 23px 34px；

这样写的目的是减少最后打包代码的包的体积。

去除0后面的单位

有很多人写样式愿意写margin: 0px 10px;

其实可以把0后面的单位去掉：margin: 0 10px;

这样做的目的也是减少最后打包代码的包的体积。

用CSS代替图片

比如，可以用CSS画三角形代替一些箭头图片。这样做的目的是减少http请求。

用CSS雪碧图代替单个图片

这样做的目的是减少http请求节约带宽。

CSS选择器 ｜ 青训营笔记

CSS选择器

补充

CSS选择器｜青训营笔记