首页 > 编程语言 >黑马程序员前端-CSS的复合选择器

黑马程序员前端-CSS的复合选择器

时间:2023-01-28 21:39:23浏览次数:54  
标签:并集 伪类 元素 选择器 语法 程序员 链接 CSS


前端学习笔记教程不定期更新中,传送门:

  • ​​前端HTML第一天:什么是网页?什么是HTML?网页怎么形成?​​
  • ​​黑马程序员前端专栏css入门总结​​
  • ​​CSS之emmet语法​​

上一期的CSS入门笔记没有更新完,继续更新中…

CSS的复合选择器

  • ​​1、什么是复合选择器?​​
  • ​​2、后代选择器 (重要)​​
  • ​​3、子选择器 (重要)​​
  • ​​4、并集选择器 (重要)​​
  • ​​5、伪类选择器​​
  • ​​6、链接伪类选择器​​
  • ​​7、:focus 伪类选择器​​

1、什么是复合选择器?

在 CSS 中,可以根据选择器的类型把选择器分为基础选择器和**复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,可以更准确、更高效的选择目标元素(标签) 常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等

2、后代选择器 (重要)

定义

后代选择器又称为包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。

语法

黑马程序员前端-CSS的复合选择器_后端

上述语法表示选择元素 1 里面的所有元素 2 (后代元素)。

语法说明

  • 元素1 和 元素2 中间用空格隔开
  • 元素1 是父级,元素2 是子级,最终选择的是元素2
  • 元素2 可以是儿子,也可以是孙子等,只要是元素1的后代即可
  • 元素1 和 元素2 可以是任意基础选择器

例子:

3、子选择器 (重要)

定义

子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。

(简单理解就是选亲儿子元素)

语法

黑马程序员前端-CSS的复合选择器_后端_02

上述语法表示选择元素1 里面的所有直接后代(子元素) 元素2。

语法说明

  • 元素1 和 元素2 中间用 大于号 隔开
  • 元素1 是父级,元素2 是子级,最终选择的是元素2
  • 元素2必须是亲儿子,其孙子、重孙之类都不归他管. 你也可以叫他 亲儿子选择器

例子

黑马程序员前端-CSS的复合选择器_python_03

4、并集选择器 (重要)

定义

并集选择器可以选择多组标签, 同时为他们定义相同的样式,通常用于集体声明。并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分。

语法

黑马程序员前端-CSS的复合选择器_后端_04

上述语法表示选择元素1 和 元素2。

语法说明

  • 元素1 和 元素2 中间用逗号隔开
  • 逗号可以理解为和的意思
  • 并集选择器通常用于集体声明

例子

黑马程序员前端-CSS的复合选择器_css_05

5、伪类选择器

定义

伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。

语法

伪类选择器书写最大的特点是用冒号(:)表示,比如 :hover 、 :first-child 。

6、链接伪类选择器

定义

伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。

语法

伪类选择器书写最大的特点是用冒号(:)表示,比如 :hover 、 :first-child 。

a:link 没有点击过的(访问过的)链接 a:visited 点击过的(访问过的)链接 a:hover 鼠标经过的那个链接 a:active 鼠标正在按下还没有弹起鼠标的那个链接

链接伪类选择器注意事项

为了确保生效,请按照 LVHA 的循顺序声明 :link-:visited-:hover-:active。

记忆法:love hate 或者 lv 包包 hao 。

因为 a 链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式。

链接伪类选择器实际工作开发中的写法

黑马程序员前端-CSS的复合选择器_开发语言_06

7、:focus 伪类选择器

定义

:focus 伪类选择器用于选取获得焦点的表单元素。

焦点就是光标,一般情况 类表单元素才能获取

例子:

黑马程序员前端-CSS的复合选择器_python_07

复合选择器总结

黑马程序员前端-CSS的复合选择器_开发语言_08




标签:并集,伪类,元素,选择器,语法,程序员,链接,CSS
From: https://blog.51cto.com/u_8238263/6025136

相关文章

  • 黑马程序员前端-CSS之emmet语法
    前端学习笔记教程不定期更新中,传送门:​​前端HTML第一天:什么是网页?什么是HTML?网页怎么形成?​​​​黑马程序员前端专栏css入门总结​​上一期的CSS入门笔记没有更新完,最后一......
  • 提高程序员工作效率的工具合集windows+ios
    提示:集合各种程序员必备工具,望学习收藏~文章目录​​前言​​​​一、Markdowm​​​​1:菜单栏​​​​2:文件​​​​3:编辑​​​​4:段落​​​​5:格式​​​​6:视图​​​......
  • Java程序员必看:Solr vip竞价排名
    功能介绍本文将使用solr完成vip等级排名,这里并不是简单的按照vip等级排序。而是在使用solr条件查询(不使用排序)的时候将符合条件并且具有vip等级的数据显示在前面,这个时候......
  • 微盟员工删库跑路,同是程序员你有哪些反思?
    近期互联网的大事件无外乎微盟员工删库,造成了微盟巨大的损失。那么,同是程序员的你,是否想过删库怎么办呢?如何应对这种情况呢?删库之后主要的还是看如何还原,之前是否有备份,今天......
  • 怎么从菜鸟程序员变成架构师
    怎么从菜鸟程序员变成架构师一、正确理解架构师的工作架构师一般是不会去探讨业务的范畴,他是把整个项目的结构搭出来,并让程序员去填肉(业务功能部分),一般架构师的好坏决定......
  • 推荐这5个很牛的开源项目,程序员直呼内行
    大家伙们年过了哈,该收拾收拾心情上班了。不知道大家有没有这种感觉,年纪越大,越觉得年过得快。感觉好像才刚开始,马上初五了,初六送完穷鬼,初七送自己出来上班了(没有哭)。不过......
  • CSS
    CSS <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><style>h1{color:royalblue;}</style>......
  • 一个非科班出身的程序员成长之路
    看了很多程序员的成长之路。我也把我经历写出来,一供想走向程序员这条路的朋友做个参考。对程序员的第一个认识,我记得好像是在1998年。那年我正读高三,看到一篇文章,介绍是......
  • 程序员开什么车?
    程序员开什么车比较多?程序员这个群体的特征非常明显,他们大多很聪明,但是给人的感觉又是不谦逊,还向往个人主义。他们大多懒惰(体力劳动),也许是因为程序员已经习惯了脑力劳动!他......
  • 9、CSS权威指南--第5章(p155)字体
    5.1字体族CSS定义了五种通用字体族:衬线字体:这种字体中的字形宽度各异,而且有衬线。无衬线字体:这种字体中的字形宽度各异。等宽字体:等宽字体中的字形宽度一样。一般用......