HTML5学习_day01(4)--css内部样式之选择器

来源：互联网发布：数据交换规范编辑：程序博客网时间：2024/05/22 03:31

选择器常用三种类型：

1.标签选择器

语法：

标签名{

属性1:属性值1;

属性2:属性值2;

}

2.class选择器

语法：

.class名{

属性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.id名称在当前文件中只有一个，不能重复。

2.class名可以重复

3.所有标签他都有id和class属性

4.id名在标签中只有一个，但class名可以写多个，且多个之前用空格隔开

如:<div id="id1"></div>

5.优先级:id选择器>class选择器>标签选择器

6.优先级权重： id:100 class:10 标签:1

0 0