属性选择器(attribute selectors) - [att]
属性选择器 - [att=val]
属性选择器 - [attr*=val]
属性选择器 - [attr^=val]
属性选择器 - [attr|=val]
属性选择器 - [attr~=val]
属性选择器 - [attr$=val]
01_属性选择器.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
[title] {
color: #f00;
}
/* [title="div元素"] {
font-size: 25px;
} */
[title='one div元素'] {
font-size: 25px;
}
/* 了解一下 */
/* title中包含one单词 */
[title*='one'] {
background-color: #00f;
}
/* title以one开头 */
/* [title^="one"] {
background-color: #00f;
} */
/* title以one结束 */
/* [title$="one"] {
background-color: #00f;
} */
</style>
</head>
<body>
<div title="one div元素">我是div元素</div>
<p title="p元one素">我是p元素</p>
<p title="p one">我是p元素</p>
<p>我也是p元素</p>
<span title="one span元素">我是span元素</span>
</body>
</html>
后代选择器(descendant combinator)
02_后代选择器(最重要).html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
/* 后代选择器 */
/* 选中 div下面的span元素(直接子元素和间接后代元素) */
/* div span {
color: #f00;
} */
div p span {
color: #f00;
}
</style>
</head>
<body>
<span>文字内容1</span>
<div>
<span>文字内容2</span>
<p>
<span>文字内容3</span>
</p>
<div>
<span>文字内容4</span>
</div>
<span>文字内容5</span>
</div>
<div>
<a href="#">
<span>文字内容6</span>
</a>
</div>
</body>
</html>
子选择器(child combinators)
03_子代选择器(重要).html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
div > span {
color: red;
}
p > div {
color: red;
}
.box > span {
font-size: 30px;
}
.box > .title {
background-color: #00f;
}
</style>
</head>
<body>
<span>文字内容1</span>
<div class="box">
<span>文字内容2</span>
<p>
<span>文字内容3</span>
</p>
<div>
<span>文字内容4</span>
</div>
<span class="title">文字内容5</span>
<div class="title">呵呵呵呵呵</div>
</div>
<div>
<a href="#">
<span>文字内容6</span>
</a>
</div>
<!-- <p>
<div>哈哈哈哈</div>
</p> -->
</body>
</html>
相邻兄弟选择器(adjacent sibling combinator)
04_相邻兄弟选择器.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
div + p {
color: red;
}
</style>
</head>
<body>
<p>文字内容0</p>
<div>
<p>文字内容1</p>
</div>
<p>文字内容2</p>
<p>文字内容3</p>
<div></div>
<p>文字内容4</p>
</body>
</html>
全体兄弟选择器(general sibling combinator)
05_全兄弟选择器.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
div ~ p {
color: red;
}
</style>
</head>
<body>
<p>文字内容0</p>
<div>
<p>文字内容1</p>
</div>
<p>文字内容2</p>
<p>文字内容3</p>
<div></div>
<p>文字内容4</p>
</body>
</html>
选择器组 - 交集选择器
06_交集选择器(重要).html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
/* div {
color: red;
}
.one {
color: red;
} */
/* 文字1和文字4变成红色 */
/* div.one {
color: red;
} */
/* 文字2和文字4变成红色 */
.one[title='text'] {
color: red;
}
</style>
</head>
<body>
<div class="one">文字内容1</div>
<p class="one" title="text">文字内容2</p>
<span class="one">文字内容3</span>
<div class="one" title="text">文字内容4</div>
<div title="text">文字内容5</div>
</body>
</html>
选择器组 - 并集选择器
选择器组 - 交集、并集选择器对比
练习
07_并集选择器(重要).html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
div,
.one,
[title] {
color: red;
}
</style>
</head>
<body>
<div>文字内容1</div>
<span class="one">文字内容2</span>
<p title="text">文字内容3</p>
<strong class="one">文字内容4</strong>
<a href="#" class="one">文字内容5</a>
<div>文字内容6</div>
<div></div>
</body>
</html>
伪类(pseudo-classes)
08_伪类_目标伪类.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
:target {
color: red;
}
</style>
</head>
<body>
<a href="#title1">标题1</a>
<a href="#title2">标题2</a>
<a href="#title3">标题3</a>
<h2 id="title1">标题1</h2>
<p>我是内容1</p>
<p>我是内容1</p>
<p>我是内容1</p>
<p>我是内容1</p>
<p>我是内容1</p>
<p>我是内容1</p>
<p>我是内容1</p>
<p>我是内容1</p>
<p>我是内容1</p>
<p>我是内容1</p>
<p>我是内容1</p>
<p>我是内容1</p>
<p>我是内容1</p>
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<h2 id="title2">标题2</h2>
<p>我是内容2</p>
<p>我是内容2</p>
<p>我是内容2</p>
<p>我是内容2</p>
<p>我是内容2</p>
<p>我是内容2</p>
<p>我是内容2</p>
<p>我是内容2</p>
<p>我是内容2</p>
<p>我是内容2</p>
<p>我是内容2</p>
<p>我是内容2</p>
<p>我是内容2</p>
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<h2 id="title3">标题3</h2>
<p>我是内容3</p>
<p>我是内容3</p>
<p>我是内容3</p>
<p>我是内容3</p>
<p>我是内容3</p>
<p>我是内容3</p>
<p>我是内容3</p>
<p>我是内容3</p>
<p>我是内容3</p>
<p>我是内容3</p>
<p>我是内容3</p>
<p>我是内容3</p>
<p>我是内容3</p>
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
</body>
</html>
09_伪类_元素状态伪类.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
button {
background-color: #f00;
}
/* button[disabled] {
color: red;
} */
:disabled {
color: red;
}
</style>
</head>
<body>
<!-- enable -> disable(不可用) -->
<button disabled>我是按钮</button>
<button>我是按钮</button>
<a href="#">百度一下</a>
</body>
</html>
动态伪类(dynamic pseudo-classes)
动态伪类 - :focus
去除a元素默认的:focus效果
细节
10_伪类_动态伪类.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
/* 未访问状态 */
a:link {
color: red;
}
/* 已经访问过 */
a:visited {
color: green;
}
/* 手指(鼠标)放上去 */
a:hover {
color: blue;
}
/* 手指点下去, 未松手 */
a:active {
color: orange;
}
a {
color: red;
}
/* 2.hover/active应用到其他元素 */
strong:hover {
background-color: purple;
}
strong:active {
font-size: 40px;
}
/* 3.focus的使用 */
input:focus {
background-color: #f00;
}
a:focus {
/* background-color: #ff0; */
}
/* 4.去掉a元素的焦点状态 */
/* a:focus {
outline: none;
} */
</style>
</head>
<body>
<!-- 1.lv ha -> a元素上 -->
<!-- tabindex可以调整tab选中元素的顺序 -->
<a tabindex="-1" href="#">Google一下</a>
<!-- 2.hover/active -->
<strong>我是strong元素</strong>
<!-- 3.focus -->
<input type="text" />
</body>
</html>
11_伪类_已访问的链接.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
a:visited {
color: red;
}
</style>
</head>
<body>
<a href="#">百度一下</a>
<a href="#123">京东一下</a>
<a href="#321">淘宝一下</a>
</body>
</html>
结构伪类(structural pseudo-classes) - :nth-child()
结构伪类 - :nth-child( )
结构伪类 - :nth-child( )
结构伪类 - :nth-child( )
结构伪类 - :nth-last-child( )
结构伪类 - :nth-of-type( )、:nth-last-of-type( )
结构伪类
结构伪类 - :empty
否定伪类(negation pseudo-class)
12_伪类_nth-child-数字.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
/* 1.第三个子元素 */
/* :nth-child(3) {
color: red;
} */
/* 2.交集选择器: 1.必须是p元素 2.p元素是子元素中第三个元素 */
p:nth-child(3) {
color: red;
}
</style>
</head>
<body>
<div>
<p>文字内容1</p>
<p>文字内容2</p>
<p>文字内容3</p>
<p>文字内容4</p>
<p>文字内容5</p>
<p>文字内容6</p>
<p>文字内容7</p>
<p>文字内容8</p>
<p>文字内容9</p>
</div>
<p>
<span>span文字内容1</span>
<span>span文字内容2</span>
<span>span文字内容3</span>
<span>span文字内容4</span>
<span>span文字内容5</span>
</p>
<div>
<strong>strong文字内容1</strong>
<strong>strong文字内容2</strong>
</div>
</body>
</html>
13_伪类_nth-child-n.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p:nth-child(2n) {
color: red;
}
/* 1.n: 自然数,不是整数,0不是整数,0, 1, 2, 3, 4, 5, 6, 7.... */
/* p:nth-child(n) {
color: red;
} */
/* 2.2n: 2, 4, 6, 8: 偶数 */
/* 2n: 替换成 even */
/* p:nth-child(2n) {
color: red;
} */
/* p:nth-child(even) {
color: red;
} */
/* 2.2n+1: 1, 3, 5, 7: 奇数 */
/* p:nth-child(2n+1) {
color: blue;
} */
/* 2n+1: 替换成odd */
/* p:nth-child(odd) {
color: blue;
} */
/* 3.3n */
/* 3n: 3, 6, 9.... */
/* 3n+2: 2, 5, 8 */
p:nth-child(3n+2) {
/* color: green; */
}
/* 4.负数: -n+5 */
p:nth-child(-n+3) {
color: red;
}
</style>
</head>
<body>
<div>
<p>文字内容1</p>
<p>文字内容2</p>
<p>文字内容3</p>
<p>文字内容4</p>
<p>文字内容5</p>
<p>文字内容6</p>
<p>文字内容7</p>
<p>文字内容8</p>
<p>文字内容9</p>
</div>
<!-- <p>
<span>span文字内容1</span>
<span>span文字内容2</span>
<span>span文字内容3</span>
<span>span文字内容4</span>
<span>span文字内容5</span>
</p> -->
</body>
</html>
14_伪类_nth-child-强调.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
/*
交集选择器:
* 是一个p元素
* 同时p元素作为子元素的第一个元素
*/
p:nth-child(1) {
color: red;
}
/*
后代选择器:
* 选择p元素, 但是后面是一个空格, 选p的后代
* 选择后代的第一个子元素
*/
p span:nth-child(1) {
color: green;
}
</style>
</head>
<body>
<div>
<p>文字内容1</p>
<p>文字内容2</p>
</div>
<p>
<strong>strong1</strong>
<span>span1</span>
<span>span2</span>
</p>
</body>
</html>
15_伪类_nth-last-child-数字.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* nth-child: 正着数(从前向后) */
/* nth-last-child倒着数(从后向前) */
/* 1.跟数字 */
p:nth-last-child(3) {
color: red;
}
/* 2.跟n */
/* 0, 1, 2, 3 */
/* 1, 3, 5, 7 */
p:nth-last-child(2n+1) {
color: red;
}
</style>
</head>
<body>
<div>
<p>文字内容1</p>
<p>文字内容2</p>
<p>文字内容3</p>
<p>文字内容4</p>
<p>文字内容5</p>
<p>文字内容6</p>
<p>文字内容7</p>
<p>文字内容8</p>
<p>文字内容9</p>
</div>
</body>
</html>
16_伪类_nth-of-type-数字.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
/* p:nth-child(3) {
color: red;
} */
p:nth-of-type(3) {
color: red;
}
</style>
</head>
<body>
<div>
<div>我是div元素</div>
<p>文字内容1</p>
<span>我是span元素</span>
<p>文字内容2</p>
<p>文字内容3</p>
<p>文字内容4</p>
<p>文字内容5</p>
<p>文字内容6</p>
<p>文字内容7</p>
<p>文字内容8</p>
<p>文字内容9</p>
</div>
</body>
</html>
17_伪类_nth-of-type-n.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
/* p:nth-child(2n) {
color: red;
} */
p:nth-of-type(2n) {
color: red;
}
</style>
</head>
<body>
<div>
<div>我是div元素</div>
<p>文字内容1</p>
<span>我是span元素</span>
<p>文字内容2</p>
<p>文字内容3</p>
<p>文字内容4</p>
<p>文字内容5</p>
<p>文字内容6</p>
<p>文字内容7</p>
<p>文字内容8</p>
<p>文字内容9</p>
</div>
</body>
</html>
18_伪类_nth-last-of-type.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
/* p:nth-last-child(3) {
color: red;
} */
p:nth-last-of-type(3) {
color: red;
}
</style>
</head>
<body>
<div>
<div>我是div元素</div>
<p>文字内容1</p>
<span>我是span元素</span>
<p>文字内容2</p>
<p>文字内容3</p>
<p>文字内容4</p>
<p>文字内容5</p>
<p>文字内容6</p>
<p>文字内容7</p>
<p>文字内容8</p>
<span>我是span元素</span>
<p>文字内容9</p>
</div>
</body>
</html>
19-伪类_only-child.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
/* 父元素中的唯一子元素 */
/* 1.only-child */
/* body :only-child {
color: red;
} */
/* 2.only-of-type: 唯一该类型的子元素 */
body :only-of-type {
color: red;
}
</style>
</head>
<body>
<div>
<p>
<span>文字内容1</span>
</p>
<div>文字内容2</div>
<div>div元素</div>
</div>
<div>
<strong>文字内容3</strong>
<a href="#">
<span>文字内容4</span>
</a>
</div>
</body>
</html>
20_伪类_root.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
html {
}
:root {
}
</style>
</head>
<body></body>
</html>
21_伪类_empty.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
:empty {
height: 20px;
background-color: #f00;
}
</style>
</head>
<body>
<div>
<p></p>
<span>哈哈哈</span>
</div>
<div>
<strong>呵呵呵</strong>
<a href="#">嘻嘻嘻</a>
<div></div>
</div>
</body>
</html>
22_伪类_否定伪类not.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
/* 除了div之外,所有的元素 */
/* body :not(p) {
color: red;
} */
:not(html) :not(body):not(div) {
color: red;
}
/* body :not(body):not(div) {
color: red;
}
div :not(body):not(div) {
color: red;
} */
.p2 {
color: red;
}
</style>
</head>
<body>
<div>文字内容1</div>
<p class="p2">文字内容2</p>
<span class="text">文字内容3</span>
<div>文字内容4</div>
<div>
<span>哈哈哈哈</span>
</div>
</body>
</html>
伪元素(pseudo-elements)
伪元素 - ::first-line
23_伪元素_first-line-letter.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
p {
400px;
background-color: #6cc;
}
p::first-letter {
font-size: 50px;
}
p::first-line {
color: #fff;
}
</style>
</head>
<body>
<p>
印度AI视频监控平台Cognitifai致力于使用计算机视觉技术来保障公共安全。公司研发的全开放式AI平台Visionapi.ai可以应用在多个领域,其AI解决方案可以与企业系统平台无缝对接。
</p>
</body>
</html>
24_伪元素_before和after.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
/* .number {
color: red;
} */
/* 结论: 伪元素可以看成是行内元素 */
span::before {
content: '';
/* color: red; */
background-color: green;
display: inline-block;
100px;
height: 30px;
margin-right: 20px;
}
span::after {
/* content: "abc"; */
content: url('../img/test_01.webp');
color: purple;
margin-left: 20px;
}
</style>
</head>
<body>
<!-- <span class="number">1</span> -->
<span>我是span元素</span>
</body>
</html>