前端之HTML、CSS（四）
CSS
CSS三大特性
层叠性：多种样式的叠加，一个属性通过两个选择器设置在同一个元素上，后一个样式会把前一个样式层叠（覆盖）。层叠性的两种情况：第一种样式冲突时，后样式覆盖前样式；第二种样式不冲突时，前后样式互补共同作用同一元素。（冲突：样式属性一样）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 ????<meta charset="utf-8"> 5 ????<title>层叠性-测试</title> 6 ????<style type="text/css"> 7 ????????p { 8 ????????????color: red; 9 ????????????font-size: 20px;10 ????????}11 ????????p {12 ????????????color: blue;13 ????????}14 ????</style>15 </head>16 <body>17 ????<p>层叠性</p>18 </body>19 </html>继承性：HTML“晚辈”标签会继承“长辈”标签的某些样式属性。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 ????<meta charset="utf-8"> 5 ????<title>继承性-测试</title> 6 ????<style type="text/css"> 7 ????????div { 8 ????????????color: red; 9 ????????}10 ????</style>11 </head>12 <body>13 ????<div>14 ????????<p>继<span>承</span>性</p>15 ????????<p><a href="#">继承性</a></p>16 ????</div>17 </body>18 </html>注意：不是所有属性都可以继承，一般以text-、font-、line-开头的属性以及color属性可以继承，某些标签也同样不会继承属性。
优先级：CSS三种写入方式：行内样式，内部样式表、外部样式表的优先级关系：行内样式>内部样式表>外部样式表，即一个HTML文档中同时存在三种CSS样式写入，首选行内样式表加载。CSS选择器的三种基本类型：ID选择器、类选择器、标签选择器的优先级关系：ID选择器>类选择器>标签选择器，即三种选择器为同一元素标签设置同一种样式属性，首选ID选择器设置的样式属性。设定ID选择器权值为100，类选择器（伪类选择器）权值为10，标签选择器权值为1，复合选择器中使用的基本选择器组合之间使用加法获取总的权值，权值越高，样式属性选择越优先。如.nav p { }权值为10 + 1 = 11。此外，通配符选择器* { }和继承权值为0，权值相同按照层叠性加载，
1 <!DOCTYPE html> 2 <html> 3 <head> 4 ????<meta charset="utf-8"> 5 ????<title>优先级-测试</title> 6 ????<style type="text/css"> 7 ????????#pid { 8 ????????????color: blue; ?/*ID选择器权值为100*/ 9 ????????}10 ????????.priority {11 ????????????color: green; ?/*类选择器权值为10*/12 ????????}13 ????????p {14 ????????????color: red; ?/*标签选择器权值为1*/15 ????????}16 ????</style>17 </head>18 <body>19 ????<p class="priority", id="pid">优先级</p>20 </body>21 </html> 1 <!DOCTYPE html> 2 <html> 3 <head> 4 ????<meta charset="utf-8"> 5 ????<title>优先级-测试</title> 6 ????<style type="text/css"> 7 ????????.complement p { ?8 ????????????color: green; ?/*权值为10 + 1 = 11*/ 9 ????????}10 ????????div p {11 ????????????color: red; ?/*权值为1 + 1 = 2*/12 ????????}13 ????</style>14 </head>15 <body>16 ????<div class="complement">17 ????????<p>复合选择器权值测试</p>18 ????</div>19 </body>20 </html>注意：可以在样式属性的属性值后追加！important为某一类型选择器增加权值，增加值为+∞，即追加！impotant的选择器一定优先加载。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 ????<meta charset="utf-8"> 5 ????<title>优先级-测试</title> 6 ????<style type="text/css"> 7 ????????#pid { 8 ????????????color: blue; ?/*ID选择器权值为100*/ 9 ????????}10 ????????.priority {11 ????????????color: green; ?/*类选择器权值为10*/12 ????????}13 ????????p {14 ????????????color: red!important; ?/*标签选择器权值为1*/15 ????????}16 ????</style>17 </head>18 <body>19 ????<p class="priority", id="pid">优先级</p>20 </body>21 </html>注意：继承权值为0
1 <!DOCTYPE html> 2 <html> 3 <head> 4 ????<meta charset="utf-8"> 5 ????<title>优先级-测试</title> 6 ????<style type="text/css"> 7 ????????.complement { ?8 ????????????color: green; ?/*权值为10*/ 9 ????????}10 ????????p {11 ????????????color: red; ?/*权值为1*/12 ????????}13 ????</style>14 </head>15 <body>16 ????<div class="complement">17 ????????<!-- 父标签权值为10，子标签权值为1，然而继承权值为0，故字体颜色为红色 -->18 ????????<p>复合选择器权值测试</p>19 ????</div>20 </body>21 </html>权重练习测试
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> ???<head> ???????<meta http-equiv="content-type" content="text/html;charset=utf-8" /> ???????<meta name="keywords" content="关键词1,关键词2,关键词3" /> ???????<meta name="description" content="对网站的描述" /> ???????<title>第1题</title> ???????<style type="text/css"> ???????????#father #son{ ?????????????????color:blue; ???????????} ???????????#father p.c2{ ???????????????color:black; ???????????} ???????????div.c1 p.c2{ ???????????????color:red; ???????????} ???????????#father{ ???????????????color:green !important; ?/* 继承的权重为0 */ ???????????} ???????</style> ???</head> ???<body> ???????<div id="father" class="c1"> ???????????<p id="son" class="c2"> ???????????????试问这行字体是什么颜色的？ ???????????</p> ???????</div> ???</body></html><!-- 答案：blue --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> ???<head> ???????<meta http-equiv="content-type" content="text/html;charset=utf-8" /> ???????<meta name="keywords" content="关键词1,关键词2,关键词3" /> ???????<meta name="description" content="对网站的描述" /> ???????<title>第2题</title> ???????<style type="text/css"> ???????????#father{ ???????????????color:red;/* 继承的权重为0 */ ???????????} ???????????p{ ???????????????color:blue; ?????????????} ???????</style> ???</head> ???<body> ???????<div id="father"> ???????????<p>试问这行字体是什么颜色的？</p> ???????</div> ???</body></html><!-- 答案：blue --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> ???<head> ???????<meta http-equiv="content-type" content="text/html;charset=utf-8" /> ???????<meta name="keywords" content="关键词1,关键词2,关键词3" /> ???????<meta name="description" content="对网站的描述" /> ???????<title>第3题</title> ???????<style type="text/css"> ???????????div p{ ??????????????????color:red; ???????????} ???????????#father{ ???????????????color:red; ???????????} ???????????p.c2{ ???????????????????color:blue; ???????????} ???????</style> ???</head> ???<body> ???????<div id="father" class="c1"> ???????????<p class="c2"> ???????????????试问这行字体是什么颜色的？ ???????????</p> ???????</div> ???</body></html><!-- 答案：blue --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> ???<head> ???????<meta http-equiv="content-type" content="text/html;charset=utf-8" /> ???????<meta name="keywords" content="关键词1,关键词2,关键词3" /> ???????<meta name="description" content="对网站的描述" /> ???????<title>第4题</title> ???????<style type="text/css"> ???????????div div{ ????????????????color:blue; ???????????} ???????????div{ ???????????????color:red; ???????????} ???????</style> ???</head> ???<body> ???????<div> ???????????<div> ???????????????<div> ???????????????????试问这行字体是什么颜色的？ ???????????????</div> ???????????</div> ???????</div> ???</body></html><!-- 答案：blue --><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> ???<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> ???<title>第5题</title> ???<style type="text/css"> ???????div div div div div div div div div div div div{ ?????????????color:red; ???????} ???????.me{ ????????????color:blue; ???????} ???</style></head><body> ???<div> ???????<div> ???????????<div> ???????????????<div> ???????????????????<div> ???????????????????????<div> ???????????????????????????<div> ???????????????????????????????<div> ???????????????????????????????????<div> ???????????????????????????????????????<div> ???????????????????????????????????????????<div> ???????????????????????????????????????????????<div class="me">试问这行文字是什么颜色的</div> ???????????????????????????????????????????</div> ???????????????????????????????????????</div> ???????????????????????????????????</div> ???????????????????????????????</div> ???????????????????????????</div> ???????????????????????</div> ???????????????????</div> ???????????????</div> ???????????</div> ???????</div> ???</div></body></html><!-- 答案：blue --><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> ???<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> ???<title>第6题</title> ???<style type="text/css"> ???????.c1 .c2 div{ ?????????????color: blue; ???????} ???????div #box3{ ???????????color:green; ???????} ???????#box1 div{ ???????????color:yellow; ???????} ???</style></head><body> ???<div id="box1" class="c1"> ???????<div id="box2" class="c2"> ???????????<div id="box3" class="c3"> ???????????????文字 ???????????</div> ???????</div> ???</div></body></html><!-- 答案：yellow -->前端之HTML、CSS（四）
原文地址：https://www.cnblogs.com/snow-lanuage/p/10393944.html