css选择器的分类 |
您所在的位置:网站首页 › css选择器标签选择器 › css选择器的分类 |
选择器的分类
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 |