基本选择器
- 标签选择器
标签选择器通常是HTML标签。
<style>
div {
color: red;
}
</style>
<body>
<div>这是我的第一个css文件</div>
</body> - ID选择器
ID选择器像是给元素起了一个唯一的“名字”， ``#id名` 来获取对应的元素，并为其 设置CSS样式。
<style>
#demo {
color: #bcb441;
}
</style>
<body>
<div id="demo">这是我的第一个css文件</div>
</body> - 类选择器
类选择器和ID选择器的唯一区别是:一个元素可以使用多个类选择器，但是只能使用一个ID选择器 我们可以通过.类名来使用类选择器。
<style>
.demo1 {
color: #000000;
backround-color: blue;
}
.demo2 {
background-color: red;
}
</style>
<body>
<div class="demo1 demo2">这是我的第一个css文件</div>
</body> 包含选择
- 子代选择器
<style>
div > h1 {
color: blue;
}
</style>
<body>
<div>
<h1>Hello</h1>
<section>
<h1>阿巴阿巴</h1>
</section>
</div>
</body>- 后代选择器
<style>
div h1 {
color: blue;
}
</style>
<body>
<div>
<h1>Hello</h1>
<section>
<h1>阿巴阿巴</h1>
</section>
</div>
</body> 属性选择器
通过属性选择器为拥有特定属性的小动物设置样式，再将属性和值用中括号包裹起来即可。
伪类选择器
伪类可以分为两种:结构化伪类、UI伪类。
伪元素选择器
:before 元素之前插入内容
:after 元素之后插入内
扫一扫
539
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
