实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html中元素的单位</title>
<style>
.px {
font-size:12px;
width: 300px;
background-color: #888888;
text-align: center;
line-height: 100px;
}
.em {
font-size: 16px;
width: 10em; /*em,相对于当前元素或父元素文本大小,这里等设置div的宽是160px*/
height: 5em;
background-color: lightblue;
text-align: center;
/*line-height: 100px;*/
}
.rem {
font-size:1.25rem;
width: 20rem; /*em,相对于根html元素文本大小，Google的是16px,这里宽度是：20x16=320px*/
/*height: 6.25rem;*/
background-color: lightcoral;
text-align: center;
line-height: 6.15rem;
}
</style>
</head>
<body>
<h3>html中元素的单位</h3>
<p>HTML中有三种元素单位：px、em、rem，px是绝对数值，不会变化。em是相对的数值单位，大小参考上一个的值<br>
而rem是以HTML标签的字体大小为参考的，r既是root，一般是16px。
</p>
<div class="px">这是px的像素单位</div>
<div class="em">相对数值em的大小</div>
<div class="rem">相对root根rem单位</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手写代码：
CSS选择器作业：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业：常用选择器</title>
<style>
h5 {
font-size: 20px;
color: lightblue;
}
#id5 {
font-size: 12px;
font-family: 微软雅黑;
font-style: italic;
}
.fruit { /*class 选择器*/
font-weight: bolder;
}
ul li[type]{ /*属性选择器之属性名选择:属性是type的标签变为斜体italic*/
font-style: italic;
}
ul li[type="circle"]{ /*属性选择器之以属性值为参考选择：属性值为type=circled的元素变色aqua*/
background-color: aqua;
}
ul li[class^="fr"]{ /*属性选择器: 以指定属性值开头 注意：^ 上升号*/
box-shadow:3px 3px #666666;
}
ul li[type$="le"]{ /*以指定字符串结束：le注意：$*/
background-color: red;
}
ul li[class*="ru"]{ /*属性选择器: 属性值中包含指定子串*/
background-color: cadetblue;
}
body ul li{ /*后代选择器*/
border:1px solid black;
}
ul > li[type$="re"]{ /*亲子选择器 注意$*/
font-style: italic;
}
/*!*相邻选择器*!
ul li[class$="pig"] ~ * {
!*选择当前元素之后的所有同级元素(不含当前)*!
background-color: black;
color: white;
}*/
/*!*相邻兄弟选择器*!
ul li[class$="pig"] + li {
background-color: pink;
color: black;
}*/
h5,span{ /*群主选择器，一起选择几个标签*/
font-weight: bolder;
}
/*伪类选择器：用于链接的*/
a:link{ /*访问前链接颜色*/
color: darkorange;
}
a:visited { /*访问后颜色*/
color:olivedrab;
}
/*获取焦点时*/
a:focus {
color: purple;
}
/*鼠标悬停时*/
a:hover {
color: green;
}
/*鼠标点击时*/
a:active {
color: blue;
}
/*伪类选择器用于 位置选择的例子*/
ul li:first-child{ /*选择ul中的第一元素*/
background-color: olivedrab!important;
}
ul li:last-child{
background-color: chartreuse!important;
}
ul li:nth-child(3){ /*按索引选择指定元素，计数开始为1*/
font-style: italic;
}
ul li:nth-last-child(3) { /*倒数选择指定位置的元素 */
background-color: wheat!important;
}
ul li:nth-child(even) { /*2n偶数, even偶数, 2n+1奇数, odd奇数*/
background-color: purple!important;
}
/*伪类选择器，根据子元素数量来选择*/
/*选择具有唯一子元素的元素*/
ol:only-child {
background-color: lawngreen;
}
/* 选择指定类型的唯一子元素 */
ol li:only-of-type {
background-color: lawngreen;
}
/*选择指定父级的第二个<li>子元素*/
ol li:nth-of-type(2) {
background-color: wheat;
}
</style>
</head>
<body>
<h5>标签选择器</h5>
<span id="id5">id 选择器</span>
<ul>
<li class="fruit">桃子</li>
<li class="fruit">Apple</li>
<li type="square">香蕉</li>
<li type="circle">龙眼</li>
<li>荔枝</li>
</ul>
<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>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：
1、标签选择器，id选择器，class选择器 都是常用比较简单的，属性选择器和伪类选择比较复杂。
2、属性选择器：
根据属性名，属性值，属性值中的字符串来选择：
h2[title]: 包括title属性的标签;
h2[title="汽车"]:精确匹配<h2 title="汽车">;
h2[class^="val"]: 匹配class属性值以val单词开始的元素;
h2[class$="val"]: 匹配class属性值以val单词结尾的元素;
h2[class*="val"]: 匹配class属性值包含val子串的元素;
3、伪类选择器
链接类伪类;
四中状态：link,visited,focus,hover,active
位置类伪类：
第一个: li:first-child {background-color: gray}
最后一个: li:last-child {background-color: cyan}
指定位置的子元素: li:nth-child(n) {background-color: red}
* 唯一子元素: :only-child {background-color: red}
* 限定唯一子元素: only-of-type {background-color: red}
* 例数第n个子元素: li:nth-last-child(2) {background-color: red}
* 选择每个父级的第二个p元素: p:nth-of-type(2)
