CSS的基础知识点(下)

这篇博客详细介绍了CSS的复合选择器,包括后代选择器、子选择器、并集选择器和伪类选择器,重点讲解了链接伪类和:focus选择器。此外,还阐述了CSS元素的显示模式,如块元素、行内元素和行内块元素的特性和转换。接着,文章深入讨论了CSS背景的相关属性,如背景颜色、图片、平铺、位置和固定。最后,文章总结了CSS的三大特性:层叠性、继承性和行高继承,并探讨了优先级规则。
摘要由CSDN通过智能技术生成

1. CSS 的复合选择器

1.1 后代选择器 (重要)

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

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

1.2 子选择器 (重要)

子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素.

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

1.3 并集选择器 (重要)

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

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

1.4 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。
伪类选择器书写最大的特点是用冒号(:)表示,比如 :hover 、 :first-child 。

链接伪类选择器注意事项
1. 为了确保生效,请按照 LVHA 的循顺序声明 :link-:visited-:hover-:active
2. 记忆法:love hate 或者 lv 包包 hao 。
3. 因为 a 链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式。

1.4.1 链接伪类选择器

判断HTML是否有子节点,css判断某元素的子元素个数,并分别设置样式
weixin_42297982的博客
06-17 2523
工作时遇到这样一个问题:根据某元素所包含的子元素个数,分别设置不同的样式,这个用js可以解决,不过个人认为用css解决可能更简单一点。这也正好加深了我对css选择器的理解和运用。demo如下: 效果图如下 完整代码如下:css3*{box-sizing:border-box;}ul{width:100%;margin:0;padding:0;font-size: 0;}li{margin:0...
css 利用 :not(:empty) 找出有子元素
chelen_jak的专栏
08-30 6911
参考:CSS 为没有内容的元素设置样式 :not(:empty) 我们有时会想将有子元素和无子元素的不同样式显示,所以就有了这篇资料 Html <div class='box'></div> <div class='box'>纯文本</div> <div class='box'><button>内置button&lt...
CSS选择器
hasoe的博客
07-31 1244
CSS选择器 标签选择器: 根据标签名称选择一类元素 <div></div> <span></span> id选择器: 通过id属性选择一个元素 #value 类选择器: class .value 普遍选择器: *:所有 后代选择器: >:选择当前元素的直接子元素 空格:选择当前元素的所有后代元素,包含孙代元素 兄弟选择器: +:选择当前元素之后的一个兄弟 ~:选择当前元素之后的所有兄弟元素 属性选择器: 根据元素的属性选择
css基础知识(1)
m0_62520946的博客
01-30 700
1.css的定义 css为层叠样式表 网页实际是一个多层的结构,通过css可以分别为网页的每一个部分进行编辑。 2.样式种类 1)内联样式 方法:在相关的标签中使用样式属性。 作用:只对当前的元素内容进行编写样式,不方便以后的修改。 示例: <p style="color: red; font-size: 20px"> This is a paragraph </p> 效果: ...
css判断某元素的子元素个数并分别设置样式的方法
09-24
主要介绍了css判断某元素的子元素个数并分别设置样式的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
html&css入门基础知识点.pdf
10-04
HTML和CSS基础知识点 HTML是用来描述网页的一种语言,指的是超文本标记语言(Hyper Text Markup Language),它不是一种编程语言,而是一种标记语言。HTML使用标记标签来描述网页的结构和内容。 标记语言是一套...
HTML+CSS基础知识点.pdf
06-17
HTML+CSS 基础知识点总结 HTML+CSS前端开发的基础技术,掌握 HTML、CSS 和 JavaScript 语言是必不可少的。下面是 HTML+CSS 基础知识点总结: 1. HTML 是网页内容的载体,内容就是网页制作者放在页面上想要让...
CSS基础知识超全整理
07-04
整理好的一份关于css的知识大纲,希望能够帮助到大家,可以用来复习回顾
html+css基础知识点整合
05-27
这是我在学习html和css时候整合的知识点,面还是比较详细,一些容易混淆的知识点也有说明
HTML+CSS3基础知识点资源
最新发布
03-14
同时,CSS3的定位机制(static、relative、absolute和fixed)也是重要的知识点,它们决定了元素相对于其父元素或视口的位置。 学习HTML+CSS3时,动手实践至关重要。通过创建简单的网页并不断修改样式,你可以直观地...
你应该知道的某些css属性
Embrace924的博客
05-17 128
阴影的效果: https://codepen.io/embrace924/pen/wvJWRNB filter: drop-shadow(2px 4px 8px #585858); 设置容器长宽比: aspect-ratio //宽3高1 aspect-ratio: 3/1; 控制一个元素的可调整大小 resizeCSS https://developer.mozilla.org/zh-CN/docs/Web/CSS/resize none:元素不能被用户缩放...
前端学习笔记之——使用 CSS 选择器(二)
前尘忆梦的博客
06-23 654
使用 CSS 选择器(二) 1、使用结构性伪类选择器 使用结构性伪类选择器能够根据元素在文档中的位置选择元素。这类选择器都有一个冒号字符前缀(:),例如 :empty。它们可以单独使用,也可以跟其他选择器组合使用,如 p:empty。 1.1、使用根元素选择器 :root 选择器匹配文档中的根元素。它可能是用得最少的一个伪类选择器,因为总是返回 html 元素。 选择器 :root 匹配 选择文档中的根元素,总是返回 html 最低支持 CSS 版本 3 <!DOCTYPE H
css学习总结
qq_45802327的博客
06-14 385
Css Css,级联样式表,Html用于撰写页面内容,Css将决定如何在屏幕上显示,my god!有点难,太多了,关于上课讲的内容,对付作业可能都不够用,哈哈哈哈,是有点这个感觉,但是,熟能生巧,打发时间嘛,我的时间够用。这样子的总结不是应付作业,是写给自己看的。 Css语法 有两种选择器,分别为 id 和 class 选择器,具体如何使用,如下: id选择器 /* 注意:id选择器前有 # 号。 */ #sky{ color: blue; } 找到页面上id为sky的那个元素让它呈现
CSS篇学习笔记2
baidu_39338037的博客
11-24 214
任务名:选择器 (选择器的种类与优先级) 一、相邻兄弟选择器 “xxx”+“xxx”:介于两个选择器之间,当第二个元素紧跟在第一个元素之后, 并且两个元素都是属于同一个父元素的子元素,则第二个元素将被选中。 二、属性选择器 通过属性来选择,如div[class=“xxx”]就是div中class名为xxx的,a[href]就是a标签中包含href的 三、子选择器 ...
判断是否有包含指定的class
u011117693的博客
12-20 1976
html代码: js代码: var type = $('div').is('.a') 获得true,包含这个class, var type = $('div').is('.c') 获得false,不包含这个class,
检查父元素是否包含子元素
lio-zero 的博客
10-16 358
检查 parent 是否包含 child。 使用 Node.contains() 以检查 parent 元素包含的 child 元素。 const elementContains = (parent, child) => parent !== child && parent.contains(child) elementContains( document.qu...
05-(CSS基础)后代选择器
我们的目标是星辰大海!
04-04 675
04-(CSS基础)后代选择器
css 所有后代元素,CSS 选择子元素和后代元素
weixin_42300090的博客
08-04 4944
内层11内层12内层21子元素概念:如上代码 , id 为 container 的div元素 包含了 id 为 layer1 和 layer2 的两个div元素。这种包含是直接包含, 中间没有其他的层次的元素了。 所以 id 为 layer1 和 layer2 的两个div元素 是 id为 container 的div元素的直接子元素而 id 为 layer1 的div元素 又包含了 id 为 i...
全面掌握CSS基础与进阶知识点总结
本文档是对CSS(层叠样式表)知识点的详细归纳和总结,旨在帮助学习者系统地理解和记忆CSS基础知识。CSS是用于网页设计和开发中的关键语言,它控制网页元素的外观和布局。 1. **基本格式**: CSS采用三种基本格式...
写文章

热门文章

  • 创建一个电脑对象,该对象要有颜色,重量,品牌,型号,可以看电影,听音乐,打游戏和敲代码 5974
  • 创建一个按钮对象,该对象中需要包含宽,高,背景颜色和点击行为 3791
  • 本地存储—sessionStorage、localStorage 3709
  • Node.js—数据库 3162
  • Node.js—Express、Express 路由 、Express 中间件、使用 Express 写接口 2986

分类专栏

  • 笔记 69篇

最新评论

  • 创建一个按钮对象,该对象中需要包含宽,高,背景颜色和点击行为

    海某人844: 你这是两个按钮

  • Node.js—数据库

    Gikg.: 大佬有什么办法能让从数据库中获取到的字段赋值给js中的变量吗例如赋值给var什么的

  • JS 函数返回值相关练习(用户输入一个数字判断是否为素数)

    梨花香不香: 9...不是素数

  • JS 函数返回值相关练习(用户输入一个数字判断是否为素数)

    可爱的小曹: 我就说呢 把else里的break去掉就行了

  • JS 函数返回值相关练习(用户输入一个数字判断是否为素数)

    Veronica-: 没事,我们都是在不断学习的过程中一点点进步的

最新文章

  • Node.js—数据库
  • Node.js—Express、Express 路由 、Express 中间件、使用 Express 写接口
  • Node.js—模块化、npm 与包
2022年40篇
2021年30篇

目录

目录

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值

玻璃钢生产厂家北京周年庆典商场美陈多少钱广东景观玻璃钢雕塑加工厂玻璃钢观音雕塑厂家定做商场孔雀美陈福建步行街玻璃钢雕塑绍兴佛像玻璃钢雕塑西安玻璃钢雕塑制作厂南充玻璃钢花盆铜陵户外玻璃钢雕塑定做价格青岛商场美陈厂家供应湖南玻璃钢金属雕塑制作丰城玻璃钢景观雕塑生产厂家山西玻璃钢雕塑玻璃钢电影动漫雕塑厂家直销栖霞商场活动美陈家用玻璃钢雕塑摆件设计企业永州玻璃钢雕塑加工厂全新玻璃钢雕塑厂家量大从优玻璃钢雕塑的制作用料平顶山玻璃钢校园玻璃钢景观雕塑武汉玻璃钢名人雕塑贵港商场美陈雕塑厂家玻璃钢卡通动物雕塑哪家好玻璃钢雕塑公仔作用普陀区定制玻璃钢雕塑哪家好喷泉雕塑飞马玻璃钢雕塑玻璃钢金龙雕塑庆阳卡通玻璃钢雕塑安装上海艺术商场美陈销售厂家蝴蝶玻璃钢雕塑定做香港通过《维护国家安全条例》两大学生合买彩票中奖一人不认账让美丽中国“从细节出发”19岁小伙救下5人后溺亡 多方发声单亲妈妈陷入热恋 14岁儿子报警汪小菲曝离婚始末遭遇山火的松茸之乡雅江山火三名扑火人员牺牲系谣言何赛飞追着代拍打萧美琴窜访捷克 外交部回应卫健委通报少年有偿捐血浆16次猝死手机成瘾是影响睡眠质量重要因素高校汽车撞人致3死16伤 司机系学生315晚会后胖东来又人满为患了小米汽车超级工厂正式揭幕中国拥有亿元资产的家庭达13.3万户周杰伦一审败诉网易男孩8年未见母亲被告知被遗忘许家印被限制高消费饲养员用铁锨驱打大熊猫被辞退男子被猫抓伤后确诊“猫抓病”特朗普无法缴纳4.54亿美元罚金倪萍分享减重40斤方法联合利华开始重组张家界的山上“长”满了韩国人?张立群任西安交通大学校长杨倩无缘巴黎奥运“重生之我在北大当嫡校长”黑马情侣提车了专访95后高颜值猪保姆考生莫言也上北大硕士复试名单了网友洛杉矶偶遇贾玲专家建议不必谈骨泥色变沉迷短剧的人就像掉进了杀猪盘奥巴马现身唐宁街 黑色着装引猜测七年后宇文玥被薅头发捞上岸事业单位女子向同事水杯投不明物质凯特王妃现身!外出购物视频曝光河南驻马店通报西平中学跳楼事件王树国卸任西安交大校长 师生送别恒大被罚41.75亿到底怎么缴男子被流浪猫绊倒 投喂者赔24万房客欠租失踪 房东直发愁西双版纳热带植物园回应蜉蝣大爆发钱人豪晒法院裁定实锤抄袭外国人感慨凌晨的中国很安全胖东来员工每周单休无小长假白宫:哈马斯三号人物被杀测试车高速逃费 小米:已补缴老人退休金被冒领16年 金额超20万

玻璃钢生产厂家 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化