实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>0816作业-常用选择器</title>
<style>
/*标签选择器*/
ul{
padding:0;
margin: 0;
width: 300px;
border: 1px dashed #555 ;
}
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%; /*border 圆角 % 如果宽度和高度不同,就不能形成圆形*/
box-shadow: 2px 2px 2px #888; /*阴影的颜色,宽度*/
background: skyblue; /*背景色*/
margin: 3px;
}
/*ID选择器 符号: #*/
#id1 {
background: #333;
}
/*类选择器,class选择器 符号: . */
.cls1{
background: gold;
}
/*所有的class*/
ul li[class] {
background-color: chocolate;
}
/*指定类名*/
ul li[class="item5"] {
background-color: blueviolet;
}
/*指定类名 开头: ^ */
ul li[class^="app"]{
background-color: #888888;
}
/*指定类名 结尾: $ */
ul li[class$="app"]{
background-color:#ff3c6d
}
/*指定类名 包含: * */
ul li[class*="f"] {
background-color: chartreuse;
}
/*层级选择器*/
body ul li {
border:1px solid black; /*边线 1px 黑色*/
}
/*子选择器*/
ul > li[class$="3"] {
background-color: slateblue;
}
/*同级:~ 全部:* "app"结尾的元素后,不包括当前元素 */
ul li[class$="app"] ~ * {
background-color: #ff3c6d;
color:white;
}
/*相邻兄弟选择器*/
ul li[class$="pp"] + li {
background-color:pink;
color:greenyellow;
}
/*群组选择器*/
h1, p {
font-size: 2rem;
font-weight: lighter;
color: green;
}
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 li:first-child {
background-color: #efefef!important;
}
ul li:last-child {
background-color: black!important;
}
</style>
</head>
<body>
<lable>姓名:</lable>
<input type="text" placeholder="请输入姓名"> <br>
<lable>密码:</lable>
<input type="password" placeholder="6~20位的密码">
<input type="checkbox" checked>checkbox名字(被选中)
<ul>
<li id="id1">1</li>
<li class="cls1">2</li>
<li class="1 te 3">3</li>
<li class="3app">4</li>
<li class="item5">5</li>
<li class="daf app">6</li>
</ul>
<h1>CSS选择器</h1>
<p>非常重要非常重要非常重要非常重要非常重要</p>
<a href="http://www.baidu.com">百度</a>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
下面是手抄代码:3个元素单位:
