<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器 所有span标签的颜色都是红色*/
span {color: orange}
/*ID 选择器*/
#s1 {font-size :36px}
/*类选择器*/
.c1 {color: blue}
/* 通用选择器*/
* {color : deeppink}
</style>
</head>
<body>
<span id ="s1">span</span>
<div class="c1">div
<p>p
<span>span</span>
</p>
</div>
<div class ="c1">div</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后代选择器*/
div span{color:blue}
/*儿子选择器*/
div>span {color:red}
/*毗邻选择器*/
div+span {color:blue}
/*弟弟选择器*/
div~span {color:deeppink}
</style>
</head>
<body>
<span>我是div上面的span</span>
<div>
<span>我是div里面的第一个span</span>
<p>我是div里面的第一个p
<span>我是div里面第一个p里面的第一个span</span>
</p>
<span>我是div里面的第二个span</span>
</div>
<span>我是div下面的第一个span</span>
<span>我是div下面的第二个span</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[xxx] {color:red}
[xxx =‘1‘] {color:blue}
[xxx =‘2‘]{color:forestgreen}
p[xxx=‘2‘]{color:pink}
</style>
</head>
<body>
<span xxx="2">span</span>
<p xxx>我只有属性名</p>
<p xxx =‘1‘>我有属性名和属性值并且值为1</p>
<p xxx ="2">我有属性名和属性值并且值为2</p>
</body>
</html>
分组与嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*div ,p,span {color:red}*/
div p span {color:blue}
</style>
</head>
<body>
<div>div
<p>p
<span>span</span></p></div>
<p>p</p>
<span>span</span>
</body>
</html>
伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link {
color :red;
}
a:hover {
color:blue;
}
a:active{
color:yellow;
}
a:visited{
color:green;
}
input:focus{
background-color: red;
}
</style>
</head>
<body>
<a href="http://www.souhu.com">搜狐</a>
<a href="http://www.xiaohuar.com">校花</a>
<a href="https://www.sogo.com">搜狗</a>
<input type="text">
</body>
</html>
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:first-letter{
color: red;
font-size: 48px;
}
p:before {
content:‘*‘;
color:red;
}
p:after{
content: "?";
color:deeppink;
font-size: 48px;
}
</style>
</head>
<body>
<p>继承是css的一个主要特征，他是一个依赖祖先-后代的关系的</p>
<p>继承是css的一个主要特征，他是一个依赖祖先-后代的关系的</p>
<p>继承是css的一个主要特征，他是一个依赖祖先-后代的关系的</p>
<p>继承是css的一个主要特征，他是一个依赖祖先-后代的关系的</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*#p1 {color :blue;}*/
.c1 {color:red;}
/*p {color:blue}*/
</style>
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<p id="p1" class="c1">p</p>
</body>
</html>
选择器优先级
选择器相同的情况下,就近原则
行内样式>id选择器>类选择器>元素选择器
原文：https://www.cnblogs.com/guanlei/p/10946606.html