CSS三种基本选择器
程序员文章站
2022-04-28 08:14:10
...
选择器
基本选择器
1、标签选择器：选择一类标签 标签{}
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
color:#a13d30;
background: #3cbda6;
border: 24px;
}
p{
font-size: 80px;
}
</style>
</head>
<body>
<h1>学java</h1>
<h1>学Java</h1>
<p>听狂神说</p>
</body>
</html>
2、类选择器 class：选择所有class属性一致的标签，跨标签 .类名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.qing{
color: #3cbda6;
}
.ko{
color:#a13d30;
}
</style>
</head>
<body>
<h1 class="qing">标题1</h1>
<h1 class="ko">标题2</h1>
<h1>标题3</h1>
</body>
</html>
3、ID选择器:全局唯一！ #id名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#qingjing{
color: #ff008a;
}
.style1{
color: #a13d30;
}
h1{
color: green;
}
</style>
</head>
<body>
<h1 class="style1" id="qingjing">标题1</h1>
<h1 class="style1">标题2</h1>
</body>
</html>