CSS常见选择器

不应该热爱

已于 2023-05-04 11:14:28 修改

阅读量2k

点赞数 8

文章标签： css 前端 html

于 2022-12-04 15:21:30 首次发布

本文链接：https://blog.csdn.net/qq_63218110/article/details/128161050

版权

3.2 . 复合选择器: 把多种基础选择器综合运用起来.

一.CSS是什么？

CSS,即层叠样式表 (Cascading Style Sheets)，能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离。

1.1 语法规范

选择器 + { 一条/N条声明 }

选择器：决定针对谁修改
声明：决定修改什么内容
声明的属性：本质为键值对（使用；区分键值对，使用：区分键和值）。

二. 引入方式

2.1 内部样式

写在style标签中，嵌入到html内部，理论来说,style标签放哪都行，但是建议放在head标签中。

优点：这样做能够让样式和页面结构分离，缺点：分离的不够彻底，尤其是css内容多的时候。

tip1：像图中所展示的那样，css中的属性命名都是这样带有 - 的(因为 - 在很多语言中都表示减法或者负号，而CSS是不能进行算术运算的)，这里简单的介绍以下变量命名风格：

驼峰命名，fontSize (Java,JS)
蛇形命名，font_size (C,C++,Python)
脊柱命名，font-size(CSS)

tip2：CSS中的注释是使用 /* */ 来进行多行注释，不支持使用 //。

2.2 行内样式（内联样式）

通过 style 属性, 来指定某个标签的样式（每个标签都可以有一个style属性，里面就可以写CSS,不必写选择器，只是针对当前元素生效），

只适合于写简单样式. 只针对某个标签生效. 缺点: 不能写太复杂的样式.

 <div style="color:gray">这是一个标签</div>

值得注意一点的是，这种写法优先级较高, 会覆盖其他的样式，比如：

2.3 外部样式

顾名思义，就是把CSS写到一个单独的 .css文件中，通过link标签引入到html中，这也是最常见的开发方式。（可以起到代码复用的作用，一个css文件被多个html使用。）

<link rel="stylesheet" href="CSS文件路径">

.css文件中;

div {
    font-size: 50px;
    color: coral;
}

三、选择器

选择器的功能

选中页面中指定的标签元素.要先选中元素, 才能设置元素的属性.
就好比 SC2, War3 这样的游戏, 需要先选中单位, 再指挥该单位行动.

3.1. 基础选择器: 单个选择器构成的

标签选择器
类选择器
id 选择器
通配符选择器

3.1.1.标签选择器

特点:

能快速为同一类型的标签都选择出来.
但是不能差异化选择

3.1.2.类选择器，

特点:
差异化表示不同的标签
可以让多个标签的都使用同一个标签

语法细节:

类名用 . 开头的
下方的标签使用 class 属性来调用.
一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让代码更好复用)
如果是长的类名, 可以使用 - 分割.
不要使用纯数字, 或者中文, 以及标签名来命名类名

3.1.3 id选择器

和类选择器类似.

CSS 中使用 # 开头表示 id 选择器
id 选择器的值和 html 中某个元素的 id 值相同
html 的元素 id 不必带 #
id 是唯一的, 不能被多个标签使用 (是和类选择器最大的区别)

3.1.4.通配符选择器

使用 * 的定义, 选取所有的标签

选中页面中的所有元素，可以让页面中的所有元素都被选中，通常用于清除浏览器的默认样式（例如，段落的默认行间距，字体颜色，字体样式等）。

* {


}

基础选择器小结：

	作用	特点
标签选择器	能选出所有相同的标签	不能差异化选择
类选择器	能选出一个或者多个标签	根据需求选择，最灵活，最常用
id选择器	能选出一个标签	同一个id在一个html中只能出现一次
通配符选择器	选择所有标签	特殊情况下使用

3.2 . 复合选择器: 把多种基础选择器综合运用起来.

后代选择器
子选择器
并集选择器
伪类选择器

3.2.1.后代选择器

又叫包含选择器. 选择某个父元素中的某个子元素.（其中的元素1，元素2可以是标签选择器，也可以是类选择器，亦或是id选择器）。

元素1 元素2 {样式声明}

元素 1 和元素 2 要使用空格分割
元素 1 是父级, 元素 2 是子级（元素2不一定是儿子，也可以是孙子）。

示例1：把ul中的li修改颜色和样式而不影响ol中的li。

元素1为类选择器的情况：

元素2为孙子的情况：

3.2.2.子选择器

和后代选择器类似，但是只能选择子标签。

元素1>元素2 { 样式声明 }

使用大于号分割
只选亲儿子，不选孙子元素

如何让select中的option有颜色呢？

：这里直接使用标签选择器 option{ } 即可。

3.2.3.并集选择器

用于选择多组标签. (集体声明)

元素1，元素2 { 样式声明 }

通过逗号分割等多个元素.
表示同时选中元素 1 和元素 2
任何基础选择器都可以使用并集选择器.
并集选择器建议竖着写. 每个选择器占一行. (最后一个选择器不能加逗号)

示例：

3.2.4.伪类选择器

这里只介绍两种：

标签名:hover 选择鼠标指针悬停上的链接
标签名:active 选择活动链接(鼠标按下了但是未弹起)

以下为示例1：

：hover方法可以让这个 ”aaaa“ 在鼠标悬停在这上面之时变为蓝色。

而：active方法可以让鼠标点击这个”aaaa“后变成深蓝色。

复合选择器小结：

选择器	作用	注意事项
后代选择器	选择后代元素	可以是孙子元素
子选择器	选择子元素	只能选亲儿子, 不能选孙子
并集选择器	选择相同样式的元素	更好的做到代码重用
链接伪类选择器	选择不同状态的链接	重点掌握 a:hover 的写法.

四、常见元素属性

4.1 字体样式

CSS中属性很多，不必全都记住，可查阅文档：MDN Web Docs

font-family: '微软雅黑';

多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体. )
建议使用常见字体, 否则兼容性不好
字体名称可以用中文, 但是不建议.

4.2 字体大小

font-size: 20px;

不同的浏览器默认字号不一样, 最好给一个明确值. (chrome 默认是 16px)
可以给 body 标签使用 font-size
要注意单位 px 不要忘记.
标题标签需要单独指定大小

4.3 文字粗细

font-weight: bold;
font-weight: 700;

可以使用数字表示粗细，也可以使用英文表示
取值范围是 100 -> 900
其中的英文：bold == 700, normal == 400.

4.4 文字颜色

可以使用3种方法表示颜色：

直接写单词，red，green，yellow，blue等
写成rgb/rgba的形式
写成#16进制数字

什么是rgb？rgba呢？

我们的显示器是由很多很多的 "像素" 构成的. 每个像素视为一个点, 这个点就能反映出一个具体的颜色.我们使用 R (red), G (green), B (blue) 的方式表示颜色(色光三原色). 三种颜色按照不同的比例搭配, 就能混合出各种五彩斑斓的效果.
计算机中针对 R, G, B 三个分量, 分别使用一个字节表示(8个比特位, 表示的范围是 0-255, 十六进制表示为 00-FF).
数值越大, 表示该分量的颜色就越浓. 255, 255, 255 就表示白色; 0, 0, 0 就表示黑色

rgba就是在rgb的基础上增加了a（透明度）。

设置颜色：

color: red;
color: #ff0000;
color: rgb(255, 0, 0);

tip;

1. 鼠标悬停在 vscode 的颜色上, 会出现颜色选择器, 可以手动调整颜色.

2.针对十六进制的表示方法，是可以有缩写形式的。

形如：#AABBCC => #ABC
每个分量的两个数字都是一样的时候，就可以把六位数字缩写成三位数字

4.5 文本对齐

通常上，网页默认的文字是左对齐的，但是有的时候需要居中对齐（文章标题），右对齐（落款）。

text-align: [值];

center: 居中对齐
left: 左对齐
right: 右对齐

4.6 文本装饰

text-decoration: [值];

数值：

underline 下划线. [常用]
none 啥都没有. 可以给 a 标签去掉下划线.
overline 上划线. [不常用]
line-through 删除线 [不常用]

4.6 文本缩进

控制段落的首行缩进 (其他行不影响)

text-indent: [值];

单位可以使用 px 或者 em.
使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小.
缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)

4.7 文本行高

行高等于 line-height = 文本大小 + 行间距

line-height，行高就是文本顶线与顶线的距离，或者是中线到中线的距离，或者是底线到底线的距离，对上下两个方向有影响，并且相同，如果两行有不同的行高，实际行高值为两个行高值中最大的一个值，如果行高与元素高度相同，表示垂直居中。

4.8 背景属性

4.8.1 背景颜色

background-color: [指定颜色]

展示效果：

利用行高实现文字居中效果：

4.8.2 背景图片

background-image: url(...);

设置图片后，默认是平铺的。

4.8.3 背景平铺

background-repeat: [平铺方式]

repeat: 平铺
no-repeat: 不平铺
repeat-x: 水平平铺
repeat-y: 垂直平铺

观察上述图片，我们知道设置图片后默认是平铺的，当然我们也可以让其不平铺。

在x轴方向平铺：

4.8.4 背景位置

background-position: x y;

参数有三种风格:

方位名词: (top, left, right, bottom)
精确单位: 坐标或者百分比(以左上角为原点)
混合单位: 同时包含方位名词和精确单位

需要注意的是：

如果参数的两个值都是方位名词, 则前后顺序无关. (top left 和 left top 等效)
如果只指定了一个方位名词, 则第二个默认居中. (left 则意味着水平居中, top 意味着垂直居中.)
如果参数是精确值, 则的的第一个肯定是 x , 第二个肯定是 y. (100 200 意味着 x 为 100, y 为 200)
如果参数是精确值, 且只给了一个数值, 则该数值一定是 x 坐标, 另一个默认垂直居中.
如果参数是混合单位, 则第一个值一定为 x, 第二个值为 y 坐标. (100 center 表示横坐标为 100, 垂直居中)

Tip：

计算机中的平面坐标系, 一般是左手坐标系(和高中数学上常用的右手系不一样. y轴是往下指的).

4.8.5 背景尺寸

background-size: length|percentage|cover|contain;

可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px也可以填百分比: 按照父元素的尺寸设置.
cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域.

其中的 cover 和 contain 都是让图片变大，尽可能的是适应div的尺寸。

其中有些许不同：

contain 是能让图片能够完整显示，cover是使图片尽可能的拉伸：

如何让图片的大小跟着浏览器的宽度和高度进行改变？

4.9 圆角矩形

通过 border-radius 使边框带圆角效果，因为html元素默认是矩形，四个角都是 90°直角(不美观)。

border-radius: length;

length 是内切圆的半径. 数值越大, 弧线越强烈
展示效果；

生成圆形：

让 border-radius 的值为正方形宽度的一半即可

生成圆角矩形

让 border-radius 的值为矩形高度的一半即可

border其实还有其他写法：

border-radius 实际上可以针对四个角分别设置.：

border-radius:2em;

等价于：

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

或者可以这样写：

border-radius: 10px 20px 30px 40px;

等价于（按照顺时针顺序填写）：

border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;

五、元素的显示模式

5.1 display属性

在CSS中，HTML的标签的显示模式有很多，此处只重点介绍两个: 块级元素和行内元素，

独占一行的块级元素：

h1 - h6
p
div
ul
ol
li
...

不独占一行的行内元素：

a
strong
b
em
i
del
s
ins
u
span
...

这里我们不重点介绍两者的区别，而是介绍可以让行内/块级元素互相转换的 display属性 （绝大多数都是把行内元素转成块级元素，几乎不会把块级元素转成行内）。

还可以使用display: none 将元素隐藏起来，当display的值为none时，元素不被显示，但是可以通过开发者工具查看到该元素。运用场景比如：网页上出现的小广告。

5.2 盒模型

每一个 HTML 元素就相当于是一个矩形的 "盒子"
这个盒子由这几个部分构成：

边框 border
内容 content
内边距 padding
外边距 margin

边框

粗细: border-width
样式: border-style , 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
颜色: border-color

当然了这个border的属性设置是支持简写的，且不要求顺序，例如：

border: 1px solid red;

实际开发的过程中，各个元素之间的边距我们都是设定好的，如果出现上述这样的情况（把盒子总面积变大），会影响整体美观，该如何解决呢？

：使用 box-sizing : border-box.

当然了边框不止可以设置全局边框（四个方向都有），还可以设置单方向的边框。

border-top/bottom/left/right

内边距

默认内容是顶着边框来放置的. 用 padding 来控制这个距离
可以给四个方向都加上边距

padding-top
padding-bottom
padding-left
padding-right

可以把多个方向的 padding 合并到一起：

padding: 5px; 表示四个方向都是 5px
padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px
padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px
padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针)