实例
/*标签选择器*/
ul{
margin-top: 0px;
margin-bottom: 0px;
padding-left: 0px;
/*border: 1px solid red;*/
}
/*后代选择器*/
ul>li{
list-style: none;
width: 40px;
height: 40px;
background-color: wheat;
border: 1px solid black;
/*居中*/
text-align: center;
/*行垂直居中*/
line-height: 40px;
/*圆形*/
border-radius: 50%;
/*块元素：可以设置宽高
默认独占一行*/
display: inline-block;
margin-left: 5px;
/*增加阴影*/
box-shadow: 2px 2px 2px #888;
}
/*ID选择器*/
#bg-blue{
/*background-color: #0c7df5;*/
}
/*样式选择器*/
.bg-green{
/*background-color: #00cb6f;*/
}
li[id="bg-blue"]{
/*border: red;*/
}
/*群组选择器*/
#bg-blue,.bg-green{
/*border: #2d88f1;*/
}
/*相邻选择器或同级选择器*/
/*#bg-blue +.bg-green{*/
/* background-color:yellow;*/
/*}*/
/*#bg-blue ~*{*/
/* background-color:yellow;*/
/*}*/
/*伪类选择器：子元素选择器*/
ul :first-child{
/*选中第一个子元素*/
/* background-color: coral;*/
}
/*选择最后一个*/
ul :last-child{
/*background-color: coral;*/
}
/*选择第六个*/
ul :nth-child(6){
/*background-color: coral;*/
}
/*2n-1 基数也可以用 odd*/
ul :nth-child(2n-1){
/*background-color: coral;*/
}
/*2n 偶数 也可以even*/
ul :nth-child(2n){
/*background-color: #3da70d;*/
}
/*倒数*/
ul :nth-last-child(3){
/*background-color:red;*/
}
/*伪类的类型选择器*/
ul li:first-of-type{
/*background-color:coral;*/
}
ul li:last-of-type{
/*background-color:coral;*/
}
ul li:nth-of-type(5){
/*background-color: #2d88f1;*/
}
/*:nth-child(m):关注位置*/
/*:nth-of-type(n):除了关注位置，还需要关注类型匹配*/
/*li:nth-child(m):如果这样写，那么跟li:nth-of-type(n)功能几乎一样*/
div:nth-child(2){
/*background-color: green;*/
}
div:first-of-type :nth-child(3){
/*background-color: green;*/
}
p:nth-of-type(2){
/*background: gainsboro;*/
}
form:enabled{
background-color: green;
}
form{
width: 350px;
height: 280px;
border: black;
text-align: center;
border-radius: 5px;
box-shadow: 2px 2px 4px black;
padding-top: 15px;
background-color:#888888 ;
margin-top: 200px;
}
button{
width: 60px;
height: 30px;
background-color: #888888;
border: none;
color: black;
padding-top: 5px;
}
button:hover{
width: 60px;
height: 30px;
background-color: black;
border: none;
color: white;
border-radius: 6px;
}
.save{
margin-left: 15px;
}
.line{
border:1px solid beige;
background-color: #9F9F9F;
width: 400px;
height: 20px;
}
.cf:hover{
background-color: #3da70d;
padding: 20px;
}
.cf2:hover{
background-color: green;
/*padding: 20px;*/
width: 5px;
height: 5px;
}
.cf3:hover{
background-color: #3da70d;
padding-right: 10px;
}/*标签选择器*/
ul{
margin-top: 0px;
margin-bottom: 0px;
padding-left: 0px;
/*border: 1px solid red;*/
}
/*后代选择器*/
ul>li{
list-style: none;
width: 40px;
height: 40px;
background-color: wheat;
border: 1px solid black;
/*居中*/
text-align: center;
/*行垂直居中*/
line-height: 40px;
/*圆形*/
border-radius: 50%;
/*块元素：可以设置宽高
默认独占一行*/
display: inline-block;
margin-left: 5px;
/*增加阴影*/
box-shadow: 2px 2px 2px #888;
}
/*ID选择器*/
#bg-blue{
/*background-color: #0c7df5;*/
}
/*样式选择器*/
.bg-green{
/*background-color: #00cb6f;*/
}
li[id="bg-blue"]{
/*border: red;*/
}
/*群组选择器*/
#bg-blue,.bg-green{
/*border: #2d88f1;*/
}
/*相邻选择器或同级选择器*/
/*#bg-blue +.bg-green{*/
/* background-color:yellow;*/
/*}*/
/*#bg-blue ~*{*/
/* background-color:yellow;*/
/*}*/
/*伪类选择器：子元素选择器*/
ul :first-child{
/*选中第一个子元素*/
/* background-color: coral;*/
}
/*选择最后一个*/
ul :last-child{
/*background-color: coral;*/
}
/*选择第六个*/
ul :nth-child(6){
/*background-color: coral;*/
}
/*2n-1 基数也可以用 odd*/
ul :nth-child(2n-1){
/*background-color: coral;*/
}
/*2n 偶数 也可以even*/
ul :nth-child(2n){
/*background-color: #3da70d;*/
}
/*倒数*/
ul :nth-last-child(3){
/*background-color:red;*/
}
/*伪类的类型选择器*/
ul li:first-of-type{
/*background-color:coral;*/
}
ul li:last-of-type{
/*background-color:coral;*/
}
ul li:nth-of-type(5){
/*background-color: #2d88f1;*/
}
/*:nth-child(m):关注位置*/
/*:nth-of-type(n):除了关注位置，还需要关注类型匹配*/
/*li:nth-child(m):如果这样写，那么跟li:nth-of-type(n)功能几乎一样*/
div:nth-child(2){
/*background-color: green;*/
}
div:first-of-type :nth-child(3){
/*background-color: green;*/
}
p:nth-of-type(2){
/*background: gainsboro;*/
}
form:enabled{
background-color: green;
}
form{
width: 350px;
height: 280px;
border: black;
text-align: center;
border-radius: 5px;
box-shadow: 2px 2px 4px black;
padding-top: 15px;
background-color:#888888 ;
margin-top: 200px;
}
button{
width: 60px;
height: 30px;
background-color: #888888;
border: none;
color: black;
padding-top: 5px;
}
button:hover{
width: 60px;
height: 30px;
background-color: black;
border: none;
color: white;
border-radius: 6px;
}
.save{
margin-left: 15px;
}
.line{
border:1px solid beige;
background-color: #9F9F9F;
width: 400px;
height: 20px;
}
.cf:hover{
background-color: #3da70d;
padding: 20px;
}
.cf2:hover{
background-color: green;
/*padding: 20px;*/
width: 5px;
height: 5px;
}
.cf3:hover{
background-color: #3da70d;
padding-right: 10px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style1.css"> <title>Title</title> </head> <body> <ul> <li class="bg-green">1</li> <li id="bg-blue">2</li> <li class="cf">3</li> <li>4</li> <li class="bg-green">5</li> <li class="cf3">6</li> <li>7</li> <li class="cf">8</li> <li class="cf2">9</li> <li>10</li> </ul> <!--<div>--> <!-- <p>猪头</p>--> <!-- <li>朱老师</li>--> <!-- <p>西门庆</p>--> <!--</div>--> <!--<div>--> <!-- <p>欧克</p>--> <!-- <li>金莲妹妹</li>--> <!--</div>--> <form action=""> <h2 class="denglu">登录</h2> <p><label for="email">邮箱：</label> <input type="email" id="email"></p> <p><label for="password">密码：</label> <input type="password" id="password"></p> <p><input type="radio" id="week" name="save" value="7" checked class="save"> <label for="week">保存一周</label></p> <p><input type="radio" id="month" name="save" value="30" class="save"><label for="month">保存一个月</label></p> <p><button>登录</button></p> <!-- <P class="line"></P>--> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
