css选择器的分类

您所在的位置:网站首页 css选择器标签选择器 css选择器的分类

css选择器的分类

2023-08-21 03:38| 来源: 网络整理| 查看: 265

选择器的分类 1、通配符选择器 *

权重:0 符号:* 用法:*{}

*{ background:red; } 2、标签选择器

权重:10 命名:标签内通过class=“name” 用法:.name{}

.p2{ background:green; } p1 p2 3、属性选择器

权重:10 用法:

[属性]{}(选中该属性对应的所有标签)[属性=“属性值”],选中对应属性值的标签 [index]{ background:darkorange; } [index="a1"]{ background:darkorchid; } 4、id选择器

权重:100 用法:

在开始标签里添加id=“name”style内使用#name{}进行选择使用

注意:id选择器和class选择器不同,例如在页面中写了一个id=“name1”,那么这个页面中不允许出现第二个相同的,这个是规定。id=“name1” 是唯一的。

#p1{ background:green; } 段落1 5、子选择器

权重:组合的选择器之和 连接符:>(权重0) 含义:父子关系,例如下面的div>h1 代表选中div里面的儿子元素,并且是h1的这一类标签

div>h1{ background:green; } p1 h1 span 6、后代选择器

权重:组合的选择器权重之和 连接符: 空格 含义:后代关系,即无论是儿子还是孙子,只要是后代都可以被选择。

div span{ background:green; } span span 7、分组选择器

权重:组合的选择器之和 连接符:逗号, 含义:将相同的代码提取出来,减少冗余

.box1>p1,.box2{ color:darkorange; width:100px; height:100px; background:green; } p1 box2 8、交集选择器

权重:组合的选择器之和 符号:无 含义:多个选择器组合而成

.box1.current{ background:green; } box1 box1 p1 background:green; } p1 h1 p1 box1 p2 h1 div1 h1 p1 p2 11、伪类选择器

a标签的四种状态,它这四种状态有一定的顺序,在网络上被称为“爱恨原则”。 重点记住:hover 即可,其它几个不兼容。

a{ font-weight: bold; font-size:100px; } /* 默认链接的文字颜色 */ a:link{ color:green; } /* 访问过后的文字颜色 */ a:visited{ color:gold; } /* 鼠标滑上 */ a:hover{ color:hotpink; } /* 点击链接时候的 */ a:active{ color:darkcyan; }


【本文地址】


今日新闻


推荐新闻


    CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3