Rumah >hujung hadapan web >tutorial css >div+css网页布局设计新开端（2）
div+css网页布局设计新开端（2）
- 黄舟asal
- 2016-12-29 14:13:231329semak imbas
下面介绍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）！
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：div+css网页布局设计新开端（1）Artikel seterusnya：div+css网页布局设计新开端（3）