CSS和html如何结合起来——选择符及优先级

 

         1.选择符

		兼容性
统配选择符	*
元素选择符	body
类选择符	.class
id选择符	#id
包含原则符	p strong     (所有后代）
子代选择符	p>strong    (紧跟子代)	lte IE7
相邻选择符	h1+p          (h1后面第一个p元素）	lte IE7
属性选择符	button[class]    (带有class属性的button)	lte IE7
	button[class="switcher"]       (class等于switcher）	lte IE7
	button[class~="switcher"]     (class中包含独立switcher）	lte IE7
	button[class|="switcher"]     (class以switcher开头-连字符分割）	lte IE7
伪类（不同状态）	a:link   a:hover  a:visited  a:active   (:hover 也可用于其它元素）	lte IE7
	input : focus   (当拥有键盘输入焦点时添加样式）	lte IE7
	ul: first-child   (向元素的第一个子元素添加样式）	lte IE7
	p:lang(fl)        (带有lang元素为fl 的p元素添加样式)	lte IE7
伪对象（额外信息）	p:before {content:'XX' }   (在元素之前添加内容)	lte IE7
	p:after {content:'XX' }      (在元素之后添加内容)	lte IE7
	p: first-letter                      (向文本的第一个字母添加样式）	lte IE7
	p: first-line                         (向文本的首行添加特殊样式)	lte IE7
选择符组合，	div#header,div#footer

         2.优先级

 

            开发人员编辑的CSS样式中根据选择符组合来决定优先级别,权重值会累加。

权重值	选择符或属性
最高	！important
1000	HTML标签内style属性 （不建议使用，结构样式分离）
100	ID选择符
10	类选择法、属性选择符
1	标签选择符、伪类及伪对象
0	其它选择符：如通配选择符

元素本身设置的样式高于继承的样式，不用考虑权重值。

 

 

转载于:https://www.cnblogs.com/Peng2014/p/4702929.html