CSS3学习笔记-选择器
在CSS中,选择器是一种指定一个或多个元素的方法。可以根据元素的类型、类、ID、属性等特征来选择元素。CSS3引入了很多新的选择 器,让我们可以更加灵活和精准地选择元素。
下面介绍一些常用的CSS3选择器:
1. 元素选择器
元素选择器指定元素的标签名称,例如 p
、h1
、ul
。
p {
color: blue;
}
2. 类选择器
类选择器使用.
符号指定一个或多个元素的类名。可以为多个元素添加相同的类名,然后使用类选择器为它们设置样式。
.btn {
background-color: red;
color: white;
}
3. ID选择器
ID选择器使用#
符号指定一个唯一的元素ID。在一个网页中,每个ID只能出现一次。
#header {
font-size: 24px;
}
4. 子元素选择器
子元素选择器使用>
符号指定父元素和子元素之间的关系。例如,选择一个父元素下的所有p
元素:
div > p {
color: red;
}
5. 相邻兄弟选择器
相邻兄弟选择器使用+
符号指定相邻的两个元素之间的关系。例如,选择紧接在一个h1
元素后面的第一个p
元素:
h1 + p {
font-size: 18px;
}
6. 通用选择器
通用选择器使用*
符号指定网页中所有元素。可以结合其他选择器使用,例如:
* {
margin: 0;
padding: 0;
}
以上就是一些常见的CSS3选择器。
学习好选择器可以帮助我们精确地控制网页的样式和布局。
CSS3学习笔记-选择器的更多相关文章
- [CSS3] 学习笔记-选择器详解(三)
1.UI元素状态伪类选择器 在CSS3的选择器中,除了结构性伪类选择器外,还有一种UI元素伪类选择器.这些选择器的共同特征是:指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用.在CSS ...
- [CSS3] 学习笔记-选择器详解(二)
1.选择器first-child.last-child.nth-child和nth-last-child 利用first-child.last-child.nth-child和nth-last-chi ...
- CSS3学习笔记(3)-CSS3边框
p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...
- [CSS3] 学习笔记-CSS选择器
CSS3中,选择器的分类很多,有元素选择器.类选择器.ID选择器.属性选择器.后代选择器.子元素选择器.相邻兄弟选择器. 1.最常见的选择器就是元素选择器,文档的元素就是最基本的选择器,例如,h1{} ...
- CSS3学习笔记(1)-CSS3选择器
p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...
- CSS3学习笔记之linear-gradient
我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HT ...
- 我的CSS3学习笔记
1.元字符使用: []: 全部可选项 ||:并列 |:多选一 ?: 0个或者一个 *:0个或者多个 {}: 范围 2.CSS3属性选择器: E[attr]:存在attr属性即可: E[attr=val ...
- [CSS3] 学习笔记-CSS3选择器详解(一)
1.属性选择器 在CSS3中,追加了3个属性选择器,分别为:[att*=val].[att^=val]和[att$=val],使得属性选择器有了通配符的概念. <!doctype html> ...
- CSS3学习笔记1-选择器和新增属性
前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...
- HTML5+CSS3学习笔记(一)
HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML ...
随机推荐
- 【FAQ】关于获取运动健康数据的常见问题及解答
目录 一.Health Kit健康数据采样, 原子采样数据问题 二.Health Kit查询历史数据查询数据和返回数据不一致 三.Health Kit关于获取历史数据问题 四.调用Health Kit ...
- Netty集成HTTP的GET和POST通讯
核心就是ChannelInitializer的实现使用http 消息解码器 package com.coremain.handler; import io.netty.channel.ChannelI ...
- linux常用命令(八) tar 打包、压缩、解包、解压缩
Linux 常用的压缩与解压缩命令有:tar.gzip.gunzip.bzip2.bunzip2.compress .uncompress. zip. unzip.rar.unrar 等. 首先要弄清 ...
- umich cv-3-1
UMICH CV Neural Network 对于传统的线性分类器,分类效果并不好,所以这节引入了一个两层的神经网络,来帮助我们进行图像分类 可以看出它的结构十分简单,x作为输入层,经过max(0, ...
- 虹科分享 | B站崩了怎么办?Redis企业版数据库多云战略分析
近日,拥有3.33亿月均活用户的中国最大青年社区-B站因大规模服务器宕机,再度喜提热搜.对于B站这样需要满足大量用户在同一时间进行访问并实现各种功能的大型平台,其后台架构是十分复杂和庞大的.本地服务器 ...
- 从零开始搭建antd4.x + react16 + redux4 + webpack4 + react-router5基础框架解析
以上是2020年10月份的版本,后来,我将xmind进行了完善,文档也写的差不多了,可是,电脑坏了,硬盘换了,文件都没有了.这已经是第三次写这个文档了,思维导图就不更新了,按照几个重点进行说明. 这个 ...
- angular:响应式表单(Reactive Forms)和模板驱动表单(Template-Driven Forms)分别进行验证
2022-01-18 响应式表单 响应式表单是围绕Observable的流构建的. 使用响应式表单时,FormControl类是最基本的构造类. 在使用响应式表单前,需要先导入 ReactiveFor ...
- QPixmap、QIcon和QImage
QPixmap依赖于硬件,QImage不依赖于硬件.QPixmap主要是用于绘图,针对屏幕显示而最佳化设计,QImage主要是为图像I/O.图片访问和像素修改而设计的. 当图片小的情况下,直接用QPi ...
- games101-1 光栅化与光线追踪中的空间变换
在学习了一些games101的课程之后,我还是有点困惑,对于计算机图形学的基础知识,总感觉还是缺乏一些更加全面的认识,幸而最*在做games101的第五次作业时,查询资料找到了scratchpixel ...
- "拍牌神器"是怎样炼成的(一)--- 键鼠模拟之WinAPI
作为本系列博文的开篇,有必要先做些声明,用于免责.以绝口水: 博文仅围绕已经弃用的.C/S结构的<上海市个人非营业性客车额度竞拍程序>客户端(NetBidClient)进行介绍,对于正在使 ...