下面介绍css里的选择器
啥为选择器?看下面就明白
<html> <head> <style type="text/css"> div{ border:solid 1px; width:100px; height:100px; background:red } </style> <head> <body> <div>这是一个div</div> </body> </html>
其中大括号前的div就是html标签选择器,意思就是说html里所有div标签都采用此样式
<html> <head> <style type="text/css"> div{ border:solid 1px; width:100px; height:100px; background:red } </style> <head> <body> <div>这是一个div</div> <div></div> <div></div> <div></div> </body> </html>
这里多加几个div你会发现都是同一样式
这种标签选择器只能是html标签才能生效
下面介绍ID选择器
<html> <head> <style type="text/css"> #a{ border:solid 1px; width:100px; height:100px; background:red } </style> </head> <body> <div id="a">这是一个div</div> </body> </html>
这玩意一看就明白,用id选择器前面加#
然后是类选择器
<html> <head> <style type="text/css"> .a{ border:solid 1px; width:100px; height:100px; background:red } </style> <head> <body> <div class="a">这是一个div</div> </body> </html>
也是一看就明白 类选择器前面加.
下面说说它们的区别
id顾名思义就是唯一标识,一个标签只能用一次,他的优先级要比类选择器要高
而类选择器在一个标签里可以用多个
<html> <head> <style type="text/css"> #a{ border:solid 1px; width:100px; height:100px; background:red } </style> <head> <body> <div id="a">这是一个div</div> <div id="a">这是一个div</div> </body> </html>
和
<html> <head> <style type="text/css"> .a{ border:solid 1px; width:100px; height:100px; background:red } </style> <head> <body> <div class="a">这是一个div</div> <div class="a">这是一个div</div> </body> </html>
是一样的
另外说一句,css样式块,也就是这个
.a{ border:solid 1px; width:100px; height:100px; background:red }
最后一个可以省略分号,但最好加上
<html> <head> <style type="text/css"> #a{ background:red } .b{ border:solid 1px; width:100px; height:100px; background:green; } </style> <head> <body> <div id="a" class="b">这是一个div</div> </body> </html>
由于id选择器优先级高,它会采用id选择器的背景颜色
优先级比较
id选择器》类选择器》标签选择器
但是类选择器可以在一个标签使用多个,这是id选择器做不到的
<html> <head> <style type="text/css"> .a{ width:100px; height:100px; } .b{ border:solid 1px; background:red; } </style> <head> <body> <div class="a b" >这是一个div</div> </body> </html>
class="a b" 注意要空格
59bb71d76f7389d5030d6af565de68f4这是一个div16b28748ea4df4d9c2150843fecfba68 这样是无效的
如果两个类选择器内容冲突怎么办?
<html> <head> <style type="text/css"> .a{ width:100px; height:100px; border:solid 1px; background:red; } .b{ width:100px; height:100px; border:solid 1px; background:green; } </style> <head> <body> <div class="a b" >这是一个div</div> </body> </html>
注意就背景颜色不一样
它会采用样式表里最靠后的,也就是谁在谁后面就采用那个,答案是绿色
跟这个class="a b" 前后关系无关
以上就是div+css网页布局设计新开端(2)的内容,更多相关内容请关注PHP中文网(www.php.cn)!