HTML之CSS三大选择器

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/*1.元素选择器 根据标签的名字确定样式的作用元素语法：标签名{}缺点：某些同名的元素不希望使用某些样式，某些不同名的元素希望使用某些样式，都无法协调2.id选择器 根据标签的id确定样式的作用元素一般每个元素都有自己的id属性，但是在同一个页面中不同标签的id不应该相同，id具有唯一性语法：#id值{}缺点：id具有唯一性，样式只能作用于一个元素上，不适合用于多个元素3.class选择器 根据标签的class确定样式的作用元素元素的class属性值可以重复，而且一个元素的class属性可以有多个值语法：.class属性值{}缺点：class属性值可以重复，样式作用范围不确定*//*自测优先级 id选择器>元素选择器>class选择器*//*加上type修饰范围*/input[type="button"] { width: 100px;height: 30px;background-color: red;color: white;border: 1px solid;border-radius: 5px;margin: 10px;font-family: '隶书';}#btn3[type="button"] { /*加上type修饰范围*/width: 100px;height: 30px;background-color: red;color: rgb(166, 40, 40);border: 1px solid;border-radius: 5px;margin: 10px;font-family: '隶书';}.shapeClass{width: 100px;height: 100px;border-radius: 5px;}.colorClass{background-color: sandybrown;color: white;border: 3px solid forestgreen;}.fontClass{font-family: '隶书';font-size: 20px;}</style>
</head><body><input id="btn1" type="button" value="按钮1" /><input id="btn3" type="button" value="按钮3" /><input id="btn2" class="shapeClass colorClass fontClass" type="button" value="按钮2" />
</body>
</html>