收藏
WJ批改状态：合格
老师批语：写的很好，内容很新颖！
CSS选择器用于选择你想要的元素的样式的模式。HTML页面中的元素就是通过CSS选择器进行控制的。
<style>/* 元素选择器 */body{background-color: floralwhite; text-align: center;}h1{color: darkorange;}/* 类别选择器 */.list_1{color: red; font-size: 30px;}/* id选择器 */#five{color: yellowgreen; font-family: cursive; font-style: italic; font-weight: bolder;}/* 后代选择器 */ul em{color: tomato; font-style: initial;}ul b{color: lime;font-size: 30px;}/* 父子选择器 */ul>li{font-size: 40px;}/* 下面的一级没有变化 */ul>em {font-size: 50px;}/* 同级相邻选择器 */ul+ol{font-family: STCAIYUN;}/* 同级所有选择器 */.number.em ~ .number{background-color: mediumblue;}/* 伪类选择器：不分组 *//* 第一个子元素 */ul > :first-child{background-color: mediumvioletred;}/* 最后一个子元素 */ul > :last-child{background-color: orange;}</style></head><body><h1>《锦瑟》</h1><h2>锦瑟无端五十弦，一弦一柱思华年。</h2><h3 class="list_1">庄生晓梦迷蝴蝶，望帝春心托杜鹃。</h3><h4>沧海月明珠有泪，蓝田日暖玉生烟。</h4><h5 id="five">此情可待成追忆，只是当时已惘然。</h5><ul><li>江雪</li><li>千 山 鸟 飞 绝</li><li>万 径 人 踪 灭</li><li><em> <b> 孤 舟</b> 蓑 笠 翁</em></li><li>独 钓 寒 江 雪</li></ul><ol><li>鹿柴</li><li class="number em">空 山 不 见 人</li><li class="number">但 闻 人 语 响</li><li class="number">返 景 入 深 林</li><li class="number">复 照 青 苔 上</li></ol></body>
例图：
/* 元素选择器 */body{background-color: floralwhite; text-align: center;}h1{color: darkorange;}
例图：
/* 类别选择器 */.list_1{color: red; font-size: 30px;}
例图：
/* id选择器 */#five{color: yellowgreen; font-family: cursive; font-style: italic; font-weight: bolder;}
例图：
/* 后代选择器 */ul em{color: tomato; font-style: initial;}ul b{color: lime;font-size: 30px;}
例图：
/* 父子选择器 */ul>li{font-size: 40px;}/* 下面的一级没有变化 */ul>em {font-size: 50px;}
例图：
/* 同级相邻选择器 */ul+ol{font-family: STCAIYUN;}
例图：
/* 同级所有选择器 */.number.em ~ .number{background-color: mediumblue;}
例图：
/* 第一个子元素 */ul > :first-child{background-color: mediumvioletred;}
例图：
/* 最后一个子元素 */ul > :last-child{background-color: orange;}
:target:必须与id配合，实现锚点操作
:focus:向拥有键盘输入焦点的元素添加样式
::selection:一般用于设置选择文本的前景色和背景色
:not():用于选择不满足条件的元素
::before:在元素前面加上内容，与content一起使用
::after:在元素后面加上内容，与content一起使用
:hover:向鼠标悬停时向元素添加样式
:active:向被激活的元素添加样式
:link:未被访问的链接添加样式
:visited:向已被访问的链接添加样式
代码如下：*
<head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>Document</title><style><style>/* 隐藏表单 */#form {display: none;}/* 利用：target,当鼠标点击按钮时，表单被激活并显示 */#form:target {display: block;}/* 点击输入框，获得焦点时 */input:focus {background-color: palegreen;}/* 输入的文本被选中时 */input::selection {color: brown; background-color: chartreuse;}/* 除了列表中的倒数第三个都改变背景色 */ul li:not(:nth-last-child(3)) {color: gold;}/* 列表前加内容 */ul::before {content: "我的购物车"; font-size: 40px; color:red;}/* 列表后面加内容 */ul::after {content: "恭喜你被免单了！"; color: red;font-size: 30px;}a:link {color: darkorange;}a:hover {color: darkred;}a:active {color: deeppink;}a:visited {color: yellow;}</style></head><body><form id="form"><label for="username">用户名：</label><input type="text" name="username" id="username" /><label for="cipher">密码：</label><input type="password" name="cipher" id="cipher" /><p><!-- <a href="#form">登录</a> --></p><button onclick="location='#form'">登录</button></form><hr /><ul><li>华为手机</li><li>联想电脑</li><li>小米电视</li><li>固态硬盘</li><li>内存条</li></ul><hr /><a href="#">京东618</a></body>
例图：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
