CSS - 选择器_css最后一个元素选择器-程序员宅基地

技术标签: 选择器  css  selector  

选择器的作用

选择标签,并给其加样式

如果不用选择器,我们一般会直接在对应标签加行内样式,但是这种方式会造成HTML结构和样式严重耦合,不利于后期修改。所以CSS推出了选择器,来让HTML的结构和样式彻底解耦。

选择器分类

*选择器

选择所有标签

标签选择器

选择固定标签名的标签

class选择器

选择带指定class的标签

id选择器

选择带指定id的标签

伪类选择器

a标签伪类

超链接有四种状态

  • a:link        未被点击的超链接
  • a:hover     鼠标悬停在超链接上,但是未点击
  • a:active     点击中的超链接
  • a:visited    点击后,鼠标离开的超链接

每种超链接状态下的超链接都可以被选择器选中,即选择器不仅可以选择标签,还可以选择同一个标签的不同状态 去加样式。

需要注意的是

1.如何已经visited的超链接变回link样式

一旦点击过超链接后,表示超链接已经visited,则其link样式将不会再显示(除非清空浏览器历史记录,因为a标签伪类判断一个超链接是否visited,是去历史记录查找是否由对应链接)

 2.如何保证a标签伪类样式互相不覆盖

一旦a标签的状态发生改变,它的四个状态对应的选择器,将被按代码顺序加载。所以为了防止active,hover样式被visited样式覆盖,需要将visited样式放在它们前面。

并且,由于active点击时就已经鼠标悬停(hover)在了超链接上,所以active会被hover覆盖,所以需要将hover放在active前面。

最终a标签伪类顺序应该是

link,visited,hover,active

表单伪类

表单标签,如input这类需要输入的,有输入框的标签,也有状态区分

  • 鼠标未点击输入框或鼠标点击空白区域(输入框失去焦点)
  • 鼠标点击输入框(输入框获得焦点)

每种状态的输入框也可以被选择器选中,如input:focus,即可选择到获得焦点状态的输入框

子标签伪类

HTML中标签是可以嵌套的,而嵌套就会产生父子标签,在这种具有父子标签关系的情况下,我们可以使用子标签伪类去选择对应的子标签

  • :first-child                  获得指定父标签下的第一个子标签
  • :last-child                  获得指定父标签下的最后一个子标签
  • :nth-child(num)         获得指定父标签下的正序第num个子标签
  • :nth-last-child(num)  获得指定父标签下的反序第num个子标签

父元素省略陷阱

父元素 子元素:first-child{}    或者其他的-last-child,:nth-child(num),等等

其中父元素是可以省略的,此时子标签伪类会根据子元素去自动识别父元素。

但是需要注意的是,省略父元素可以,但是千万不要在子元素位置写上父元素。否则会产生误解。

如下面代码想要实现的效果是给 每一个.box元素下的最后一个p加颜色red

 这里子标签伪类选择器是这样写的,好像很符合语义

.box:last-child{}

这里省略了父元素写法,并将父元素.box放到了子元素位置,那么选择器就会自动识别.box为子元素,并找到其上一级父元素body,所以可以等价于

body .box:last-child{}

此时,选择器会去找body父元素下的最后一个子元素:<p>a5</p>

但是选择器发现要求的子元素必须要是.box类的,而<p>a5</p>没有,所以最终无法加样式。

属性选择器

HTML中大部分标签都是由标签属性的,我们可以选择带指定属性的标签,并给其加样式

由于标签属性的组成是  属性名+属性值

所以我们既可以根据[属性名]选择,(可以加标签名限定以下)

 也可以根据属性值选择

并且可以选择类似属性:

比如以什么什么开头的属性值,

 以什么什么结尾的属性值,

包含什么什么的内容的属性值

关系选择器

类似于前面的子标签伪类,但是子标签伪类是选择单个标签,这里关系选择器可以选择多个标签。

标签的关系,其实就是标签相互嵌套产生的关系,主要可以分为:

  • 空格        祖先和后代
  • >             父亲和儿子
  • +              兄弟

后代选择器

儿子选择器

 兄弟选择器

伪元素选择器

在HTML中我们可以将文档树中的标签称为元素,而能够选择到标签的选择器,都可以叫“真元素选择器”。

那么什么叫伪元素呢?就是不在文档树中的东西。

在一些场景下,我们可能需要添加一些伪元素来装饰文档树,而这些伪元素也是需要样式的。

所以伪元素选择器,就是给伪元素添加样式的。

选择器分组

多个选择器使用逗号隔开,共享相同样式

 选择器样式继承

子标签可以继承父标签的选择器的样式

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qfc_128220/article/details/118672291

智能推荐

数字IC实践项目(9)— Tang Nano 20K: I2C OLED Driver_chinese fpga tang nano 20k-程序员宅基地

文章浏览阅读1.6k次,点赞28次,收藏20次。新年快乐,龙年大吉!_chinese fpga tang nano 20k

第二十章 多线程-程序员宅基地

文章浏览阅读792次,点赞22次,收藏19次。Windows操作系统是多任务操作系统,它以进程为单位。一个进程是一个包含有自身地址的程序,每个独立执行的程序都称为进程。也就是说每个正在执行的程序都是一个进程。系统可以分配给每一个进程有一段有限的使用CPU的时间(也可以称为CPU时间片),CPU在这段时间中执行某个进程,然后下一个时间片又跳至另一个进程中去执行。由于CPU转换比较快,所以使得每个进程好像是同时执行一样。下图表明了Windows操作系统的执行模式创建线程继承Thread类。

【全局敏感性分析】【基于方差的灵敏度指数】【基于密度的灵敏度指数】【不确定性分析】基于累积分布函数的全局敏感性分析的简单高效方法(Matlab代码实现)-程序员宅基地

文章浏览阅读813次,点赞22次,收藏22次。基于方差的灵敏度指数在不同环境建模领域的GSA应用中越来越受欢迎(例如,参见Pastres等人,1999年;Nossent等人,2011年;然而,在输出分布高度倾斜或具有多峰性的情况下,考虑模型输出的整个概率密度函数(PDF),而不仅是其方差的方法,更为合适,因为方差可能无法充分代表不确定性。我们期望PAWN能够促进基于密度的方法的应用,并作为基于方差的GSA的补充方法。全局敏感性分析(GSA)是一组数学技术,旨在评估不确定性通过数值模型的传播,特别是理解不同不确定性来源对模型输出变异性的相对贡献。

c#表达式树实现浅拷贝对象_c# copy objects 表达式树-程序员宅基地

文章浏览阅读657次。浅拷贝对象对比手写的Copy方法100万次耗时对比(CPU是 i7 - 4710MQ)static void Main(string[] args){ var value = new TestClass { Age = 18, Name = "张三", Sex = Gender.Man }; Console.Wri..._c# copy objects 表达式树

keras提取模型中的某一层_Tensorflow笔记:高级封装——Keras-程序员宅基地

文章浏览阅读1.9k次,点赞4次,收藏8次。前言之前在《Tensorflow笔记:高级封装——tf.Estimator》中介绍了Tensorflow的一种高级封装,本文介绍另一种高级封装Keras。Keras的特点就是两个字——简单,不用花时间和脑子去研究各种细节问题。1. 贯序结构最简单的情况就是贯序模型,就是将网络层一层一层堆叠起来,比如DNN、LeNet等,与之相对的非贯序模型的层和层之间可能存在分叉、合并等复杂结构。下面通过一个Le..._tf2 model提取某层

FCN全卷积网络理解及代码实现(来自pytorch官方实现)_fcn代码-程序员宅基地

文章浏览阅读1w次,点赞12次,收藏113次。FCN是首个端对端的针对像素级预测的全卷积网络而换为卷积层之后,最后得到的是1000通道的2D图像,可以可视化为heat map图。一般说的vgg16是D:全连接操作前后:77512(通道)【假设忽略偏置】\color{red}{【假设忽略偏置】}【假设忽略偏置】全连接FC1计算:计算对应某一个结点的输出,将该节点与上一层某一个结点的权重与输入对应节点数值相乘,再求和下层使用7*7的卷积核、stride=1,4096个卷积核的一个卷积层一个卷积核和FC1一个节点参数量一样\color{red}{一_fcn代码

随便推点

STC8G1K08------ADC__-程序员宅基地

文章浏览阅读5.3k次,点赞4次,收藏32次。STC8G1K08------ADC_stc8g1k08

医院网络建设和综合布线设计_医院网络规划设计-程序员宅基地

文章浏览阅读1k次,点赞3次,收藏14次。通常情况下,可以根据用户需求以及建设资金的不同,把其中的几层进行合并后再进行处理。接入层作用:方便用户接入使用,与此同时,接入层还为用户提供了丰富的接入控制以及大量的接口。核心层作用:高速的数据通信交换,提供稳定可靠的冗余性,并且可以不用配置很复杂的策略。现代医院网络的组网一般情况下可以分为三层,依次可以称为:核心层、汇聚层和接入层。汇聚层作用:汇聚层进行流量控制和进行复杂的控制策略,以及要求必要的冗余设计等等。5.2.2测试医院门诊楼访问急诊楼 29。5.2.4测试医院行政楼访问医技楼 30。_医院网络规划设计

【基础知识】~ FIFO-程序员宅基地

文章浏览阅读6.8k次,点赞12次,收藏101次。了解FIFO定义FIFO(First In First Out),即先进先出队列。FIFO存储器是一个先入先出的双口缓冲器,即第一个进入其内的数据第一个被移出,其中一个是存储器的输入口,另一个口是存储器的输出口。对于单片FIFO来说,主要有两种结构:触发导向结构和零导向传输结构。触发导向传输结构的FIFO是由寄存器阵列构成的,零导向传输结构的FIFO是由具有读和写地址指针的双口RAM构成。FPGA 使用的 FIFO 一般指的是对数据的存储具有先进先出特性的一个缓存器,常被用于数据的缓存,或者高速异步数_fifo

QTableView/QTableWeight表头设置自适应列宽_tableweight怎么用-程序员宅基地

文章浏览阅读598次。qt4: tableview->horizontalHeader()->setStretchLastSection(true); tableview->horizontalHeader()->setResizeMode(QHeaderView::Stretch); qt5: /*设置tableview等宽*/ QHeaderView* headerView = ui_tableweight怎么用

WEBRTC之测试STUN/TURN服务器是否可用_turn/stun测试地址、-程序员宅基地

文章浏览阅读7.6k次,点赞2次,收藏6次。可以通过这个地址进行测试:https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/如果测试的是一个STUN服务器,在连接有效时应该可以收集一个类型为“srflx”的候选者。类似地,对于有效的TURN服务器,可以收集一个类型为“relay”的候选者。..._turn/stun测试地址、

ssm633高校智能培训管理系统分析与设计+vue-程序员宅基地

文章浏览阅读755次,点赞16次,收藏15次。本科毕业设计论文题目:高校智能培训管理系统设计与实现系 别:专 业:班 级:学生姓名:学生学号:指导教师:如今的年代,已经是步入信息社会了,不仅信息更新速度频繁,信息量也大,在信息时代必须有相应的处理信息的方法,如果还采用以前的结绳记事或者笔写纸记,不仅是信息录入效率上赶不上节奏,在信息检索的速度上更是让人无法承受。幸而当今社会上计算机技术发展的相当不错,可以通过计算机在信息处理上面实现自动化或者半自动化的作业,采用计算机技术,能有效的提高信息录入以及信息检索的效率,社会上相同行业之间本身

推荐文章

热门文章

相关标签