实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS中常用的选择器</title>
<style>
/*标签选择器:根据标签名称来选择页面元素*/
ul{
margin:0;/*外边距*/
width: 550px; /*设置宽度*/
height: 60px;
border: 1px dashed #666; /*设置边框线*/
padding: 10px 5px; /*设置元素间上下边距是10px,左右边距是5px*/
}
/*子块撑开父级区块*/
ul:after{
content: normal;
display: block;/*转为块级元素*/
clear:both;/*用清除元素侧面的浮动元素*/
}
/*标签选择器 后代选择器*/
ul li{
list-style: none;/*去掉有序列列表小圆点*/
float: left;/*元素向左浮动*/
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 50%;/*元素添加圆角边框*/
margin:5px;
}
/*id选择器 # */
#item1{
background-color: red;
}
/*class类选择器 .*/
.item2{
background-color: aquamarine;
}
/*属性选择器:属性名 [属性]*/
ul li[class]{
background-color: blueviolet;
}
/*属性选择器:属性值*/
ul li[class="item2"]{
background-color: grey;
}
/*属性选择器:以指定属性值开头的元素 [属性^="开头值"]*/
ul li[class^="cat"]{
background-color: brown;
}
/*属性选择器:以指定属性值结尾的元素 [属性$="结尾值"]*/
ul li[class$="cat"]{
background-color: red;
}
/*属性选择器:属性值中包含指定的子串 [属性*="包含值"]*/
ul li[class*="t"]{
background-color: green;
}
/*后代选择器/层次选择器*/
body ul li{
border: 1px solid black;
}
/*子选择器*/
ul>li[class$="pig"]{
background-color: greenyellow;
}
/*相邻选择器*/
ul li[class$="pig"] ~ *{
background-color: black;
color: white;
}
/*相邻兄弟选择器*/
ul li[class$="pig"] + li{
background-color: pink;
color: black;
}
/*群组选择器*/
h1,p{
font-size: 2rem;
font-weight: lighter;
margin: 0;
}
/*伪类选择器:链接*/
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中的第一个元素*/
ul li:first-child{
background-color: #efefef; /*!important;强制*/
}
/*ul li中的最后一个元素*/
ul li:last-child{
background-color: red;
}
/*ul li中的第5个元素,从1开始计算*/
ul li:nth-child(5){
background-color: red;
}
/*ul li 中奇数元素:odd 奇数 也可以是2N-1 ; even 偶数 也可以是2N*/
ul li:nth-child(odd){
background-color: purple;
}
/*伪类选择器:根据子元素的数量*/
/*选中只有一个ol元素的*/
ol :only-child{
background-color: lawngreen;
}
/*选中ol中只有一个li子元素的*/
ol li:only-child{
background-color: lawngreen;
}
/*选中所有 ul li下的倒数第3个元素*/
ul li:nth-last-child(3){
background-color: wheat;
}
/*选择所有 ol li 下的第2个元素*/
ol li:nth-of-type(2){
background-color: lawngreen;
}
/*选中所有空元素*/
:empty{
width: 80px;
height: 80px;
background-color: coral;
}
/*在空元素后面插入内容*/
:empty:after{
content:"在元素后插入内容"
}
:empty:before{
/*通过伪类添加的元素，默认是行内元素，行内元素是不支持宽高设置的，可以设置背景图片的方式来间接处理*/
content: url("http://www.php.cn/static/images/logo.png");
}
</style>
</head>
<body>
<ul>
<li id="item1">1</li>
<li class="item2">2</li>
<li class="cat dog pig">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<hr>
<h1>css选择器大法</h1>
<p>css选择器非常重要，特殊是对于学习js,jquery以及其他前端框架</p>
<hr>
<a href="http://www.php.cn">PHP中文网</a>
<hr>
<!--有序列表-->
<ol>
<li></li>
</ol>
<hr>
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
<hr>
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
</ol>
<div></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
本节课重点：CSS中常用的三种单位、常用的选择器
本节课内容重点较多，具体每一元素选择器的用法，都逐个找个实际开发中的应用场景进行了测试验证，后续因多敲代码加深对选择器的应用；
