css 选择器

最新推荐文章于 2022-02-05 21:53:11 发布

Wood_Ren

最新推荐文章于 2022-02-05 21:53:11 发布

阅读量142

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/Wood_Ren/article/details/84864177

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一.基础选择器

* | div | . | #

<!-- 先建立一个用来试验选择器的 html 文件 -->
<!-- 04.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>基础选择器</title>
    <link rel="stylesheet" href="./04.css">
</head>
<body>
	<div></div>
	<div class="dd"></div>
	<div class="dd" id="d"></div>

	<div class="div"></div>
	<div class="div red r"></div>
	<div class="div"></div>
</body>
</html>
<!-- ******* -->
	<!-- 选择器: css 选择 html 标签的一个工具 => 将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 -->
	<!-- 选择器就是给 html标签起名字 -->

1.通配选择器

/* * => 通配选择器 => html,body,body 下所有用于显示内容的标签 */
* {
    border: 1px solid black;
}

2.标签选择器

/* div => 标签名 => 就是标签选择器 : 开发过程中尽可能少的运用,运用范围为最内层的显示层 */
div {
    width: 200px;
    height: 200px;
    background-color: red;
}
匹配文档中所有与标签名匹配的标签: 如 div{}会匹配文档中全部 div,span{}会匹配文档中所有 span

3.类选择器

/* dd => class名 => 类选择器 : 布局的主力军 */
.dd{
    background-color: orange;
}
匹配文档中所有拥有class属性且属性值为dd的标签：如<sup class="dd"></sup> <sub class="dd"></sub>均会被匹配

4.id 选择器:

/* d => id 名 => id 选择器 : id 一定要为唯一的*/
#d{
    background-color: green;
}
匹配文档中所有拥有id属性且属性值为d的标签：如<div id="d"></div> <section id="d"></section>均会被匹配

二.基础选择器优先级

基础选择器优先级大致与选择器匹配范围成反比,匹配范围越小,优先级越高
基础选择器优先级大致与选择器匹配精度成正比,匹配精度越高,优先级越高
基础选择器优先级: id 选择器 > 类选择器 > 标签选择器 > 通配选择器

v_hint: id 选择器必须保证单文档的唯一性

三.组合选择器

1.群组选择器

div, span, .red, #div {
    color: red;
}

一次性控制多个选择器
选择器之间以,隔开,每一个选择器位均可以为任意合法选择器与选择器组合

2.子代(后代)选择器

子代选择器用 > 连接
body > div {
    color:red;
}
后代选择器用空格连接
.sup .sub {
    color:red;
}

一次性控制一个选择器(逻辑最后的那个选择器),前置位的选择器为修饰性选择器
每一个选择器未均可以为任意合法选择器或选择器组合
子代选择器必须为一级父子嵌套关系, 后代选择器可以为一级及多级父子嵌套关系

3.相邻(兄弟)选择器

相邻选择器+连接
.d1+.d2 {
    color: red
}
兄弟选择器~连接
.d1~.d3 {
    color: red;
}

一次性控制一个选择器(逻辑最后的那个选择器),前置位的选择器为修饰性选择器
每一个选择器位均可以为任意合法选择器或选择器组合
相邻选择器必须为直接相邻关系,兄弟选择器可以为直接相邻或间接相邻关系

4.交集选择器

<div class="d" id="dd"></div>
div.d#dd {
    color: red;
}

<div class="d1 d2 d3"></div>
.d1.d2.d3 {
    color: red;
}

四.组合选择器优先级

组合选择器优先级与权值相关, 权值为权重和
权重对应关系

选择器	权重
通配	1
标签	10
类\属性	100
id	1000
!important	10000

选择器权值比较, 只关心权重和,不更新选择器位置
不同级别的选择器间不具备可比性: 1个类选择器优先级高于 n 个标签选择器的任意组合

// 优先级来源(操作的是同一标签的同一属性)
// 优先级取决于权重,其实就是比较个数
1.不同的修饰符(~ +)(后代/兄弟/交集...)均不影响权重
2.选择器的位置也不会影响权重
3.权重只和个数有关
4.id 的权重无限大于 class 无限大于标签
5.属性选择器与类选择器一样

.d5 {
    font-size: 20px;
}
/* 了解: 属性选择器 */
[aa="*b"] {
    font-size: 30px;
}
/* 两个类名的选择器大于一个类名的选择器与类名无关 */
.d4 .d5 {
    font-size: 40px;
}

/* 每个选择器位也可以替换为一个组合选择器 */
body .d1 .d3 .d5 {
    font-size: 50px;
}
/* .d1 div .d3 .d5 优先级等于 body .d1 .d3 .d5 */
.d1 div .d3 .d5 {
    font-size: 100px;
}
#div {
    font-size: 200px;
}

五.属性选择器

[attr]: 匹配拥有 attr 属性的标签
[attr=val]: 匹配拥有 attr 属性,属性值为 val 的标签
[attr^=val]: 匹配拥有 attr 属性,属性值以 val 开头的标签
[attr$=val]: 匹配拥有 attr 属性,属性值以 val 结尾的标签
[attr*=val]: 匹配拥有 attr 属性,属性值包含 val 的标签

v_hint: 属性选择器权重等价于类选择器

/* 了解: 属性选择器 */
[class] {
    color: red;
}
[name="阿三"] {
    color: orange;
}
[aa^="a"] {
    color: black;
}
[aa$="b"] {
    color: blue;
}
[aa*="w"] {
    color: #eee;
}

六.伪类选择器

1. a标签四大伪类

:link : 未访问状态

/* 链接的初始状态(未被访问过) */
a:link {
    color: green;
}

:hover : 悬浮状态

/* 链接被鼠标悬浮 */
a:hover {
    color: yellow;
    /* 鼠标样式 */
    cursor: pointer;
}

cursor(鼠标状态) 属性值

值	描述
url(网址)	需使用的自定义光标的 URL. 注释: 请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标
default(默认)	默认光标(通常是一个箭头)
auto	默认. 浏览器设置的光标
crosshair	光标呈现为十字线
pointer	光标呈现为指示链接的指针(一只手)
move	此光标指示某对象可被移动
e-resize	此光标指示举行框的边缘可被向右(东)移动
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）
n-resize	此光标指示矩形框的边缘可被向上（北）移动
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东)
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）
s-resize	此光标指示矩形框的边缘可被向下移动（北/西）
w-resize	此光标指示矩形框的边缘可被向左移动（西）
text	此光标指示文本
wait	此光标指示程序正忙 (通常是一只表或沙漏)
help	此光标指示可用的帮助 (通常是一个问号或一个气球)

:actice : 激活状态

/* 链接处于激活状态(鼠标按下) */
a:active {
    color: red;
}

:visited : 已访问状态

/* 链接已被访问过 */
a:visited {
    color: #ccc
}

扩展对其他标签也可以使用

/* 设置初始状态 */
.box {
    width: 200px;
    height: 200px;
    background-color: red;
}
/* 再确定第二状态 */
/* 悬浮状态 */
.box:hover {
    background-color: yellowgreen;
    cursor: pointer;
}
/* 激活状态 */
.box:active {
    background-color: greenyellow;
}

2. 内容标签

:before: 内容之前
:after: 内容之后

:before, :after {
    content: "ctn";
}

3. 索引伪类

:nth-child(n): 位置优先,再匹配类型
:nth-of-type(n): 类型优先,再匹配位置

/* 同一结构下的第几个,先确定位置再匹配类型 */
section:nth-child(3), section:nth-child(5) {
    background-color: green;
}

/* 同一结构下的某选择器的第几个,先确定类型再匹配位置 */
section:nth-of-type(1), section:nth-of-type(3) {
    background-color: cyan;
}

v_hint: 值可以为位置数, 也可以为2n,3n…, 代表2的倍数, 3的倍数, 且位置数从1开始

4. 取反伪类

:not(selector): 对 selector 进行取反

/* 取反 */
/* :not 前面不加类名 就是通配 */
section:not(:nth-of-type(2)) {
    background-color: pink;
}

Wood_Ren

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 选择器

一.基础选择器* | div | . | #&lt;!-- 先建立一个用来试验选择器的 html 文件 --&gt;&lt;!-- 04.html --&gt;&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&
复制链接

扫一扫

专栏目录