收藏
批改状态：合格
老师批语：这些原生的选择器,用好了非常的方便, 别嫌麻烦
本次标签选择器、id选择器，类选择器、伪类选择器进行了深入学习，对css选择器有了更深一步认识，针对后期系统开发，相信会起到很好的协助作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器使用（标签、属性, 兄弟, 类型, 伪类）</title>
<style>
/**标签选择器**/
ul {
/*border: 1px solid coral;*/
margin: 0 auto;
padding-left: 0;
}
ul li{
list-style: none;
width: 60px;
height: 40px;
background-color: chocolate;
/*设置文本水平垂直居中*/
text-align: center;
line-height: 40px;
/*设置并排显示*/
display: inline-block;
padding-left: 10px;
/*设置阴影参数：向右边、向下面、扩散、颜色*/
box-shadow: 3px 2px 1px #888;
}
/*id选择器*/
#green{
/*background-color: green;*/
}
/*类选择器*/
.bg-yellow{
/*background-color: yellow;*/
}
/*属性选择器*/
li[class="bg-yellow"]{
/*background-color:yellowgreen;*/
/*border: 1px solid red;*/
}
/*群组选择器，会选中苹果、桃子、梨子、西瓜、榴莲*/
.red,#green,.bg-yellow{
background-color: #FF0000;
border: 2px dotted #ffb3ac;
}
/*相邻选择器*/
/* 第5个元素西瓜相邻的是第6个元素西红柿**/
#green + *{
/*background-color: yellowgreen;*/
}
/*伪类：子元素选择器*/
ul :first-child{
/**background-color: yellowgreen;**/ /**选中第一个子元素：苹果**/
}
ul :last-child{
/**background-color: yellow;**/ /**选中最后一个子元素：榴莲**/
}
/*指定选择第3个子元素：桃子,从1开始计数*/
ul :nth-child(3){
/*background-color: yellow;*/
}
/*倒数第2个，指定山竹子元素*/
ul :nth-last-child(2){
/*background-color: greenyellow;*/
}
/*伪类：类型选择器*/
/**选择第一个li类型元素，苹果**/
ul li:first-of-type{
/*background-color: green;*/
/*color: white;*/
}
/**选择最后一个li类型元素，榴莲**/
ul li:last-of-type{
/*background-color: #ffb3ac;*/
/*color: #FF0000;*/
}
/**选择第6个li类型元素，西红柿**/
ul li:nth-of-type(6){
background-color: #ffb3ac;
}
/**选择倒数第4个li类型元素，西红柿**/
ul li:nth-last-of-type(4){
/*background-color: #ffb3ac;*/
}
/* 我们发现, 伪类中的子元素选择器与类型选择器的功能几乎是一样的,那我们应该用哪个呢? */
/* 这二种伪类选择器关注点不同, 子元素选择器的重点是 "child" 关键字上,关注的是子元素位置 */
/* 而类型选择器关注点在 "type" 关键字上,重点是元素的类型 */
/*:nth-child(m): 关注位置*/
/*:nth-of-type(n): 除了关注关注位置外, 还需要元素的类型匹配*/
/*li:nth-child(m): 如果这样写, 那么与 li:nth-of-type(n)功能几乎一样*/
/* 选中每个div中的第一个子元素背景设置为绿色, 玛利亚和CSSS变色 */
div :nth-child(1){
/*background-color: green;*/
}
/*如果只想选中"CSS"，变成黄色该怎么办呢？*/
/*分析：CSS是第二个div中第一个元素h2标签的内容,而且第二个div的第一个元素是h2*/
h2:nth-child(1){
background-color: yellow;
}
/* 如果我要选择只有一个子元素且子元素为h2,应该如何做?
此时, 只有第二个div有一个h2元素,必须落选,所以只有第二个div中的h2被选中*/
/*给第二个div的第一个元素 css变色*/
h2:only-of-type{
background-color: gray;
}
/*伪类：表单控件*/
/**选择可用控件,背景颜色设置绿色**/
form :enabled{
/*background-color: green;*/
}
/**选择禁用控件,背景颜色设置灰色**/
form :disabled{
/*background-color: gray;*/
}
/* 当在控件中输入无效值文本自动变成红色 */
/*例如邮箱文本框,如果输入的不是一个有效的邮箱格式字符串, 就会实时的用颜色提示用户的*/
form :invalid {
color: red;
}
/* 设置控件获取到焦点时的样式 */
/*控件获取到焦点时, 背景变成浅绿色*/
form :focus{
background-color: lightgreen;
}
/* 设置鼠标悬停时的样式 */
button:hover{
width: 60px;
height:30px;
background-color: black;
border: none;
color: white;
}
</style>
</head>
<body>
<!--演示基本选择器-->
<ul>
<li class="red">苹果</li>
<li class="bg-yellow">梨子</li>
<li class="bg-yellow">桃子</li>
<li>桔子</li>
<li id="green">西瓜</li>
<li>西红柿</li>
<li>黄瓜</li>
<li>山竹</li>
<li class="bg-yellow">榴莲</li>
</ul>
<!-- 演示伪类选择器中的子元素与类型选择器之间的区别与联系 -->
<div>
<p>玛利亚</p>
<p>卡丽</p>
<p>张三丰</p>
</div>
<div>
<h2>CSS</h2>
<p>JavaScript</p>
<p>PHP</p>
</div>
<!-- 演示表单选择器 -->
<form action="">
<h1>登录后台</h1>
<p>
<label for="email">邮箱:</label>
<input type="email" id="email">
</p>
<p>
<label for="password">密码:</label>
<input type="password" id="password" disabled>
</p>
<p>
<input type="radio" id="week" name="save" value="7" checked><label for="week">保存一周</label>
</p>
<p>
<input type="radio" id="month" name="save" value="30"><label for="month">保存一月</label>
</p>
<p>
<button>登录</button>
</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
本地运行截图：
总结，工作中，更多用到的是标签选择器、class选择器、后代选择器、群组选择器，这几种选择器配合使用，最终才能完美呈现想要网页布局的效果。
具体个人对这几种选择器的理解如下：
标签选择器：顾名思义，直接写标签名，统一定义网页中所有用到此标签的样式；
class选择器：又称类选择器，主要针对一批需要统一设置样式的代码行，使用的一种选择器，使用比较灵活，工作中更是经常用到；
id选择器：在网页中，词选择器具有唯一性，一单定义不能重复，样式使用优先级别比较高；
群众选择器：顾名思义，标签样式、类样式、id样式如果需设置统一属性，可以一起设置样式规则；
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
