文档建议反馈控制台
首页
学习
活动
专区
工具
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.7K20

CSS3

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

74590

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; 原理是在父盒子中的第一个元素和最后一个元素添加一个块级元素；图片

65520

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 选择父元素中只包含一个子元素

79230

原生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

22830

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，那么子元素的行高为父元素计算所得的行高值

97220

前端(二)-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（选择器、背景、特性）

父级 子级{属性:属性值;属性:属性值;} 语法： .class h3{color:red;font-size:16px;} ? 当标签发生嵌套时，内层标签就成为外层标签的后代。...其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接 语法： .class>h3{color:red;font-size:14px;} ?...="#">登录 在不修改以上结构代码的前提下，完成以下任务： 链接 登录 的颜色为红色 主导航栏里面的所有的链接改为橙色 主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑...标签以什么方式进行显示，比如div 自己占一行， 比如span 一行可以放很多个 作用： 我们网页的标签非常多，再不同地方会用到不同类型的标签，以便更好的完成我们的网页。...子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性） CSS继承性口诀： 龙生龙，凤生凤，老鼠生的孩子会打洞。

1.9K20

【面试题】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
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

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

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

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

    领券