1. 交集选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>交集选择器</title>
<style>
.rich {
color: gold;
}
.beauty {
color: red;
}
/* 交集选择器 */
/* 选中类名为beauty的p元素，这种写法使用频率非常高 */
p.beauty {
color: green;
}
.rich.beauty {
color: palevioletred;
}
/* 后来者居上指的是样式的先后顺序，不是指行内元素所写的先后顺序 */
</style>
</head>
<body>
<h2 class="rich">土豪李四</h2>
<h2 class="beauty">明星张三</h2>
<h2 class="rich beauty">钻石老五</h2>
<hr/>
<p class="beauty">小狗旺财</p>
<p class="beauty">小猪佩奇</p>
</body>
</html>2. 并集选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>交集选择器</title>
<style>
.rich {
color: gold;
}
.beauty {
color: red;
}
/* 交集选择器 */
/* 选中类名为beauty的p元素，这种写法使用频率非常高 */
p.beauty {
color: green;
}
.rich.beauty {
color: palevioletred;
}
/* 后来者居上指的是样式的先后顺序，不是指行内元素所写的先后顺序 */
</style>
</head>
<body>
<h2 class="rich">土豪李四</h2>
<h2 class="beauty">明星张三</h2>
<h2 class="rich beauty">钻石老五</h2>
<hr/>
<p class="beauty">小狗旺财</p>
<p class="beauty">小猪佩奇</p>
</body>
</html>3. 后代选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
ul li {
color: red;
}
ol li {
color: green;
}
ul li a {
color: orange;
}
ol li a {
color: gray;
}
.subject li.yuwen {
color: blue;
}
.subject div.yuwen {
color: chocolate;
}
</style>
</head>
<body>
<ul>
<li>抽烟</li>
<li>喝酒</li>
<li>
<a href="#">烫头</a>
</li>
<!-- <div>
<li>踢球</li>
</div> -->
</ul>
<hr/>
<ol>
<li>张三</li>
<li>李四</li>
<li>
<a href="#">王五</a>
</li>
</ol>
<hr/>
<ol class="subject">
<li class="yuwen">语文</li>
<div class="yuwen">学科介绍：学好语文</div>
<li>数学</li>
<li>英语</li>
</ol>
</body>
</html>4. 子代选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>子代选择器</title>
<style>
/* 只选择儿子 div中的子代a元素 */
div>a {
color: red;
}
div>p>a {
color: skyblue;
}
.foot>a {
color: gray;
}
</style>
</head>
<body>
<div>
<a href="#">张三</a>
<a href="#">李四</a>
<a href="#">王五</a>
<p>
<a href="#">赵六</a>
<div class="foot">
<a href="#">孙七</a>
</div>
</p>
</div>
</body>
</html>5. 兄弟选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>兄弟选择器</title>
<style>
/* 相邻兄弟选择器 */
/* 找到跟div紧紧相邻的p元素，兄弟选择器只往下看，不往上看（睡在我下铺的兄弟） */
/* div+p {
color: red;
} */
/* 通用兄弟选择器 */
/* 选中div后所有的兄弟p元素（睡在我下铺的所有兄弟） */
div~p {
color: red;
}
li+li {
color: orange;
}
</style>
</head>
<body>
<div>语文</div>
<p>数学</p>
<p>英语</p>
<p>物理</p>
<hr/>
<ul>
<li>主页</li>
<li>秒杀</li>
<li>订单</li>
<li>我的</li>
</ul>
</body>
</html>6. 属性选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
/* 1.选中具有title属性的元素 */
/* [title] {
color: red;
} */
/* 2.选中具有title属性，且属性值为yuwen的元素 */
/* [title="yuwen"] {
color: red;
} */
/* 3.选中具有title属性，且属性值以字母y开头的元素 */
/* [title^="y"] {
color: red;
} */
/* 4.选中具有title属性，且属性值以字母n结尾的元素 */
/* [title$="n"] {
color: red;
} */
/* 3.选中具有title属性，且属性值包含字母n的元素 */
[title*="n"] {
color: red;
}
</style>
</head>
<body>
<div title="yuwen">语文</div>
<div title="shuxue">数学</div>
<div>英语</div>
<div>物理</div>
</body>
</html>7. 伪类选择器—概念
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪类选择器_概念</title>
<style>
/* 伪类：很像类，但不是类（class），是元素特殊状态的一种描述 */
/* 没有访问过的 */
a:link {
color: orange;
}
/* 访问过的 */
a:visited {
color: gray;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">去百度</a>
<a href="https://www.jd.com">去京东</a>
</body>
</html>8. 伪类选择器—动态伪类
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪类选择器_动态伪类</title>
<style>
/* 顺序：lvha */
/* 没有访问过的 */
a:link {
color: orange;
}
/* 访问过的 */
a:visited {
color: gray;
}
/* 选中的是鼠标悬浮状态的a元素 */
a:hover {
color: skyblue;
}
/* 选中的是激活状态的a元素 */
a:active {
color: green;
}
span:hover {
color: pink;
}
span:active {
color: yellowgreen;
}
input:focus {
color: orange;
background-color: green;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">去百度</a>
<a href="https://www.jd.com">去京东</a>
<span>孙笑川</span>
<br>
<input type="text">
<br>
<input type="text">
<br>
<input type="text">
</body>
</html>9. 伪类选择器—结构伪类1
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪类选择器_结构伪类_1</title>
<style>
/* 选中的是div的第一个儿子p元素（按照所有子元素计算的，以下同理） 结构1*/
/* div>p:first-child {
color: red;
} */
/* 选中的是div的第一个儿子p元素 结构2*/
/* div>p:first-child {
color: red;
} */
/* 选中的是p元素，且p的父亲是谁无所谓，但p必须是其父亲的第一个儿子 结构3*/
/* div p:first-child {
color: red;
} */
p:first-child {
color: red;
}
</style>
</head>
<body>
<!-- 结构1 -->
<!-- <div>
<p>张三：98分</p>
<p>李四：88分</p>
<p>王五：78分</p>
<p>赵六：68分</p>
</div> -->
<!-- 结构2 -->
<!-- <div>
<span>张三：98分</p>
<p>李四：88分</p>
<p>王五：78分</p>
<p>赵六：68分</p>
</div> -->
<!-- 结构3 -->
<p>测试一</p>
<div>
<p>测试二</p>
<marquee>
<p>测试三</p>
<p>张三：98分</p>
</marquee>
<p>李四：88分</p>
<p>王五：78分</p>
<p>赵六：68分</p>
</div>
</body>
</html>10. 伪类选择器—结构伪类2
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪类选择器_结构伪类_2</title>
<style>
/* 选中的是div的第一个儿子p元素（按照所有子元素计算的，以下同理） 结构1*/
/* div>p:first-child {
color: red;
} */
/* 选中的是div的最后一个儿子p元素（按照所有子元素计算的） 结构1 */
/* div>p:last-child {
color: red;
} */
/* 选中的是div的第n个儿子p元素（按照所有子元素计算的） 结构1 */
/* div>p:nth-child(3) {
color: red;
} */
/* 选中的是div的偶数个儿子p元素（按照所有子元素计算的） 结构2 */
/*
关于n的值：
1. 0或不写：什么都不选中（几乎不用）
2. n：选中所有的子元素（几乎不用）
3. 1 ~ 正无穷的整数：选中对应序号的子元素
4. 2n或even： 选中序号为偶数的子元素
5. 2n + 1：选中序号为奇数的子元素
6. -n + 3：选中前三个
*/
/* div>p:nth-child(2n) {
color: red;
} */
/* 选中的是div的第一个儿子p元素（按照所有同类型兄弟计算） 结构3 */
/* div>p:first-of-type {
color: red;
} */
/* 选中的是div的最后一个儿子p元素（按照所有同类型兄弟计算） 结构3 */
/* div>p:last-of-type {
color: red;
} */
/* 选中的是div的第n个儿子p元素（按照所有同类型兄弟计算） 结构3 */
div>p:nth-of-type(3) {
color: red;
}
</style>
</head>
<body>
<!-- 结构1 -->
<!-- <div>
<p>张三：98分</p>
<p>李四：88分</p>
<p>王五：78分</p>
<p>赵六：68分</p>
<p>孙七：58分</p>
<p>老八：48分</p>
</div> -->
<!-- 结构2 -->
<!-- <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>
<p>第10个</p>
</div> -->
<!-- 结构3 -->
<div>
<span>测试1</span>
<p>张三：98分</p>
<p>李四：88分</p>
<span>测试2</span>
<p>王五：78分</p>
<p>赵六：68分</p>
<span>测试3</span>
<p>孙七：58分</p>
<span>测试4</span>
<p>老八：48分</p>
</div>
</body>
</html>10. 伪类选择器—结构伪类3
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪类选择器_结构伪类_3</title>
<style>
/* 选中div中倒数第n个的儿子p元素（按照所有兄弟元素计算） 结构1 */
/* div>p:nth-last-child(3) {
color: red;
} */
/* 选中div中倒数第n个的儿子p元素（按照所有同类型的兄弟元素计算） 结构1 */
/* div>p:nth-last-of-type(2) {
color: red;
} */
/* 选中的是没有兄弟的span元素 结构2 */
/* span:only-child {
color: red;
} */
/* 选中的是没有同类型兄弟的span元素 结构2 */
/* span:only-of-type {
color: red;
} */
/* 选中的是html根元素 */
/* :root {
background-color: gray;
} */
/* 选中的是没有内容的div元素（空格也算元素，所以div空标签内不能有空格，不然选不中） */
div:empty {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<!-- 结构1 -->
<!-- <div>
<span>测试1</span>
<p>张三：98分</p>
<p>李四：88分</p>
<p>王五：78分</p>
<p>赵六：68分</p>
<p>孙七：58分</p>
<p>老八：48分</p>
<span>测试2</span>
</div> -->
<!-- 结构2 -->
<!-- <div>
<span>测试1</span>
</div>
<div>
<span>测试2</span>
<p>张三：98分</p>
<p>李四：88分</p>
<p>王五：78分</p>
<p>赵六：68分</p>
<p>孙七：58分</p>
<p>老八：48分</p>
</div> -->
<!-- 结构3 -->
<div></div>
</body>
</html>12. 伪类选择器—否定伪类
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪类选择器_否定伪类</title>
<style>
/* 选中的是div的儿子p元素，但是排除类名为fail的元素 */
/* div>p:not(.fail) {
color: red;
} */
/* 选中的是div的儿子p元素，但是排除title属性值以“不及格”开头的 */
/* div>p:not([title^="不及格"]) {
color: red;
} */
/* 选中的是div的儿子p元素，但是排除第一个儿子p元素 */
div>p:not(:first-child) {
color: red;
}
</style>
</head>
<body>
<!-- 结构1 -->
<div>
<p>张三：98分</p>
<p>李四：88分</p>
<p>王五：78分</p>
<p>赵六：68分</p>
<p class="fail" title="不及格">孙七：58分</p>
<p class="fail" title="不及格">老八：48分</p>
</div>
</body>
</html>13. 伪类选择器—UI伪类
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪类选择器_UI伪类</title>
<style>
/* 选中的是勾选的复选框或单选按钮 */
input:checked {
width: 100px;
height: 100px;
}
/* 选中的是被禁用的input元素 */
input:disabled {
background-color: gray;
}
/* 选中的是可用的input元素 */
input:enabled {
background-color: green;
}
</style>
</head>
<body>
<input type="checkbox">
<input type="radio" name="gender">
<input type="radio" name="gender">
<input type="text">
<input type="text" disabled>
</body>
</html>14. 伪类选择器—目标伪类
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪类选择器_目标伪类</title>
<style>
div {
height: 900px;
background-color: lightcyan;
}
div:target {
background-color: green;
}
</style>
</head>
<body>
<a href="#one">去看第1个</a>
<a href="#two">去看第2个</a>
<a href="#three">去看第3个</a>
<a href="#four">去看第4个</a>
<a href="#five">去看第5个</a>
<a href="#six">去看第6个</a>
<div id="one">第1个</div>
<br>
<div id="two">第2个</div>
<br>
<div id="three">第3个</div>
<br>
<div id="four">第4个</div>
<br>
<div id="five">第5个</div>
<br>
<div id="six">第6个</div>
</body>
</html>15. 伪类选择器—语言伪类
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪类选择器_语言伪类</title>
<style>
/* 根据指定的语言来选择元素 */
div:lang(en) {
color: red;
}
:lang(zh-CN) {
color: green;
}
</style>
</head>
<body>
<div>语文</div>
<div lang="en">数学</div>
<p>英语</div>
<span>科学</div>
</body>
</html>16. 伪元素选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪元素选择器</title>
<style>
/* 伪元素：很像元素，但不是元素（element），是元素中的一些特殊位置 */
/* 选中的是div中的第一个文字 */
div::first-letter {
color: red;
font-size: 16px;
}
/* 选中的是div中的第一行文字 */
div::first-line {
background-color: yellow;
}
/* 选中的是div中被鼠标选择的文字 */
div::selection {
background-color: green;
color: red;
}
/* 选中的是input元素中的提示元素 */
input::placeholder {
color: skyblue;
}
/* 选中的是p元素最开始的位置，随后创建一个子元素（必须配合conten使用） */
p::before {
content: "￥";
}
p::after {
content: ".00";
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas praesentium dicta, dolorem suscipit dolores amet iusto tenetur in necessitatibus inventore porro veritatis molestias reiciendis iste veniam repellendus at quaerat soluta!</div>
<input type="text" placeholder="请输入内容">
<p>199</p>
<p>299</p>
<p>399</p>
</body>
</html>
评论 (0)