收藏
批改状态：合格
老师批语：
一、概述
本节课主要讲了表单form(单选、多选、文本、按钮、图像)、元素单位（px、em、rem）、样式继承和冲突、css的各种选择器。尤其是选择器是重中之重，手打了一遍代码还是觉得理解有不到位的地方。
二、代码（选择器部分）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>选择器</title>
<style type="text/css">
ul{
margin: 0;
width: 550px;
border: 1px dashed #666;
padding: 10px 5px;
}
/*字块撑开父级区*/
ul:after{
content:'';
display: block;
clear: both;
}
ul li{
list-style: none;
float: left;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 50%;
box-shadow: 2px 2px 2px #888;
background-color: skyblue;
margin-right: 5px;
}
/*id选择器*/
#item1 {
background-color: coral;
}
/*类选择器*/
.item2{
background-color: gold;
}
/*属性选择器：属性名*/
ul li[class]{
background-color: purple;
}
ul li[class="item2"]{
background-color: grey;
}
/*发现问题！！！！选择器[]和元素名之间必须没有空格*/
/*属性选择器：以指定属性值开头,注意^、$的符号位置*/
ul li[class^="cat"]{
background-color: brown;
}
ul li[class$="pig"]{
background-color: red;
}
/*属性选择器：属性包括指定字符串*/
ul li[class*="te"] {
background-color: green;
}
ul li[class*="t"] {
background-color: black;
}
/*和上下文位置相关的选择器：后代（层级、派生选择器）是祖先关系父子、父父子都可以*/
/*后代选择器*/
body ul li{
border: 1px solid black;
}
/*子选择器：只有父子关系*/
ul >li[class$="pig"]{
background-color:greenyellow;
}
/* 相邻选择器：当前元素不被选中*/
ul li[class$="pig"] ~ * {
background-color :black;
color: white;
}
/*相邻兄弟选择器*/
ul li[class$="pig"] + li{
background-color: pink;
color: black;
}
/*群组选择器*/
h1 , p{
font-size: 2rem;/*32px*/
font-weight: lighter;
margin :0;
}
/*伪类选择器：a标签链接*/
a{
font-size: 2rem;
text-decoration: none;
}
/*访问前*/
a:link{
color: red;
}
/* 后*/
a:visited{
color: orange;
}
/* 焦点*/
a:focus{
color: purple;
}
/*鼠标悬停*/
a:hover{
color:green;
}
/* 鼠标点击*/
a:active{
color: blue;
}
/* 伪类选择器,计数从1开始*/
ul li:first-child{
background-color: #efefef!important;
}
ul li:last-child{
background-color: red;
}
ul li:nth-child(5){
background-color: green;
}
ul li:nth-child(even){
background-color: purple!important;;
}
/* 上面这个优先级高
ul li[class$="pig"] + li{
background-color: pink;
color: black;
}*/
ul li:nth-child(odd){
background-color: gold!important;
}
/*伪类选择器根据子元素数量选*/
/*找只有唯一子元素的选择*/
ol :only-child{
background-color: lawngreen;
}
ol li:only-child{
background-color: lawngreen;
}
/*倒数第三个,同样是important这个由于后写所以覆盖*/
ul li:nth-last-child(3) {
background-color: wheat!important;
}
/*选中多个元素中的子元素*/
ol li:nth-of-type(2){
background-color: wheat;
}
:empty{
width: 200px;
height: 200px;
background-color: coral;
}
:empty:after{
content: "你好";
}
:empty:before{
content: url("../0814/bj.jpg");
}
</style>
</head>
<body>
<ul>
<li id="item1">1</li>
<li class="item2">2</li>
<li class="cat dog pig">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<h1>css选择器练习</h1>
<p>练习很重要</p>
<a href="http://www.php.cn">zphp大发哈哈哈</a>
<ol>
<li>列表1</li>
</ol>
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ol>
<div></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
运行结果图：
三、总结
1、选择器[]和元素名之间必须没有空格
2、后代选择器父子、父父子都可以
3、ol\ul:空格only-child
4、a链接的处理有个规律要记住：
a:link - >a:visited - > a:hover - > a:active
简写就是 L V H A
这个顺序是一定要遵循的
四、附录
手写截图
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
