今天主要学习了三种单位 px em rem ,还有元素选择器
px:屏幕像素
em:相对于当前元素的fontsize .默认1em=16px;
rem:相对于根元素的fontsize
实例
<!doctype html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
/*标签选择器*/
span{
color: red;
}
/*ID选择器*/
#itemid{
color: #e7233e;
}
/*类选择器*/
.itemclass{
color: aquamarine;
}
/*属性选择器*/
div[name]{
color: #d1da20;
}
/*属性值选择器*/
span[name="name"]{
color: red;
}
/*属性值开头的属性值选择器*/
div[name^="user"]{
color: blue;
}
/*属性值结尾的属性值选择器*/
div[name$="password"]{
color: #e7233e;
}
/*属性值中包含的属性选择器*/
div[name*="dog"]{
color: darkturquoise;
}
/*后代选择器*/
div span{
color: #d1da20;
}
/*子元素选择器*/
ul > li{
color: #e7233e;
}
/*相邻选择器 选择了 ol下的li标签中name=n 的后面的同级元素li标签*/
ol li[name="n"] ~ li{
color: #e7233e;
}
/*相邻兄弟选择器 选择name等于nam的下一个同级标签li*/
ol li[name="nam"] +li{
color: red;
}
</style>
</head>
<body>
<span>标签选择器</span>
<div id="itemid">ID选择器</div>
<div class="itemclass">类选择器</div>
<div name="1">属性选择器</div>
<span name="name">属性值选择器</span>
<div name="user pass">属性值开头的属性值选择器</div>
<div name="uer password">属性值结尾的属性值选择器</div>
<div name="cat dog pig hro">属性值中包含的属性选择器</div>
<hr>
<div><span>后代选择器</span></div>
<ul><li>子元素选择器</li></ul>
<ol>
<li name="n">相邻选择器</li>
<li>相邻选择器</li>
<li>相邻选择器</li>
</ol>
<ol>
<li name="nam">相邻选择器</li>
<li>相邻选择器</li>
<li>相邻选择器</li>
</ol>
<hr>
<h1>伪类</h1>
<style type="text/css">
/*访问前*/
a:link{
color: #d1da20;
}
/*访问后*/
a:visited{
color: red;
}
/*鼠标获取焦点时*/
a:focus{
color: #000dcd;
}
/*鼠标悬停时*/
a:hover{
color: #0dff3b;
}
/*鼠标单击按下时*/
a:active{
color: #f5c2ef;
}
</style>
<a href="#">点击</a>
<hr>
<h1>伪类选择器</h1>
<style type="text/css">
/*选择集合中的第一个元素*/
dl dt:first-child{
color: #d1da20;
}
/*选择集合中的最后一个元素*/
dl dt:last-child{
color: #da0a27;
}
/* 倒数选择指定位置的元素 */
ul li:nth-last-child(3) {
/*将倒数第3个元素变色*/
color: wheat;
}
/*按索引选择指定的元素,注意从1开始计数*/
dl dt:nth-child(2) {
color: #2007ff;
}
/* 选择所有的偶元素变色 */
/* 2n偶数, even偶数, 2n-1奇数, odd奇数*/
dl dt:nth-child(2n-1) {
color: purple;
}
/* 选择指定元素中的唯一子元素 */
dl dt:only-of-type {
color: #fc1f2f;
}
/* 选择指定元素中的第二个子元素 */
dl dt:nth-of-type(2) {
color: lawngreen;
}
/*选择页面中内容为空的元素*/
:empty {
width: 100%;
background-color: #0006ff;
}
:empty:after {
content: 'tyle';
}
:empty:before {
/*默认插入的元素为行内元素,不支持宽度设定,如果一定要设置可以通过背景图片实现*/
content: url("https://www.baidu.com/img/baidu_jgylogo3.gif");
}
</style>
<dl>
<dt>1~li标签</dt>
</dl>
<dl>
<dt>1~li标签</dt>
<dt>2~li标签</dt>
</dl>
<dl>
<dt>1~li标签</dt>
<dt>2~li标签</dt>
<dt>3~li标签</dt>
</dl>
<dl></dl>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
