收藏
批改状态：合格
老师批语：
今天是第四天上课，朱老师讲了好多内容。主要讲了一下几块内容：
1、重要的表单讲解，我认为是PHP开发很重要的内容。
2、CSS的三种单位：px、em、rem。这是我容易忽略但重要的知识点。
3、样式的继承。这个比较好理解。
4、选择器。这真是重中之重啊，搞的我头很大，很需要花时间去巩固。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用选择器</title>
<style type="text/css">
/*标签选择器,根据标签来选择元素*/
ul { padding:10px 5px;
margin:0;
width:800px;
border:1px dashed $666;
}
ul:after { /*子块撑开父块*/
content:''; /*在子元素尾部添加空内容元素*/
display: block; /*并设置为块级显示*/
clear:both; /*清除二边的浮动*/
}
ul li { list-style:none;
float:left;
width:50px;
height:50px;
line-height:50px;
text-align:center;
border-radius:50%;/*变成圆的 */
box-shadow:2px 2px 2px #888;
background-color: skyblue;
margin:1%;
}
/*id选择器,根据id来选择元素*/
#item1 { background-color: coral; }
/*类（class）选择器,根据class来选择元素*/
.item2 { background-color: gold; }
/*属性选择器，比较复杂*/
/*属性选择器: 属性名*/
ul li[class] { background-color: blueviolet; }
/*属性选择器: 属性值*/
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; }
/*后代选择器/层级选择器*/
body ul li { border: 1px solid black; }/*ul可以省略，因为li也是body的子孙*/
/*子选择器*/
ul > li[class="pig"] { background-color: #000000 }
/*相邻选择器*/
ul li[class$="pig"] ~ * {
background-color: black;
color: white;
}/*选择当前元素之后的所有同级元素，注意是之后的元素，在前面的元素不包含*/
/*相邻兄弟选择器*/
ul li[class$="pig"] + li {
background-color: pink;
color: black;
}/*相邻的紧接在之后的一个元素*/
/*群组选择器*/
/*h1, p {
font-size: 2rem;
font-weight: lighter;
margin: 0;
}*/
/*伪类选择器: 链接*/
a { font-size:2rem; }
/*访问前*/
a:link { color:red; }
/*访问后*/
a:visited { color:orange; }
/*获取焦点时*/
a:focus { color:purple; }
/*鼠标悬停时*/
a:hover { color:green; }
/*鼠标点击时*/
a:active { color:blue; }
/*伪类选择器: 位置*/
/*选择集合中的第一个元素*/
ul#two li:first-child { background-color: red !important; }
/*选择集合中的最后一个子元素*/
ul#two li:last-child { background-color: purple !important; }
/*按索引选择指定的元素,注意索引是从1开始计数*/
ul#two li:nth-child(2) { background-color:orange !important; }
ul#two li:nth-child(5) { background-color:cyan !important; }
/* 选择所有的偶数子元素 */
/* 2n偶数, even偶数*/
/* 2n+1奇数, odd奇数*/
ul#two li:nth-child(even) { background-color: green; }/*选择偶数*/
ul#two li:nth-child(odd) { background-color: yellow; }/*选择奇数*/
/* 倒数选择指定位置的元素 */
ul#two li:nth-last-child(2) { background-color: blue; }
ol{ width:200px; }
/*伪类选择器: 根据子元素数量*/
/*选择具有唯一子元素的元素,匹配属于父元素中唯一子元素的li元素:*/
li:only-child { background-color: red !important }
/* 选择指定类型的唯一子元素 ,查找ol下li类型的元素为唯一子元素的li*/
ol li:only-of-type { background-color: orange; }
/*选择指定父级的第二个<li>子元素*/
ol li:nth-of-type(2) { background-color: yellow; }
/*选择页面中内容为空的元素*/
:empty {
width: 220px;
height: 271px;
background-color: coral;
}
:empty:after { content: '插入的内容'; }
/*默认插入的元素为行内元素,不支持宽度设定,如果一定要设置可以通过背景图片实现*/
:empty:before { content: url("images/1.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>
伪类选择器：位置相关
<ul id="two">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
a链接：伪类
<a href="http://php.cn">PHP中文网</a>
<ol>
<li>列表项1</li>
<!--
现在给ol再添加一个子元素<p>,有二个子元素了,所以子元素不再唯一,
如何才能选中唯一的li元素呢？only-of-type
-->
<p>第二子元素</p>
</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>点击 "运行实例" 按钮查看在线实例
效果图：
手写代码：
课堂总结：这次朱老师讲的前面的还是比较能轻松掌握的，只有 表单 和 属性选择器 是需要慢慢消化的，与位置有关的选择器需要好好理解一下，一时半会还是有些困惑的。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
