文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS选择器知识点整理

的元素，div[id]就能取到所有有id属性的div | | E[attr = value] | 匹配属性attr值为value的元素，div[id=test],匹配id=test的div | |...E[attr ~= value] | 匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素 | | E[attr ^= value] | 匹配属性attr的值以value开头的元素|...要计算诸如上述复杂场景的优先级，这时候我们可以做个简单的加法运算，id选择器的权值为1000，class选择器为100，标签选择器为10，做一下运算（当然只是为了形象这么说，一万个class选择器加起来也不如一个...id选择器优先级高） 这样我们就能得知第二条的规则优先级高一些，但是还有一种情况： #parent p.class1 div #child.class1 <...div {color: #333;} .... div {color: #666;} 这样div文案的颜色明显会是#666 总而言之判断CSS选择器规则优先级很简单，每个选择器本身有优先级，越具体优先级越高

1K50

【UI自动化-2】UI自动化元素定位专题

litter brother 以上面代码为例： 1、通过父级节点查找子级节点 By.xpath("//div...[@id='parent']/div[2]") 2、通过子级节点查找父级节点 By.xpath("//div[@id='B']/..") 3、通过兄弟节点定位 By.xpath("//div[@id='...7.1 css类与id选择器 id选择器以 # 来定义，class类选择器以一个.显示，有以下几种例子： 选择id为myId的元素：By.cssSelector("#myId") 选择id为myId...伪类选择器 这种选择器，要求目标元素必须有父级元素，且符合位置匹配条件，具体如下： E:nth-child(n)和E:nth-last-child(n)：两者的区别是前者正序计数，后者倒序计数。...其次，这两个选择器定位的元素要求必须在某个父级标签内，且其父级标签内对应索引n的元素的类型必须为E，否则匹配失败。

1.7K30
您找到你想要的搜索结果了吗？
是的
没有找到

CSS基础（二）

伪元素 概念：使用CSS模拟标签，创建网页中不重要的图 用法：找父级，在父级中添加子标签 伪元素 作用 ::before 在父元素内容最前添加一个伪元素 ::after 在父元素内容最后添加一个伪元素...：鼠标定位时的状态 input:focus{ background-color: pink; } 三、结构伪类选择器： 作用：通过结构找到目标标签或者文本 匹配父元素中的第...二、相对定位 占有原来的位置 仍然具有具体标签原有的显示模式特点 改变的位置是参照自己原来的位置 三、绝对定位...先找已经定位的父级（一般是 相对定位），以这个父级为参照物 子绝父相 就近找定位的父级，如果逐层找不到这样的父级，就以浏览器窗口为参照物定位。...如果父级没有定位，那么以浏览器窗口为参照物。

1.8K20

CSS3

与transform 这里需要记住的是transform中translate使用百分比时相对的是自己的长宽，不是父盒子的。...但是若不换行，全部标签放一行，大大降低了代码的可读性和难度。所以就引入了浮动。 ---- 结构伪类选择器 根据元素在HTML中的结构关系查找元素,查找某父级选择器中的子元素....例如：a，input，span…… 2.浮动 可以让原本垂直布局的 块级元素变成水平布局,子元素嵌入进父元素上方，父元素内容环绕浮动子元素，上方有介绍，类似于图层的概念或微软word中图片环绕文字四周概念...(后来者居上；div1添加z-index: 1;会让第一个块盖住第二个块) ---- 绝对定位 position:absolute; 需要找父级(子绝对定位，父相对定位。...—>子绝父相)： 1.若父级(/爷级…..)有定位属性，根据父级为参照进行定位 2.若父级无定位属性，根据浏览器窗口进行定位 且具备了行内块特点，可设置宽高。 在页面中不占位置—>已经脱标。

74990

CSS中关于元素居中的方法总结（超全）

父级的标签，高度和行高一致 p{ height: 200px; line-height: 200px; border: 1px solid red; font-size: 16px;...子标签, 设置为行内块级元素，垂直居中，且单独设置行高 注：line-hight:1 ; 这里的1指与父级的字体大小相同，你可以可以直接写具体的px p span{ display: inline-block...，只是宽度不确定， 所以就采用了position:relative; , right:50%; 而right：50%， 其实就是向左移动宽度的一半， 这里的百分比是以父级的宽度计算的 2....垂直居中 方法1： 设置父元素相对定位，子元素position: absolute;top: 50%;同时margin-top值为-(子元素高度的一半)，因为设置top值时是相对于盒子顶部，所以想要居中还要往上移动半个盒子的高度才能实现...，子元素为绝对定位，同时设置子元素的top,bottom,left,right值为0，最后设置margin:auto;这能实现块元素的垂直+水平居中，看代码： <!

2.2K20

HTML+CSS基础

《为了让文字与文字之间不会粘在一起》，所以文字大小以高为准）      8、空格大小：字体格式为宋体时，空格大小是当前文字大小的一半；字体格式不一样，空格大小不一样！...2.2     margin问题                2.2.1     margin-top传递问题：父子级包含的时候，子级的margin-top会传递给父级，解决办法：给父级加上border...               2.2.2     margin叠压问题，见2.1                2.2.3     margin-bottom 无效问题，有时候需要设置某块级元素在该父类的底部显示...2.2.3.3         如果目标元素下方没有其他同辈元素，为什么margin-bottom:0不代表它在父元素的底部？...li  五、常用选择器      1、ID选择器，当前页面具有唯一性     #id      2、类（class）选择器，统一标签设置多个类，用空格分割     .class      3、标签选择器

2.7K91

从头学前端-CSS基础03

，给父元素添加属性text-align: center --- > 嵌套关系的块级元素垂直外边距的塌陷问题；在父元素和子元素同时具有margin-top属性时，以最大值为准； 解决方式有：给父元素 >...- 如果多个盒子都添加了浮动，那么所有浮动的盒子将会在一行内显示，并且顶端对齐；- 浮动的元素是互相紧贴到一起，如果父级元素的宽度装不下元素，浮动元素会另起一行靠左排列 浮动元素会具有行内块元素的特点-...;这个时候就需要清除服务，就是清除浮动元素的影响；清除浮动后，父元素就会根据浮动的子元素自动计算高度；语法：图片清除浮动的方法：- 清除浮动的策略是闭合浮动，只让浮动在父元素内影响，不影响父盒子外面的盒子...；- 额外标签法：在最后一个浮动元素的后面添加一个元素，添加样式属性 div style= "clear:both"></div；会添加多个无意义的标签- 父级添加overflow属性，设置为auto...,hidden 或scroll- 父元素添加：after伪类； 不需要添加额外标签，- 给父元素添加 双伪元素；before和after; 原理是在父盒子中的第一个元素和最后一个元素添加一个块级元素；图片

66020

原生CSS嵌套简介

的直接子元素进行样式调整 :is(p) - 但是:is()使用最优先选择器的优先级 :where(p) - 但是:where()的优先级为0 在这个简单的示例中，它们都可以工作，但在以后使用更复杂的样式表时...&还允许你在父选择器上定位伪元素和伪类。...例如： p.my-element { &::after {} &:hover {} &:target {} } 如果你不使用&，你的目标将是选择器的所有子元素，而不是p.my-element.../div> 由于CSS解析器会执行以下操作，因此MATCH会改变样式： 在DOM层次结构中的任意位置，找到所有类为child的元素，同时祖先元素的类为parent。...最后，Sass使用字符串替换，所以像下面这样的声明是有效的，可以匹配任何具有outer-space类的元素： .outer { &-space { color: black; } } 而原生CSS

24530

CSS入门5-选择器

a>以外的其他元素设置伪类) 3、目标伪类:target(IE8-不支持) 匹配锚点对应的目标元素 :target{color: red;} #test :target{color: red;}//id...为test的目标元素 4、UI元素伪类(IE8-不支持) :enabled 可用状态 :disabled 不可用状态 :checked 选中状态 示例 input:enabled{color...(n) 选择父元素的第n个子元素，父元素是E，子元素是F E F:nth-last-child(n) 选择父元素的倒数第n个子元素，父元素是E，子元素是F E F:nth-of-type(n) 选择父元素的具有指定类型的第...n个子元素，父元素是E，子元素是F E F:nth-last-of-type(n) 选择父元素的具有指定类型的倒数第n个子元素，父元素是E，子元素是F E:first-of-type 选择父元素中具有指定类型的第...1个子元素，与E:nth-of-type(1)相同 E:last-of-type 选择父元素中具有指定类型的最后1个子元素，与E:nth-last-of-type(1)相同 E:only-child 选择父元素中只包含一个子元素

80030

CSS-02

子元素选择器只能选择作为某元素**子元素(亲儿子)**的元素。 其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接 这里的子指的是亲儿子不包含孙子,重孙子之类。 <!...# CSS继承性 所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。 注意： 1....即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。 行内样式优先。...important都具有最大优先级。...继承或者* 的贡献值 0,0,0,0 每个元素（标签）贡献值为 0,0,0,1 每个类，伪类贡献值为 0,0,1,0 每个ID贡献值为 0,1,0,0 每个行内样式贡献值 1,0,0,0 每个!

2K30

掌握这些CSS知识点，Coding如飞！

div的高度并未按照我们预想那样撑满全屏高度 高度100%并未铺满屏幕 代码&效果：https://codepen.io/DYBOY/embed/RwoJKRP block类的父级（包含块）是body...div盒子的高度无效，height为0，即在浏览器上无渲染高度 浏览器的渲染规则可理解记忆为：深度优先遍历计算 子元素的相对单位的计算值都是基于父/祖先元素对应的属性值，auto是基于内容区域撑开计算所得...如果任一长度为零，则角为正方形，而不是圆角。 水平半径的百分比是指边框的宽度，而垂直半径的百分比是指边框的高度。.../post/6960866014384881671 2.3.1 实例&解决方案 2.3.1.1 父子高度塌 父级margin，子级的margin-top无效 高度塌陷 代码&演示：https://codepen.io...line-height高度，line-height规定的是行高最小的的高度 line-height是相对单位时，line-height具有继承性，其子元素如果没有设置line-height，那么子元素的行高为父元素计算所得的行高值

97620

前端(二)-CSS

父元素的第一个子元素 E:last-child 父元素的最后一个子元素 E F:nth-child(n) 父元素的第nth的子元素(括号里面的n可以是1，2，3 even,odd) E:first-of-tyope...父元素指定类型的第一个子元素 E:last-of-type 父元素指定类型的最后一个子元素 E F:nth-of-type(n) 父元素指定类型的第nth的子元素 2.2.3 属性选择器 属性选择器...功能描述 E[attr] 选择具有属性attr的元素 E[attr=val] 选择具有属性attr的元素，且属性值为val的元素 E[attr^=val] 选择具有属性attr的元素，且属性值以val...开头的元素 E[attr$=val] 选择具有属性attr的元素，且属性值以val结尾的元素 E[attr*val] 选择具有属性attr的元素，且属性值中包含val的元素 3、美化网页元素 3.1...父级添加伪类after <img src="image/photo-1.jpg" alt

1.8K20

Imooc之Html与CSS

子选择器， .span>li{}，作用于父元素span类下一层的li标签。 包含选择器，.span li{}，作用于父元素span下所有li标签。...如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。 a{display:block;} 块级元素特点： 每个块级元素都从新的一行开始，并且其后的元素也另起一行。...（真霸道，一个块级元素独占一行） 元素的高度、宽度、行高以及顶和底边距都可设置。 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。...当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。...（真霸道，一个块级元素独占一行） 2、元素的高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

6.7K20

前端面试题2（CSS）

优先级就近原则，同权重情况下样式定义最近者为准 载入样式以最后载入的定位为准 优先级为: !...important > id > class > tag important 比 内联优先级高 CSS3新增伪类有那些？...px 相对于显示器屏幕分辨率，无法用浏览器字体放大功能 em 值并不是固定的，会继承父级的字体大小： em = 像素值 / 父级font-size 解释下什么是浮动和它的工作原理？...视差滚动是指多层背景以不同的速度移动，形成立体的运动效果，具有非常出色的视觉体验 一般把网页解剖为：背景层、内容层和悬浮层。...例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px 百分比：将计算后的值传递给后代 设置元素浮动后，该元素的 display 值会如何变化？

2.8K11

【面试题】CSS知识点整理(附答案)

7. em rem vh vw calc(), line-height 百分比 em em: 相对单位，参考物是父元素的font-size，具有继承的特点。...[13] 9.清除浮动方法及原理 为什么要清除浮动：父元素因为子级元素浮动引起的内部高度为0的问题。...清除浮动常用的四种方式： 父级div定义height 额外标签法：在有浮动的父级元素的末尾插入了一个没有内容的块级元素div 并添加样式clear:both。...利用伪元素：父级div定义 伪类:after，我们可以写一个.clearfix 工具样式，当需要清除浮动时，就为其加上这个类 .clearfix:after { display: block; clear...共同点：三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。

1.5K40

CSS-03

# 嵌套块元素垂直外边距的合并 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并...# CSS继承性 所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。 注意： 1....也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。 CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!...important都具有最大优先级。...继承或者* 的贡献值 0,0,0,0 每个元素（标签）贡献值为 0,0,0,1 每个类，伪类贡献值为 0,0,1,0 每个ID贡献值为 0,1,0,0 每个行内样式贡献值 1,0,0,0 每个!

2K30
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券