1.基本选择器优先级
id>class>tagname(标签选择器)>*(通配符选择器)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本选择器的优先级</title><style type="text/css">#id3{color:yellow;}h3{color:red!important;}#id3{color:black;}.green{color:green;}</style>
</head>
<body><h3 class="green" id="id3">同时应用三种选择器所定义样式的h3标题文字</h3>
</body>
</html>
效果图
注:!important提高样式表的优先级(最高)
2.多元素组合选择器的优先级
控制对象的精准度>id个数>class个数>tagname个数>后定义覆盖前定义
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本选择器的优先级</title><style type="text/css">*{margin:0;padding:0;}#wrap-1{width:600px;margin:20px auto;}li{list-style:none;}a{text-decoration:none;}#wrap-1 ul.list p #text-1{ /*两个id,一个class,两个tagname*/color:blue;}#wrap-1 .list #box-1 span{ /* 两个id,一个class,一个tagname*/color:red;font-size:30px;}span{color:green;} /*一个tagname*/</style>
</head>
<body><div class="wrap" id="wrap-1"><ul class="list"><li id="list-1"><p class="box" id="box-1"><span class="text" id="text-1">多元素组合选择器所影响最内层的文字</span></p></li></ul></div>
</body>
</html>
效果图
3.css书写顺序
(1)显示属性:display,list-style,position,float,clear
(2)自身属性:width,height,margin,padding,border,background
(3)字体和文本属性:font,color,text-align,vertical-align,text-indent
(4)css3中新增属性:content,box-shadow,border-radius,transform