首页 > 其他分享 >CSS3学习笔记-选择器

CSS3学习笔记-选择器

时间:2023-11-12 10:23:09浏览次数:28  
标签:CSS3 color 元素 指定 笔记 ID 选择器

在CSS中,选择器是一种指定一个或多个元素的方法。可以根据元素的类型、类、ID、属性等特征来选择元素。CSS3引入了很多新的选择 器,让我们可以更加灵活和精准地选择元素。

下面介绍一些常用的CSS3选择器:

1. 元素选择器

元素选择器指定元素的标签名称,例如 ph1ul

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,color,元素,指定,笔记,ID,选择器
From: https://www.cnblogs.com/wuqiyang/p/17826806.html

相关文章

  • CSS3学习笔记-字体属性
    在CSS3中,可以使用字体属性来控制网页中文本的样式和排版。以下是常用的字体属性:font-family该属性用于指定网页中的文本所使用的字体。我们可以通过使用通用的字体名称,或者直接使用字体名称,在多个字体之间进行设置。例如:```cssbody{font-family:Arial,Helvetica,sans-......
  • CSS3学习笔记-盒模型
    CSS盒模型是指包含内容(content)、填充(padding)、边框(border)和外边距(margin)几个方面的一个矩形框模型。内容区(content):指元素中显示内容的区域,它的大小由width和height属性决定。填充区(padding):用于控制内容区周围的空白区域或边距,padding属性可以控制填充区的大小。边框(border):位于......
  • CSS3学习笔记-文字特效
    CSS3中提供了许多有趣和实用的文字特效,可以让我们的文本内容更加生动有趣,下面介绍一些常用的文字特效。文本阴影使用text-shadow属性可以为文本添加阴影效果,语法如下:text-shadow:h-shadowv-shadowblur-color;其中,h-shadow和v-shadow是必需的参数,分别表示阴影的水平和垂......
  • 读程序员的制胜技笔记10_可口的扩展
    1. 可扩展性1.1. 土耳其的一句谚语:“路到眼前必有车”1.1.1. “别为还没到来的事情烦恼”1.2. 单纯的高性能并不能使一个系统具有可扩展性,你需要让所有方面的设计都得能够迎合越来越多的用户1.3. 没有一个单一的方案可以解决我们所有的问题,我们需要把所有用来解决问题的......
  • 歌谣v2+ele笔记记录JsonServer模拟数据2
    第一步初始化配置npminit-y第二步yarnaddjson-server第三步创建db.json文件{"account":{"user":[{"name":"geyao","password":"123456"}]}}启动json-server--watch.......
  • 【深度学习笔记】第3章-神经网络基础
    参考书籍:邓立国等《python深度学习原理、算法与案例》清华大学出版社3.3感知机3.3.1感知机模型感知机,又称阈值逻辑单元(ThresholdLogicUnit,TLU)/线性阈值单元(LinearThresholdUnit,LTU)经典数据集:IrisDataSet(鸢尾属植物数据集)但是这个数据集有些复杂,没什么必要用,自己写......
  • 《Swin Transformer: Hierarchical Vision Transformer using Shifted Windows》阅读
    论文标题《SwinTransformer:HierarchicalVisionTransformerusingShiftedWindows》Swin这个词貌似来自后面的ShiftedWindowsShiftedWindows:移动窗口Hierarchical:分层作者微软亚洲研究院出品初读摘要提出SwinTransformer可以作为CV的通用主干Tansfo......
  • 学习笔记9
    第6章信号和信号处理1.信号和中断1.信号:信号是操作系统中用于通知进程有突发事件发生的一种机制。信号可以由硬件或软件生成,用于中断进程的执行。信号的主要目的是让进程能够及时处理这些特殊事件,例如用户输入、硬件故障等。信号的特点:异步性:信号可以在进程执行的任何时......
  • Pollard-Rho 学习笔记
    前言其实很早就看到过了,下定决心去学的,居然是因为翻到之前口胡的题目,然后发现之前做法假了,继续尝试做的时候发现需要这个算法,于是,题目就绿->黑了。Step.1引入求一个数的所有因数,这个问题伴随了我们很久了,现在又要翻出来鞭尸。最开始的时候,我们使用的是最朴素的\(O(n)\)试除......
  • 黑马pink css3
    行内元素/内联元素:是最典型的行内元素特点:相邻行内元素在一行上,一行可以显示多个高,宽度设置是无效的默认宽度是他本身内容的宽度行内元素只能容纳文本或其他行内元素注意:内部不能嵌套‘’可以嵌套块级元素行内块元素:‘’特点:一行可以有多个,之间有空隙默认宽度是他本......