CSS结构伪类E:first-child/last-child/only-child/empty

【CSS结构伪类E:first-child/last-child/only-child/empty】的更多相关文章

CSS结构伪类E:first-child/last-child/only-child/empty

E:first-child解释:E的父元素的第一个子元素正好是E,给这个E定义样式 E:last-child解释:E的父元素的最后一个子元素正好是E,给这个E定义样式 E:only-child解释:E的父元素只有一个子元素正好是E,给这个E定义样式 E:empty解释:E元素没有子元素和文本内容,给这个E定义样式例子:只要E元素是它的父级的第一个子元素,就选中.它需要同时满足两个条件,一个是“第一个子元素”,另一个是“这个子元素刚好是E”. <style> span:first-child{…

第49天学习打卡（CSS 层次选择器结构伪类选择器属性选择器美化网页元素盒子模型）

推荐书籍:码出高效: Java 开发手册 2.2 层次选择器 idea里代码规范是按:ctrl +alt+L快捷键注释快捷键:ctrl+/ 1.后代选择器:在某个元素的后面祖爷爷爷爷爸爸你 <style> /*p{*/ /* background: #02ff00;*/ /*}*/ /* 后代选择器 */ body p{ background: red; } </style> 2.子选择器: 只有一代 ,儿子 /* 子选择器*/ body>p{ background…

CSS基础结构伪类选择器 last-child、first-child和nth-of-type的使用方法

一.通过伪类选择器查找单个标签元素html结构 <div> <a herf='#'>导航1</a> <a herf='#'>导航2</a> <a herf='#'>导航3</a> </div> /* 匹配第一个子元素,并且为a标签 */ div a:first-child{} 注意:如果第一个元素不是a,则匹配失败 /* 匹配最后一个子元素,且为a标签 */ div a:last-child{} /* 匹配第二…

CSS动态伪类选择器温故-3

动态伪类选择器伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器(4)UI伪类选择器(5)结构伪类选择器(6)否定伪类选择器注:和其它CSS选择器的区别-伪类选择器都以冒号[:]开头思考问题?(1)CSS3伪类选择器有什么功能?(2)选定元素能带来什么便利? 1.1.动态伪类选择器语法动态伪类包含两种:(1)在链接中常看到的锚点伪类(2)为用户行为伪类 (3)锚…

二.CSS的伪类

CSS的伪类(Pseudo-classes)分为两种:UI伪类和结构化伪类,伪类一般用于向某些选择器添加特殊的效果,伪类选择符用" : "进行标示,如果是“ :: ” 表示CSS3新增伪类 UI伪类 UI伪类会在HTML标签处于某种状态时,应用CSS样式,最常使用UI伪类的标签是a,利用链接伪类,用户可以在鼠标悬停是改变的颜色,去掉文本的下划线或提示信息面板等我们先来讨论下链接伪类.链接伪类总共有四个,因为链接始终是以下四种状态之一 link 等待用户点击 visited 用户…

关于css中伪类及伪元素的总结

css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落的第一行"."文章首字母"之类的选择器,而这在一些出版场景里又是必须的,这一情况下出现的.引用标准中的话: CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting…

奇妙的CSS之伪类与伪元素

我们都知道,在CSS中有很多选择器,例如id(#), class(.),属性[attr],这些虽然可以满足一些需要,但有时候还力有未逮.伪类和伪元素就提供了一个有益的补充,可以使我们更高效编码.伪类和伪元素是预定义的.独立于文档元素的,它们不是从DOM中获取的,不是基于元素本身特征的(id,类,属性等).它们从元素的特殊状态来获取,比如元素的兄弟元素,子元素,文本元素的第一个字符等. CSS伪类: 和一般的DOM中的元素样式不一样,它并不需要任何DOM内容.只是插入了一些修饰类的元素,这些元素对…