仅供学习，转载请注明出处 块元素、内联元素、内联块元素 元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。...内联元素 内联元素，也可以称为行内元素，布局中常用的标签如：a、span、em、b、strong、i等等都是内联元素，它们在布局中的行为： 支持部分样式（不支持宽、高、margin上下、padding上下...解决内联元素间隙的方法 1、去掉内联元素之间的换行 2、将内联元素的父级设置font-size为0，内联元素自身再设置font-size 内联块元素 内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的...，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。...DOCTYPE html> css"> div{
在前端工程师的日常工作中，使用 CSS 元素选择器是稀松平常的事；无论你是编写一般的 CSS 还是需要经过编译的 SASS，SCSS，LESS等，最终都被编译成一行一行的 CSS 样式属性，最终交给浏览器解析并套用...也可以换个方式思考：在 HTML 的结构中，一个元素可以有无数个子元素，但只能有一个父元素，由子找父（由下往上）搜寻绝对是比较快的。...CSS 效率 实际上浏览器在这里已经完成了优化机制；浏览器会自动将状态一致的元素做样式快照。...，以及前面讨论到的 CSS 运算过程，编写 CSS 时也有几个地方可以稍微留心一下： 由于样式规则的目标属性会分组存放，id 选择器效率非常高，所以是不能与其他条件混用的。...延伸 认识了 CSS 选择器之后，你一定会很好奇，JavaScript 的元素选择器又是怎么回事呢？
选择出的 元素组 的 直接子元素 ( 亲儿子元素 ) 中 使用基础选择器 选择 元素 ; 子元素选择器语法 : 父选择器 写在前面 , 子选择器 写在后面 , 两个选择器之间使用 > 大于号隔开 ; 父选择器...>子选择器 { 属性名称1:属性值1; 属性名称2:属性值2; 属性名称3:属性值3; } 注意 : 子选择器 只能从 父选择器 选择出的标签 的 亲儿子元素 中选择 元素 ; 子选择器 只能 从...父选择器 选择出的元素的 亲儿子 元素 中选择 , 孙子元素 和 重孙子元素 选择不到 ; CSS 基础选择器 : 标签选择器 类选择器 ID 选择器 通配符选择器 2、代码分析 在下面的代码中 ,...下面的标签中 , div 标签 的 字标签 是 p 标签 , 没有 label 标签 , 因此 没有可选择的元素 , 孙子标签不在子元素选择器范围之内 ; div...; 基础选择器1基础选择器2 { 属性名称1:属性值1; 属性名称2:属性值2; 属性名称3:属性值3; } CSS 基础选择器 : 标签选择器 类选择器 ID 选择器 通配符选择器 2、代码示例
DOCTYPE html> 68-伪元素选择器 <style...: pink; /*指定添加的子元素的显示模式*/ display: block; /*隐藏添加的子元素*/...-- 1.什么是伪元素选择器?...伪元素选择器作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素 2.格式: 标签名称::before{ 属性名称:值; } 给指定标签的内容前面添加一个子元素...标签名称::after{ 属性名称:值; } 给指定标签的内容后面添加一个子元素 --> <!
css子元素选择器的介绍 说明 1、子元素选择器只会查找儿子, 不会查找其他被嵌套的标签。 2、子元素选择器之间需要用>符号连接, 并且不能有空格。...3、子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器。 子元素选择器可以通过>符号一直延续下去。 作用: 找到指定标签中所有特定的直接子元素, 然后设置属性。...格式: 标签名称1>标签名称2{ 属性:值; } 以上就是css子元素选择器的介绍，希望对大家有所帮助。
绝大部分人都不能得出一个正确的答案，现在就有个机会，自己数数。...samp, select, small, strike, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, var 常见的块状元素与内联元素...块状元素 内联元素 address - 地址 blockquote - 块引用 center - 举中对齐块 dir -...目录列表 div - 常用块级容易，也是CSS layout的主要标签 dl - 定义列表 fieldset - form控制组...samp - 定义范例计算机代码 select - 项目选择 small - 小字体文本 span - 常用内联容器
css后代选择器和子元素选择器的区别 说明 1、后代选择器使用空格作为连接符号，子元素选择器使用>作为连接符号。 2、后代选择器选中所有的特定后代标签，子元素选择器选中所有的特定的直接标签。...后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子..., 只要是被放到指定标 签中的特 定标签都会被选中 子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签...实例 比如说只要选择class为box的li标签而不选到最内层的li标签该如何做？ 单纯用后代选择器很难做到吧！... 以上就是css...后代选择器和子元素选择器的区别，希望对大家有所帮助。
相邻元素选择器 哥哥+弟弟{} /*通过哥哥选择到弟弟 */ 例： div+p{/* 兄弟选择器，哥哥标签+弟弟标签，，，，修饰的是弟弟 */ color:red; } 第一个盒子 第一个段落 第二个段落 无用的标签 第三个段落 效果图 ?...总结： 1.哥哥和弟弟中间用的符号：+ 2.修饰的是弟弟标签 3.不能通过弟弟选哥哥 关系选择器：后代(空格)，子元素(大于号)，兄弟(加号)
CSS3 浏览器支持情况 网址查询：caniuse.com CSS3的伪类选择器（一） 动态伪类选器 a:link{} a:visited{} a:hover{} a:active{} UI元素状态伪类选择器... html部分： // disable 是状态 CSS部分：（根据状态确定样式） input :enable{} input:disable{} CSS3的伪类选择器（二） 结构伪类选择器...部分 li:fist-child{} 元素的第一个子元素选中 li:last-child{} 元素的最后一个子元素选中 li:nth-child...li:only-child{} 选择的元素是它父元素只有一个子元素 li:only-of-type{} 选择的元素是它父元素只有一个子元素，但是限制子元素的标签类型为li...li:empty{} 选中的li标签父元素是空的 伪元素 html: css: .demo::first-letter{} 文本段落首字 .demo::first-line
一般 hover 效果只用在自身元素和控制子元素，那么可以直接用 CSS 控制兄弟元素的 hover 效果吗？...答案是可以的，不过只能控制相邻的元素，具体示例代码如下： 1、如果 #b 元素是 #a 元素的子元素，可以直接通过 #a:hover #b {...} 这种方式来控制。...示例代码如下： #a:hover #b{ color:green; } 2、#b 与 #c 是亲兄弟关系，有相同的父节点，且 #b 跟...来控制 #c 的样式。 当鼠标移到 #b 时，#c 的样式就会改变。...示例代码如下： #b:hover + #c{color : red;} HTML元素： 元素1 元素2
在selenium webdriver中，支持使用CSS选择器来进行元素定位，事实在真的投入工作，大量编辑用例和元素定位的时候，使用css 和 xpath才是经常需要用到的。...之前有专门讲过使用xpath对元素定位的使用，下面要介绍css选择器来进行元素定位。...【参见W3C官网说明】 http://www.w3school.com.cn/cssref/css_selectors.asp 先看看css选择器定位的webdriver函数： def find_elements_by_css_selector...(by=By.CSS_SELECTOR, value=css_selector) 常见语法 CSS选择器用于选择你想要的元素的样式的模式。...选择器 示例 示例说明 CSS .class .intro 选择所有class="intro"的元素 1 #id #firstname 选择所有id="firstname"的元素 1 * * 选择所有元素
内联元素与块级元素的转换 块元素(block element)和内联元素(inline element)都是html规范中的概念。在加入了CSS控制以后，可以改变块元素和内联元素之间的差异。...比如，我们可以把内联元素在style属性中加上display:block，使内联元素具有块元素的特点，也可以在块元素中加上display:inline，使它具有内联元素的特点。...CSS中还有一个dipslay:inline-block，显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性。...可变元素是基于以上两者随环境而变化的，它需要根据上下文关系确定该元素是块元素或者内联元素。可变元素隶属于上述两种元素，一旦根据上下文确定了它的类别，它就要遵循块元素或者内联元素的规则。 4....内联元素与块级元素列表 3.1 块级元素列表 TypeNoteaddress定义地址caption定义表格标题dd定义列表中定义条目div定义文档中的分区或节dl定义列表dt定义列表中的项目fieldset
CSS 选择器 这一块可以说是很基础了，只有用选择器选中元素，才能使样式生效 元素选择器(标签选择器) 直接选中原生 html 标签名，该选择器可以说是优先级最低的了，在没有其它类型选择器时才会考虑它...div { width: 100px; height: 50px; } id选择器 选中标签定义的 id 名字，该选择器高于类选择器但是低于内联样式 #great { width...可以根据元素的状态来进行样式的改变 伪元素 :first-line 匹配元素的第一行 :first-letter 匹配元素的第一个字母 :before 在元素之前插入生成的内容...n 个子元素 选择器优先级算法 众多类型的选择器方式，还可以组合使用，那么如何区分呢 优先级由 A，B，C，D 四个值确定，计算规则如下 存在内联样式，A = 1，否则 A = 0 B 的值等于...ID选择器 出现的次数; C 的值等于 类选择器 + 属性选择器 + 伪类 出现的总次数; D 的值等于 标签选择器 + 伪元素 出现的总次数 将四个值当成一个序列，(A，B，C，D)，按照从左往右的顺序依次比较
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。...::selection ::selection表示选中的内容 代码演示?...::before和::after ::before表示元素的开始，::after表示元素的最后，before和after必须结合content属性来使用 代码演示?...注意： before和after创建一个元素，但是属于行内元素。 新创建的这个元素在文档中是找不到的，所以我们称为伪元素。...before在父元素内容的前面创建元素，after在父元素内容的后面插入元素。 伪元素选择器和标签选择器一样，权重为1。 ---- 没有所谓失败，除非你不再尝试！
一、CSS3 伪元素选择器 ---- CSS3 伪元素选择器 : ::before 选择符 : 在 指定的标签元素内部的 前面 插入内容 ; ::after 选择符 : 在指定的标签元素内部的 后面 插入内容...; CSS3 伪元素选择器注意事项 : content 属性 : 上述两个选择器 必须设置 content 属性 ; 元素类型 : 上述两个选择器 添加 的元素 是 行内元素 ; 如果要为其配置宽高...权重相同 , 权重为 1 ; 区分 伪元素选择器 与 伪类选择器 : 伪类选择器 有一个冒号 , 如 : a:hover 表示鼠标经过 a 标签上的样式 ; 伪元素选择器 有两个冒号 ; 二、CSS3...伪元素选择器权重 ---- 伪元素选择器 的权重 与 标签选择器 权重相同 , 权重为 1 ; 属性选择器 , 伪类选择器 的 权重 , 与 类选择器 权重相同 , 都是 10 ; 参考 【CSS】CSS...特性 ③ ( CSS 优先级 | 权重叠加计算公式 ) 本博客中的 权重公式 ; 权重叠加计算公式示例 : 根据下面的 基础选择器 权重 表格 , 进行权重叠加计算 ; CSS 选择器 选择器优先级
前两天不知道是哪位同学问的问题，鼠标滑过一个div的时候，怎么控制子集元素属性的出现和隐藏，然后我说用用mouseover和mouseout这两个鼠标事件就行，那如果js不怎么熟悉的时候，可以用CSS:...方法： 使用a 控制其他块的样式： 使用a控制a的子元素 b： .a:hover .b { background-color:blue;...} 效果是这个样子的： ?...demo是昨天的基础上写的： <!
如果您想要内联显示代码，那么您应该使用 标签。 第二种是 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 标签。...让我们来看看下面的实例： 实例 <header> 作为内联元素被包围。... 如果需要把代码显示为一个独立的块元素，请使用 <pre> 标签： <article> <h1>Article Heading<...;/h1> </article> 实例展示如下图： ---- 更多实例 元素/类 描述 实例 变量赋值: x = ab + y 尝试一下 按键提示
通过css类选取元素 html所有的元素拥有class属性，该属性会对元素进行分组，标识为某一组。...doctype来进行选择怪异模式，和标准模式的，怪异模式是为了向后兼容而存在的，标准模式不是（兼容以及不太重要了，但是还要知道一点，这是ie8的问题，但愿再过几年直接win7也没有了） 通过css选择器选择元素...css样式表可以进行选择，这里仅仅是一些常见的css选择器 #nav // id = nav 的元素 div // 选择div元素 .warning // 选择class属性为waring的元素 /.../ 基于属性值选取元素 p[lang="fr"] // 所有语言为fr的元素 *[name="x"] // 所有包含name="x"的属性的元素 // 将选择器进行组合使用 span.fatal.error.../ 的子元素中的第一个元素 // 选择器组合选择多个或者组合元素 div, #log // 所有的div元素，以及id为log的元素属于和关系 // 正则选择器 a[src^=
在CSS的探索之旅中，伪类和伪元素无疑为我们的样式设计增添了无限可能。它们不仅能够帮助我们精确地定位文档中的元素，还能实现丰富的交互反馈和视觉效果。...本文旨在深入浅出地探讨CSS伪类与伪元素的核心概念、常见问题、易错点及其规避策略，并通过实例代码加深理解。...双冒号与单冒号的使用 问题描述：CSS3规范中，伪元素推荐使用双冒号(::)，而伪类仍使用单冒号(:)，但在旧版浏览器中，双冒号可能不被支持。...注意事项：保持逻辑清晰，通常先写伪类再写伪元素，并注意CSS特性的优先级规则。 4. 使用content属性 问题描述：在伪元素中忘记使用content属性，导致样式不生效。...掌握它们的关键在于理解其背后的逻辑与应用场景，以及不断实践以避免常见的陷阱。希望本文能成为你探索CSS高级选择器路上的一盏明灯。
CSS基础选择器 标签选择器 就是用标签名来当做选择器。 1） 所有标签都能够当做选择器，比如body、h1、dl、ul、span等等 2） 不管这个标签藏的多深，都能够被选择上。...也就是说，如果有一个p的id叫做haha，这个页面内，其他所有的元素的id都不能叫做haha。 类选择器 .就是类的符号。类的英语叫做class。...另一层面，我们会认为一个有id的元素，有动态效果。...交集选择器 1h3.special{ 2 color:red; 3} 选择的元素是同时满足两个条件：必须是h3标签，然后必须是special标签。 交集选择器没有空格。...h3元素后面紧挨着的第一个兄弟。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
