收藏
批改状态：合格
老师批语：
学习了CSS常用选择器比如：标签选择器，层级选择器，id选择器，类class选择器，属性选择器，群组选择器，相邻选择器，兄弟选择器以及伪元素的使用方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style2.css">
<title>CSS常用选择器</title>
<style type="text/css">
*{
margin:0px;
padding: 0px;
}
/*标签选择器*/
ul{
border: 1px dashed red;
overflow: hidden;
padding: 10px;
}
/*层级选择器*/
ul li{
list-style:none;
float: left;
width:40px;
height:40px;
background-color:wheat;
line-height: 40px;
text-align: center;
border-radius: 50%;
margin-left: 8px;
box-shadow: 2px 2px 1px red;
}
/*id选择器*/
#bg-pink{
background-color: pink;
}
/*class选择器*/
.bg-yellow{
background-color: yellow;
}
/*属性选择器*/
li[bg-pink]{
border: 2px solid #000;
}
/*相邻选择器*/
.bg-yellow + *{
background-color: #ccc;
}
/*兄弟选择器*/
#bg-pink~ *{
background-color: blue;
}
/*群组选择器*/
#bg-pink .bg-yellow{
border: 2px solid #ccc;
}
/*伪类：子元素选择器*/
/*第一个子类*/
ul :first-child{
background-color: red;
}
/*最后一个子类*/
ul :last-child{
background-color: yellow;
}
/*双数子类*/
ul :nth-child(2n){
background-color: red;
}
/*单数子类*/
ul :nth-child(2n+1){
background-color: red;
}
/*伪类:类型选择器*/
ul li:first-of-type{
background-color: pink;
}
ul li:nth-of-type(5){
background-color: #fff;
}
/*选择测试8*/
div:nth-child(3) p:nth-of-type(2){
background-color: red;
}
/*直接用类型p标签选择会出现2个div里面第二个p元素都变色*/
p:nth-of-type(2){
background-color: red;
}
/*启用背景颜色为粉色*/
form :enabled{
background-color: pink;
border:1px solid #ccc;
}
/*单选按钮选中文本设置字体颜色为红色，使用到相邻选择器*/
form :checked + * {
color: red;
}
/*焦点背景颜色为黄色*/
form :focus{
background-color:yellow;
}
/*错误格式信息显示红色*/
form :invalid{
color: red;
}
</style>
</head>
<body>
<div>
<ul>
<li class="bg-yellow">1</li>
<li>2</li>
<li id="bg-pink">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
<div>
<p>测试一</p>
<li>测试2</li>
<p>测试3</p>
<li>测试4</li>
</div>
<div>
<p>测试5</p>
<li>测试6</li>
<li>测试7</li>
<p>测试8</p>
</div>
<!-- 表单选择器使用方法 -->
<div>
<form method="get" action="xx.phph">
<label for="email">邮箱：</label>
<input type="email" name="email" id="email" placeholder="请填写邮箱地址">
<br>
<label for="pwd">密码：</label>
<input type="password" name="pwd" id="pwd" placeholder="请输入密码">
<br>
<label>
<input type="radio" name="save" value="7" checked>保存一周
</label>
<label>
<input type="radio" name="save" value="30">保存一个月
</label>
<br>
<button>登入</button>
</form>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：
通过学习这些选择器从中学的了很多，我比较喜欢常用的还是class选择器以及层级选择器
伪元素老师也了讲了许多，需要在实际中去运用才能完全掌握，我觉得我现在还是皮毛。不能完全掌控。
还是就是后面的表单里面的focus焦点以及checked不能成功测试出来，开始focus是ok的后面不知道怎么就不生效了。可以帮忙帮我找下错误，谢谢~！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
