css:层叠样式表；用来修饰HTML，核心是层叠。
2：嵌入式：是将CSS样式集中写在网页的<head></head>标签的<style></style>标签中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>引用CSS</title> <!-- 第一种:外部样式 -->
<link rel="stylesheet" href="style.css">
<!-- 第二种:嵌入式 -->
<style>
p {
color: pink;
}
</style>
</head>
<body>
<!-- 第三种:内联式 -->
<p style="color: red">内联式</p>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> /*标签选择器*/ /*所有标签是div的都变了*/ div{ font-family: 华文彩云; } /*id选择器*/ /*给id=‘c2‘的设置样式，id一般不常用。因为id是不能重复的。*/ #c2{ background-color: blueviolet; font-size: larger; } /*calss类选择器*/ .a1{ color: red; } </style> <body> <div id="c1"> <div id="c2"> <p>hello haiyan</p> <div class="a1">大家好！</div> </div> <p>hi haiyan</p> </div> <span>今天很开心</span> <p>p2</p> <div class="a1"> <p class="a2">你好啊</p> <h1>我是h1标签</h1> </div> </body> </html>
二：高级选择器
1：* 通配符选择器
* {margin:0;padding:0;}
2：群组（并集）选择器； 同时选中多个元素，每个元素中间使用逗号分隔
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p,div { color:red; }
</style>
</head>
<body>
<p class="op">hello,world </p>
<div> change the world! </div>
</body>
</html>
上面的代码中，在选中p标签的同时还选中了div标签。
3：交集选择器；通过交集这样的概念来选中具体的某一个元素
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p.ap { color:red; }
</style>
</head>
<body>
<p class="ap"> hello,world </p>
<p> pppppppp </p>
</body>
</html>
在上面的案例中，选择器要找的是p标签，并且这个标签的类名是ap。
4：后代选择器；可以通过后代选择器选中所有的后代元素。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div p { color:red; }
</style>
</head>
<body>
<div>
<div>
<div>
<div>
<p>hello,world</p>
</div>
</div>
</div>
</div>
</body>
</html>
5：子元素选择器：? 可以通过子元素选择器>来选中子元素。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div > p { color:red; }
</style>
</head>
<body>
<div>
<p> hello,world </p>
</div>
</body>
</html>
原文：https://www.cnblogs.com/zl-light/p/11405158.html