实例
<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
<meta charset="utf-8">
<meta name="Author" content="MrTao,80238980@qq.com">
<title>CSS常用选择器</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
*{
margin: 0px;
padding: 0px;
/*清楚浏览器的默认边距样式*/
}
li{
list-style: none;
}
h1{
width: 1500px;
margin: 0 auto;
font-size: 40px;
background-color: #38b48b;
color: #F5F5F5;
text-align: center;
}
/*标签选择器：标签名h1+{}*/
ul{
width: 1500px;
height: 200px;
margin:0px auto;
}
ul li{
list-style: none;
width: 200px;
height: 50px;
font-size: 25px;
display: inline-block;
text-align: center;
line-height: 50px;
margin-left: 10px;
}
/*层级选择器又叫后代选择器：选择ul的后代子元素来设置元素样式*/
.box1{
width: 200px;
height: 120px;
border: black 3px solid;
border-radius: 10px 10px;
}
/*类选择器：通过为元素设置class来赋予元素样式效果*/
#box2{
width: 200px;
height: 120px;
border: red 3px solid;
border-radius: 10px 10px;
}
.box3{
width: 200px;
height: 120px;
border: blue 3px solid;
border-radius: 10px 10px;
}
/*ID选择器只能在页面出现一次，通过为元素设置ID来实现样式效果*/
#box2 +li{
background-color: #ee7800;
}
ul :first-child{
background-color: #ee7800;
}
ul :last-child{
background-color: bisque;
}
ul :nth-child(3){
background-color: yellow;
}
ul :nth-last-child(2){
background-color: cadetblue;
}
/*伪类：子元素选择器*/
ul li:first-of-type{
color: white;
}
ul li:last-of-type{
color: red;
}
ul li:nth-of-type(2){
background-color: green;
color: blueviolet;
}
/*伪类：类型选择器*/
.box7{
width: 1500px;
height: 200px;
margin: 0 auto;
background-color: #cccccc;
font-size: 30px;
}
.box7 :nth-child(2){
background-color: #ee7800;
}
/*同时选中box8盒子下第二个元素*/
p:nth-of-type(2){
background-color: #F5F5F5;
}
/*选中有两个p元素的第二个p元素*/
.box8:hover{
color:white;
}
</style>
</head>
<body>
<div class="box">
<h1>CSS常用选择器</h1>
<ul>
<li>
九阴真经2
<img class="box1" src="https://i.17173cdn.com/2fhnvk/YWxqaGBf/cms3/IiisgHbngBCmigl.jpg!a-3-240x.jpg">
</li>
<li>
绝地求生
<img class="box1" src="https://i.17173cdn.com/2fhnvk/YWxqaGBf/cms3/kCQNambmvqakhsF.jpg!a-3-240x.jpg">
</li>
<li>
MU：传奇
<img class="box3" src="https://i.17173cdn.com/0561y4/YWxqaGBf/gamebase/game-cover-horizontal/RgKilTbmCgphias.jpg!a-3-240x.jpg">
</li>
<li>
黑色沙漠
<img class="box1" src="https://i.17173cdn.com/2fhnvk/YWxqaGBf/cms3/oSPKvkbmvqakhsD.jpg!a-3-240x.jpg">
</li>
<li>
堡垒之夜
<img class="box1" src="https://i.17173cdn.com/2fhnvk/YWxqaGBf/cms3/WqkFepbmvqakhrx.jpg!a-3-240x.jpg">
</li>
<li>
失落的方舟
<img class="box1" src="https://i.17173cdn.com/2fhnvk/YWxqaGBf/cms3/dKoUodblhferEdE.jpg!a-3-240x.jpg">
</li>
<li>
战意
<img id="box2" src="https://i.17173cdn.com/2fhnvk/YWxqaGBf/cms3/jGlFggblioFaxiC.jpg!a-3-240x.jpg">
</li>
<hr>
</ul>
<h1>PHP中文网老师</h1>
<div class="box7">
<p>地下城与勇士</p>
<li>梦幻西游</li>
<p>流放之路</p>
<li>英雄联盟</li>
</div>
<div class="box7">
<p>炉石传说</p>
<li>魔兽世界</li>
<p>剑网三</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
通过昨晚的学习跟今天的复习，更深的了解到CSS选择器在前端的重大作用！
有很多地方还要多练习！
在实际页面布置中更要多练习！