css教程内部样式三种选择器

css教程

css教程内部样式之选择器常用三种类型简介

1.class选择器
语法:
.class名{
属性1:属性值1;
属性2:属性值2;
}

2.标签选择器
语法:
标签名{
属性1:属性值1;
属性2:属性值2;
}

3.id选择器
语法:
#id名{
属性1:属性值1;
属性2:属性值2;
}

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>选择器</title>
<style type=”text/css”>
div{
height: 100px;
width: 200px; /*这里代表着当前页面所有div标签默认为这个样式*/
background: red;
}
p{
height: 100px;
width: 200px; /*这里代表着当前页面所有p标签默认为这个样式*/
background: blue;
}
.div2{
height: 100px;
width: 200px; /*当一个标签内class的值为 div2 时该标签使用这样式(如下面例子div2标签)*/
background: gold;
}
#div3{
height: 100px;
width: 200px; /*当一个标签内id的值为 div3 时该标签使用这样式(如下面例子div3标签)*/
background: greenyellow;
}
</style>
</head>
<body>
<div>我是div标签</div>
红色区域代码:<xmp><div>我是div标签</div></xmp>
<p>我是p标签</p>
蓝色区域代码:<xmp><p>我是p标签</p></xmp>
<div class=”div2″>我是div2标签</div>
黄色区域代码:<xmp><div class=”div2″>我是div2标签</div></xmp>
<div id=”div3″>我是div3标签</div>
绿色区域代码:<xmp><div id=”div3″>我是div3标签</div></xmp>
</body>
</html>

可以把代码复制到html文件里测试

注意:
1.class名可以重复
2.id名称在当前文件中只有一个,不能重复。
3.优先级权重: id:100 class:10 标签:1
4.优先级:id选择器>class选择器>标签选择器
5.所有标签他都有id和class属性
6.id名在标签中只有一个,但class名可以写多个,且多个之前用空格隔开
如:<div id=”id1″></div>
<div class=”class1 class2 class3″></div>
css教程内部样式之选择器常用三种类型解析

成为第一个发表评论的人

发表评论

您的电子邮件地址不会被公开.


*