实例
<!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>常用选择器</title>
<style>
/*标签选择器*/
ul{
/*内边距为0*/
/*padding:0;*/
/*外边距为0*/
margin:0;
width:500px;
/*边框1像素，虚线 颜色*/
border:1px dashed #39FF1B;
/*上下内边距10像素，左右5像素*/
padding:10px 5px;
}
ul:after{
/*子块撑开父块，:after 选择器在被选元素的内容后面插入内容。
请使用 content 属性来指定要插入的内容。*/
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%;
/*向框添加一个或多个阴影。*/
box-shadow:2px 2px 2px #FFE80E;
/*背景色天蓝色*/
background:skyblue;
/*每个球之间的右外边距*/
margin-right:5px;
}
#item1{
/*id选择器*/
background-color:coral;
}
.item2{
/*类选择器 class选择器*/
background-color:gold;
}
ul li{
/*属性选择器：属性名*/
background-color:deepskyblue;
}
ul li[class="item2"]{
/*属性选择器：指定的属性值*/
background-color:grey;
}
ul li[class^="cat"]{
/*属性选择器：指定属性值开头带有cat的*/
background-color:brown;
}
ul li[class$="pig"]{
/*属性选择器：指定属性值以pig结束的*/
background-color:red;
}
ul li[class*="te"]{
/*属性选择器：指定属性值包含te字符的
看清楚是class的 不是id的 所以item1不变色*/
background-color:black;
color:white;
}
body ul li {
/*层级选择器或者后代选择器*/
border:1px solid #39FF1B;
}
ul>li[class$="pig"]{
/*子选择器中class属性值以pig结尾的结尾*/
background-color:#efefef;
}
ul li[class$="pig"] ~ *{
/*相邻选择器*/
/*选择当前class属性值以pig结尾的元素之后的所有同级元素（不包含当前元素）*/
background-color:#FFE80E;
}
ul li[class$="pig"]+li{
/*相邻兄弟选择器*/
/*选择class属性值以pig结尾的下一个同级元素*/
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:first-child{
background-color:#666666!important;
}
/*选择集合中的最后一个子元素*/
ul li:last-child{
background-color:red;
}
/*按索引指定的元素，注意从1开始计数*/
ul li:nth-child(5){
background-color:red;
}
/*选择所有偶数小球变色*/
/*2n偶数，even偶数，2n+1奇数，odd奇数*/
ul li:nth-child(even){
background-color:purple!important;
}
/*伪类选择器，根据子元素数量*/
/*选择具有唯一子元素的元素*/
ol:only-child{
background-color:lawngreen;
}
/*选择指定类型的唯一子元素*/
ol li:only-of-type{
background-color:lawngreen;
}
/*倒数选择指定位置的元素*/
ul li:nth-last-child(3){
/*倒数第三个小球变色，实际就是第8号球*/
background-color:wheat!important;
}
/*选择指定父级的第二个li子元素*/
ol li:nth-of-type(2){
background-color:wheat;
}
/*x选择页面中内容为空的元素*/
:empty{
width:220px;
height:271px;
background-color:coral;
}
:empty:after{
content:'添加的内容！';
}
:empty:before{
/*默认插入元素为行内元素，不支持宽度设定，如果一定要设定可以通过北京图片实现*/
content:url("images/22222.jpg");
}
</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>
<h1>css选择器</h1>
<p>css选择器超重要的哦，对后面jQuery学习很重要</p>
<a href="http://www.php.cn">一个网站</a>
<ol>
<li>列表1</li>
<p>段落</p>
</ol>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ol>
<!--空区块-->
<div></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
预览图：
手抄代码：
总结：
在样式后加！important优先级为最高
选择器有：标签选择器，id选择器，类选择器，属性选择器，层级选择器/后代选择器，子选择器相邻选择器，相邻兄弟选择器，群组选择器，伪类选择器
css选择器基本语法
1.样式规则: 选择器 + 样式声明;
2.样式声明: {属性: 值}, 多个名值之间用分号(;)分隔;
3.样式规则举例: h3 {color: red; font-size: 3rem};样式的继承 :
1.文档树: DOM结构
2.可继承: 字体,大小,颜色,列表样式,表格样式等
3.非继承: 边框,内外边距元素的单位：px，em，rem
