实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS常用选择器</title>
<style>
* {
padding: 0;
margin: 0;
}
ul{ /*标签选择器*/
color: white;
margin-top: 20px;
margin-left: 20px;
width: 800px;
border: 1px solid #A9F851;
padding: 10px 8px;
}
ul:after { /*伪类;子块撑开父块*/
content: ''; /*子元素尾部添加空内容元素*/
display: block; /*设置块级显示*/
clear: both; /*清除二边的浮动*/
}
ul li { /*派生选择器*/
border: 1px solid black;
list-style-type: none; /*去除默认列表样式*/
float: left; /*左浮动*/
width: 50px; /*设置宽度*/
height: 50px; /*设置高度*/
text-align: center; /*设置文本水平居中*/
line-height: 50px; /*单行文本垂直居中*/
border-radius: 50%; /*设置边框圆角*/
box-shadow: 2px 2px 2px #8C7CA1; /*设置边框阴影*/
background-color: skyblue; /*设置li元素背景色*/
margin-right: 8px; /*设置li元素间右外边距*/
}
#item1 { /*ID选择器*/
background-color: black;
}
.item2 { /*类选择器*/
background-color: cyan;
}
ul li[data-end] { /*属性选择器 属性名*/
background-color: darkred;
}
ul li[data-c="green"] { /*属性选择器 属性值*/
background-color: green;
}
ul li[class^="meat"] { /*属性选择器 以指定属性值开头*/
background-color: darkblue;
}
ul li[class$="bread"] { /*属性选择器 以指定属性值结束*/
background-color: red;
}
ul li[class*="il"] { /*属性选择器 属性值包含指定字符串*/
background-color: coral;
}
body ul li { /*后代选择器*/
border-color: purple;
}
ul > li[class*="ilk"] { /*直接子代选择器*/
border: 2px dashed black;
}
ul li[class$="bread"] ~ * { /*相邻选择器 选择当前元素之后的同级元素不包当前元素*/
color: magenta;
}
ul li[class$="bread"] + li { /*相邻兄弟选择器*/
font-family: 黑体;
}
h2,p { /*群组选择器*/
color: darkolivegreen;
margin-left: 20px;
margin-top: 20px;
}
/* 伪类选择器: a链接 */
a{
font-family: 微软雅黑;
font-size: 1.8rem;
}
a:link { /*访问前*/
color: pink;
}
a:visited { /*访问后*/
color: brown;
}
a:focus { /*获取焦点时*/
color: blue;
}
a:hover { /*鼠标悬停时*/
color: red;
}
a:active { /*鼠标点击时*/
color: gold;
}
/*伪类选择器: 上下位置关系*/
ul li:first-child { /*选择集合中第一个元素*/
border: 2px dashed red;
}
ul li:last-child { /*选择集合中最后一个元素*/
color: lightcyan;
}
ul li:nth-child(4) { /*按索引选择指定元素，从1开始计数*/
background-color: greenyellow;
}
ul li:nth-child(odd) { /*选择所有奇数元素(偶数:2n|even,奇数:2n+1|odd)*/
background-color: lightskyblue;
}
ol:only-child { /*选择只有一个子元素的元素*/
background-color: navy;
}
ul li:nth-last-child(3) { /*选择倒数第3个元素*/
background-color: tomato;
}
ol li:nth-of-type(2) { /*选择指定分级的第二个li子元素*/
background-color: springgreen;
}
:empty { /*选择内容为空的元素*/
width: 217px;
height: 364px;
background-color: olive;
}
:empty:after { /*在空元素后加入子块*/
content: '空元素的子块';
}
:empty:before { /*默认插入的元素为行内元素，不支持宽高设置，可通过插入背景图片来设置宽高*/
content: url("http://www.php.cn/static/images/course_index4.jpg");
}
</style>
</head>
<body>
<ul>
<li data-c="green">6</li>
<li>7</li>
<li id="item1">8</li>
<li>9</li>
<li class="meat milk">10</li>
<li class="milk bread">11</li>
<li class="item2">12</li>
<li class="ilk">13</li>
<li class="il">14</li>
<li data-end>15</li>
</ul>
<h2>这是一个好的开始</h2>
<p>封装细节，提高安全性和可控性,经常在全局作用域中被用于函数外部，从而限制向全局作用域中添加过多的变量和函数。 <br>
在全局作用域中使用块级作用域可以减少闭包占用内存的问题，因为没有指向匿名函数的引用，只要函数执行完毕，就可以立即销毁其作用域链了。</p>
<ol>
<li>列表项only</li>
</ol>
<ol>
<li>列表项1</li>
<span>行内元素1</span>
<p>段落1</p>
</ol>
<ol>
<li>列表项1</li>
<li>列表项2</li>
</ol>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
<div></div>
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例以下为手抄部分
