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>