<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>常用的选择器</title> <style type="text/css"> /* 元素选择器,直接使用标签名 */ h1{ color:red; } /* id选择器 通过元素的id属性值选中唯一的一个元素 id只能被一个元素使用 例如,只能有一个p使用特定的一个id选择器 */ #idname{ font-size: 40px; } /* class选择器 通过元素的class属性值,选中一组元素 。class{} 一个元素可以上设置多个class选择器,多个值之间用空格隔开 */ .p2{ color: skyblue; } /* 选择器分组 通过选择器分组可以同时选中多个选择器对应的元素 语法:选择器1,选择器2,选择器n{} */ #p1,.a1,.a5{ color: #000; } /* 统配选择器:选择所有的元素 语法*{} */ *{ background-color: teal; } /*复合选择器,交集选择器 作用:可以选中同时满足多个条件的元素 语法: 选择器1选择器2 */ span.p4{ color: chocolate; } </style> </head> <body> <h1>This is h1's css!</h1> <p id="idname">This is a id选择器的效果</p> <p class="p2">This is class选择器</p> <p class="p2">This is class选择器</p> <span>I am span </span> </body> </html>
CSS学习——常见的选择器
猜你喜欢
转载自www.cnblogs.com/yxl-/p/12422541.html
今日推荐
周排行