CSS选择器 1
2021/6/9 10:35:42
本文主要是介绍CSS选择器 1,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
3 选择器
所谓选择器,指的是选择施加样式目标的方式。
3.1 元素选择器
用标签名作为选择器,选中所有相应的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
font-size:24px;
color: red;
}
p{
font-size: 32px;
color:blue;
}
</style>
</head>
<body>
<div>元素选择器</div>
<p>元素选择器1</p>
<p>元素选择器2</p>
</body>
</html>
3.2 id选择器
顾名思义,是根据id来选择元素,其样式定义形式为:
#idname{
……
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1 {
width: 200px;
height: 200px;
}
#div2 {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
显示结果为
3.3 类选择器
根据class属性来选择元素,其样式定义形式为:
.className{
……
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.even {
width: 200px;
height: 200px;
}
.odd {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="odd"></div>
<div class="even"></div>
<div class="odd"></div>
</body>
</html>
显示结果为:
从结果可以看出: .odd{……}定义的样式会施加到所有class="odd"的元素上,比如上例中的第一个和第三个<div>,当然也包括class="odd"的<p>。
这篇关于CSS选择器 1的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-01CSS-Module学习:轻松入门与实战技巧
- 2024-09-29CSS6教程:初学者必备指南
- 2024-09-29CSS定位教程:入门与实战指南
- 2024-09-29CSS浮动教程:掌握网页布局的基础技巧
- 2024-09-29CSS选择器教程:初学者必备指南
- 2024-09-29CSS样式教程:初学者必备指南
- 2024-09-27CSS 中的黄金比例
- 2024-09-25CSS大厂面试真题详解及备考指南
- 2024-09-10深入浅出TailwindCSS开发:快速上手与实战技巧
- 2024-09-10尾风CSS开发:快速上手与实战指南