一.标签选择器
标签{属性：值;}
?<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style type="text/css"> ???/*标签选择器*/ ???div{ ???????font-size:50px; ???????color: green; ???????background-color:yellow; ???????width:300px; ???????height:200px; ???} ???p{ ???????color: black; ???????font-size: 60px; ???} ???</style></head><body> ???<div>标签选择器1</div> ???<div>标签选择器2</div> ???<p>标签选择器3</p> ???<p>标签选择器4</p> ???<div>标签选择器5</div></body></html>二.类选择器
.自定义类名{属性:值; 属性:值；}
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style type="text/css"> ???????.box{ ???????????font-size:40px; ???????????color: #ff0000; ???????????width: 400px; ???????????height: 300px; ???????????background-color:#999; ???????} ???????.miss{ ???????????text-indent:2em; ???????????/* text-align: right; */ ???????} ???????????</style></head><body> ???<div class="box miss" >类选择器1</div> ???<div>类选择器2</div> ???<p class="box">类选择器3</p> ???<p>类选择器4</p> ???<span class="box">类选择器5</span> ???</body></html>三.id选择器
#自定义名称{属性:值;}
特点： 一个ID选择器在一个页面只能调用一次。如果使用2次或者2次以上，不符合w3c规范，JS调用会出问题。
一个标签只能调用一个ID选择器。
一个标签可以同时调用类选择器和ID选择器。
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style type="text/css"> ???????#box{ ???????????font-size: 40px; ???????????color: rgb(0,0,255); ???????????background-color: rgb(255,255,0); ???????} ???????.box{ ???????????text-indent: 2em; ???????} ???</style></head><body> ???<div id="box" class="box">ID选择器1</div> ???<div id="box">ID选择器2</div> ???<p>ID选择器3</p> ???<p>ID选择器4</p> ???</body></html>四.复合选择器
概念：两个或者两个以上的基础选择器通过不同的方式连接在一起。
(1) 交集选择器
标签+类（ID）选择器{属性：值；}
特点：即要满足使用了某个标签，还要满足使用了类（id）选择器。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">.box{font-size:50px;}div.box{color:blue;}div#miss{width: 400px;height: 300px;background-color:yellow;}</style></head><body><div class="box">交集选择器1</div><p class="box">交集选择器2</p><div id="miss">交集选择器3</div></body></html>
(2)后代选择器
选择器+空格+选择器{属性：值;}
后代选择器首选要满足包含（嵌套）关系。
父集元素在前边，子集元素在后边。
特点：无限制隔代。
只要能代表标签，标签、类选择器、ID选择器自由组合。
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style type="text/css"> ???????/*.box{ ???????????font-size:40px; ???????????color:red; ???????} ????div span{ ????????font-size: 50px; ????}*/ ????/*.box span{ ????????background-color: blue; ????}*/ ???/* .box .miss{ ????????color:red; ????}*/ ????.box span{ ????????color:red; ????} ???</style></head><body> ???<div class="box"> ???????<p><span class="miss">后代选择器1</span> ??????????<span>后代选择器2</span> ???????</p> ???</div> ???<div class="box"><span>后代选择器3</span></div></body></html>(3) 子代选择器
选择器>选择器{属性:值;}
选中直接下一代元素。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Document</title> 6 ????<style type="text/css"> 7 ????div>span{ 8 ????????????color:red; 9 ????????????font-size:40px;10 ????????}11 ????p>span{12 ????????color:green;13 ????????font-size:60px;14 ????}15 16 ????</style>17 </head>18 <body>19 ????<div>20 ????????<p><span>子代选择器1</span></p>21 ????????<span>子代选择器2</span>22 23 ????</div>24 </body>25 </html>(4)并集选择器
选择器+，+选择器+，选择器{属性:值;}
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Document</title> 6 ????<style type="text/css"> 7 ????.box,#miss,span,h1{ 8 ????????font-size:100px; 9 ????????color: #fff;10 ????????background-color: green;11 12 ????}13 ????</style>14 </head>15 <body>16 ????<div class="box">并集选择器1</div>17 ????<p id="miss">并集选择器2</p>18 ????<span>并集选择器3</span>19 ????<h1>并集选择器4</h1>20 </body>21 </html>
css学习(1)
原文地址：https://www.cnblogs.com/Spinoza/p/8589210.html