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

css3基础知识——回顾

css3巩固学习 　　　　　　css_two">css3巩固学习 　　　　结果：第一个和第三个文本会变红 首字符匹配选择器.../p> 　　　　　　css_two">css3巩固学习 　　　　　　css3巩固学习 　　　　结果：第一个第二个文字变为红色，第三个颜色不变...p> 　　　　　　css_two">css3巩固学习 　　　　　　css3巩固学习 　　　　结果：第一个和第三个文字变成红色，第二个颜色不变...2.伪类选择器 指定元素列表中第一个元素:first-child 　　　　语法：li:first-child{} 　　　　示例： 　　　　　　 　　　　　　　　li:first-child...css3巩固 　　　　　　 　　　　结果：第一个li的文字变为红色 指定元素列表中最后一个元素:last-child 　　　　语法：li:last-child{}

91870

selenium之css定位小结

CSS 选择器 常见符号 #表示 id选择器 .表示 class选择器 >表示子元素，层级 一个空格也表示子元素，但是是所有的后代子元素，相当于 xpath 中的相对路径 一、css:属性定位 1.css...，直接翻译过来就是第几个小孩 总结：选择标签后，找第几个小孩即可 Select控件第三个Opel #select>select>option:nth-child(3) CheckBox第一个Volvo...#checkbox>input:nth-child(1) CheckBox第二个Saab #checkbox>input:nth-child(4) RadioBox第二个Saab #radio>input...:nth-child(4) 通过索引nth-of-type(2)来定位子元素，按照分类指定 选择select的saab #select>select>option:nth-of-type(2); 选择...id 为 radio 的 div 下的第 1 个子节点 div#radio>input:nth-of-type(4)+label 选择id 为radio 的div 下的第4 个input 节点之后挨着的

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

    这些 CSS 伪类，你可能还不知道，可以用起来了！

    只有第一个和第二个div有作用，因为它们确实是空的，第三个 div 没有作用，因为它有一个换行。...:first-of-type | 选择指定类型的第一个子元素 :first-of-type表示一组兄弟元素中其类型的第一个元素。...:last-of-type | 选择指定类型的最后一个子元素 :last-of-type CSS 伪类 表示了在（它父元素的）子元素列表中，最后一个给定类型的元素。...nth-of-type() | 选择指定类型的子元素 :nth-of-type() 这个 CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。....innerDiv p:nth-last-of-type(1) { color: orangered; } 这会选择innerDiv元素中包含的类型为p元素的列表中的最后一个子元素。

    1.2K20

    这30个CSS选择器，你必须熟记（下）

    在上两篇文章里，《这30个CSS选择器，你必需熟记（上）》和 《这30个CSS选择器，你必需熟记（中）》这两篇文章里，我们一起学习了前20个，本篇文章我们一起学习剩下的10个选择器。...X:nth-of-type(n)：选择每第n个某种元素选择器 有时候你可能有这样的需求，想通过元素类型type进行选择，而不是子元素 child，你可以考虑 X:nth-of-type(n)，假设有5个无序列表...如果你想定义第三个ul的样式，但又没有id来进行匹配，那么可以使用伪类nth-of-type(n)。...，我们创建一个无序列表的样式，需要加上边框的深度，让层次更明显（分割线），又不想让第一个元素上边框和最后一个元素下边框有线条的感觉，这两个伪类就派上用场了，示例代码如下： ul { width...实现的方法比较多，如下所示： 方案1 ul:first-of-type > li:nth-child(2) { font-weight: bold; } 上述代码，首先找到页面中的第一个无序列表，然后找到它的直接子元素

    55220

    这30个CSS选择器，你必须熟记（下）

    在上两篇文章里，《这30个CSS选择器，你必需熟记（上）》和 《这30个CSS选择器，你必需熟记（中）》这两篇文章里，我们一起学习了前20个，本篇文章我们一起学习剩下的10个选择器。...X:nth-of-type(n)：选择每第n个某种元素选择器 有时候你可能有这样的需求，想通过元素类型type进行选择，而不是子元素 child，你可以考虑 X:nth-of-type(n)，假设有5个无序列表...如果你想定义第三个ul的样式，但又没有id来进行匹配，那么可以使用伪类nth-of-type(n)。...，我们创建一个无序列表的样式，需要加上边框的深度，让层次更明显（分割线），又不想让第一个元素上边框和最后一个元素下边框有线条的感觉，这两个伪类就派上用场了，示例代码如下： ul { width...实现的方法比较多，如下所示： 方案1 ul:first-of-type > li:nth-child(2) { font-weight: bold; } 上述代码，首先找到页面中的第一个无序列表，然后找到它的直接子元素

    75200

    总结CSS3新特性(选择器篇)

    ..就是除了第一个p的所有p,规则同p:not(:nth-of-type(1)),但是权重要低于后者*/} [attribute^=value]: 选择该属性以特定值开头的元素 [attribute$...,通过判断是否有http.com什么的(等到CSS4选择器问世就不用这么麻烦了[:local-link]) :first-of-type与:last-of-type: 从字面大概能看出来是干嘛使得,第一个这个类型的...n个子元素,可以结合选择器来限制 结合变量n(应该说是关键字吧= =),可以用来在表格里,列表里做隔行换色什么的 :nth-last-child(n): 基本同上…只不过是从后往前数 :nth-of-type...(n): 这个跟上边的让我很蛋疼- -这两者的区别一直让人很凌乱,详情看下图 通过w3school上边做的. p:nth-child(2)将父元素中子元素第二个为p的p的颜色设为红色, p:nth-of-type...(2)将子元素中的第二个p背景色设为绿色- -好乱的; 我认为两者的却别在于,nth-of-type计数过滤标签类型,而nth-child计数不过滤; :nth-last-of-type(n): 这个不做解释了

    63240

    【CSS】776- 16个非常有用的CSS伪选择器

    在 RSS 中，则为 RSS 元素. 这个伪类选择器应用于根元素，多用于存储全局 CSS 自定义属性。 5、:empty | 仅当元素为空时触发 这个伪类选择器将选中没有任何子项的元素。...这个规则将应用于第一个和第二个 div，因为他们是真为空，而第三个 div 包含空格。 6、:only-child | 选择仅有的子元素 匹配父元素中没有任何兄弟元素的子元素。...9、:nth-of-type() | 选择特定类型的子元素 这个选择器将从指定的父元素的孩子列表中选择某种类型的子元素。....innerDiv p:nth-of-type(1) { color: orangered; } 10、:nth-last-of-type() | 选择列表末尾中指定类型的子元素 这将选择最后一个指定类型的子元素....innerDiv p:nth-last-of-type() { color: orangered; } 这将选择 innerDiv 列表元素中包含的最后一个段落类型子元素。

    76130

    css3的nth-child选择器的详细探讨

    在那个蛮荒时代,各大浏览器对CSS的支持是相当那啥了.于是,我们为了实现一些效果,比如要控制列表中的最后一个元素,我们会给最后一个元素加上一个CLASS,来方便我们特殊处理.如果要做各行变色这种特殊效果...: #000;} 如上面的CSS所示,如果要选择第三个,就写3即可....选择第三个到第九个之间的奇数行(不包括3\9) ○○○○●○●○○○12345678910 怎么做呢?...是从第一个开始计数的,而nth-last-child是从倒数第一个开始计数的 那么上面的问题,就有答案了. ul.list li:nth-last-child(-n+2){background: #000...(2n){background: #000;} dl.dl dd:nth-of-type(2n+1){background: #06f;} 最后总结 CSS3提供的这些强大的选择器,可以让我们在具体的项目当中

    50510

    更多伪类选择器，丰富你的 CSS 工具箱

    一、更多伪类选择器 伪类选择器在 CSS 中起着至关重要的作用，它们允许你根据元素的特定状态或位置来选择元素，从而实现更加精细的样式控制。...例如在一个列表中，最后一个列表项可以通过这个选择器进行突出显示。 （四）last-of-type 作用：选中同类型元素中的最后一个元素。专注于同类型元素的末尾元素进行样式设置。...示例： li:nth-child(3) { list-style-type: square; } 这里会选中列表中的第三个元素，并将其列表样式设置为方块。...可以根据需要灵活运用这些选择方式来实现不同的布局效果。 （六）nth-of-type 作用：选中同类型元素中的第 n 个元素。与nth-child类似，但只针对同类型的元素进行选择。...示例： p:nth-of-type(2) { font-style: italic; } 此代码会选中页面中第二个元素，并将其字体设置为斜体。

    11710

    总结伪类和伪元素（转）

    直译过来就是：css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。...下面是一个简单的html列表片段： 我是第一个 我是第二个 如果想要给第一项添加样式，可以在为第一个添加一个类，并在该类中定义对应样式...HTML: 我是第一个 我是第二个 CSS: li:first-child { color: orange } 下面是另一个简单的...3n+4匹配位置为4、7、10、13…的子元素。 如下例，有以下HTML列表： ? CSS: 选择第二个元素，”Beta”会变成橙色： ?...8 :nth-of-type :nth-of-type与nth-child相似，不同之处在于它是只匹配特定类型的元素。 如下例，第二个元素会变为橙色。 HTML: ? CSS: ?

    1.5K20

    css选择器中:first-child与:first-of-type的区别

    http://www.cnblogs.com/2050/p/3569509.html :first-child选择器是css2中定义的选择器，从字面意思上来看也很好理解，就是第一个子元素。...p:first-child  匹配到的是p元素,因为p元素是div的第一个子元素； h1:first-child  匹配不到任何元素，因为在这里h1是div的第二个子元素，而不是第一个； span:first-child...  匹配不到任何元素，因为在这里两个span元素都不是div的第一个子元素； 然后，在css3中又定义了:first-of-type这个选择器，这个跟:first-child有什么区别呢？...； span:first-of-type  匹配到的是第三个子元素span。...同样类型的选择器 :last-child  和 :last-of-type、:nth-child(n)  和  :nth-of-type(n) 也可以这样去理解。 分类: css+html

    1.1K10

    CSS3选择器 | 每个前端开发者必须要掌握的技术

    结构性伪类选择器 css中已经定义好的选择器，不能随便起名字 选择符 含义 :root 将样式绑定到页面的根元素中 :not 排除某个选择器样式 :empty 使用该选择器来制定当元素内容为空白时使用的样式...（默认匹配他们得是相同的子元素） nth-of-type(odd)奇数和:nth-of-type(even)偶数：完美解决上面的问题 3.循环使用样式 :nth-child(n)：选取每一行...css伪元素： 对元素中的特定内容进行操作，而不是描述状态 css3为了区分两者伪类使用单冒号，伪元素使用双冒号，但因为兼容问题现在大部分还是用单冒号 8.层级选择器 相邻兄弟选择器： li + li:...e)圆角： border-radius:5px; 如果有两个值：第一个值表示左上角、右下角；第二个值表示右上角、左下角。...如果有三个值：第一个值表示左上角；第二个值表示右上角、左下角；第三个值表示右下角。 f)盒子阴影： box-shadow:5px 5px 10px #f66; 添加多个阴影，用逗号隔开即可。

    74010

    CSS3选择器–结构性伪类选择器

    在学习结构性伪类选择器之前，先了解2个概念：CSS中的伪类选择器和伪元素： 1、伪类选择器：CSS中已经定义好的选择器,不能随便取名 常用的伪类选择器是使用在a元素上的几种...，如a:link|a:visited|a:hover|a:active 2、伪元素选择器：并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器 CSS中有如下四种伪元素选择器...： 1）first-line:为某个元素的第一行文字使用样式； 2）first-letter:为某个元素中的文字的首字母或第一个字使用样式； 3）before:...当某个元素中的子元素不单单是同一种类型的子元素时，使用“E:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。...简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。 案例代码： <!

    55110

    CSS选择器详解

    要使该属性生效，E 元素必须是某个元素的子元素，E 的父元素最高是 body，即 E 可以是 body 的子元素 最重要的是： E 必须是它的兄弟元素中的第一个元素，换言之，E 必须是父元素的第一个子元素... 列表项二 列表项三 列表项四 :nth-last-child(n) CSS3 E:nth-last-child...E:first-of-type { sRules } 匹配同类型中的第一个同级兄弟元素E 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E...(n) CSS3 E:nth-of-type(n) { sRules } 匹配同类型中的第n个同级兄弟元素E 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素...，也就是说E可以是body 该选择符总是能命中父元素的第n个为E的子元素，不论第n个子元素是否为E /* 设置父元素第二个 p 元素为红色，虽然该 p 元素为父元素的第三个元素

    2.9K40

    jQuery :nth-of-type(n)选择器的用法详解

    p元素选择器选择到的p元素指向的父元素中第n个类型为p的子元素，而且与p是否是该父元素的第n个子元素无关，比如父元素有3个子元素，分别是p、span和p，那么:nth-of-type(2)选择到的是第二个...p元素，而不是第二个子元素。...具体的可参考下方实例代码。 重点提示：如果是selector是一个class选择器，那么:nth-of-type(n)匹配选择的必须是class相同且元素类型也一致的所有元素中的第n个元素！...中第一个类型class为c的子元素，因为下方实例中，class为c的div和class为c的段落p都是各自div和p元素集合中的第一个元素，因此都会被选择： css("font-size","2.3em"); }) 原文：[jQuery :nth-of-type(n)选择器 :nth-of-type(n)选择器语法](https

    20621

    如何使用纯 CSS 制作四子连珠游戏

    有时候，预处理程序用于硬编码每个可能的场景，比如 :checked 的长字符串和相邻兄弟选择器。 在本文中，我将介绍使用纯CSS 制作的四子连珠游戏的关键思想。...这些 checkbox 是直接的兄弟类，所以如果选中第一个之后，可以使用 :checked 伪类和相邻兄弟选择器(+)来隐藏两个元素。但是如果选中第二个呢？你可以隐藏第二个，但是怎么才能影响第一个呢？...其次，你不能基于计数器的值在元素上应用 CSS 规则。 我使用二进制解决了第一个问题。计数器的初始值设为 0 。当红色玩家选中 radio 按钮时，计数器加 1。...然后，检测一行中的有四子相连可以用以下方法：选择第一个红色 radio input 被选中的一个列，然后再选择第一个红色 radio input 被选中的相邻同胞列，重复两次。...诀窍不仅在 CSS 中，而且在 HTML 中，下一列必须是上一列中创建嵌套结构的单选按钮的同胞元素。

    2K20

    【 前端相关 网页样式 】总结CSS3中“伪类”与“伪元素”

    直译过来就是：css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。...下面是一个简单的html列表片段： 我是第一个 我是第二个 如果想要给第一项添加样式，可以在为第一个添加一个类，并在该类中定义对应样式...8 :nth-of-type :nth-of-type与nth-child相似，不同之处在于它是只匹配特定类型的元素。 如下例，第二个 元素会变为橙色。...第一个元素中有文本节点，所以其背景不会变成黄色； 第二个元素中有一个空格，有空格则该元素不为空，所以其背景不会变成黄色； 第三个元素中没有任何内容，所以其背景会变成黄色； 第四个元素中只有一个注释...如下例，第一个input的背景不会被设为黄色，第二个input的背景会被设为黄色。

    3.4K70

    一日一技：包含元组的列表，对第一个元素升序第二个元素降序

    9, 3, 7, 4] a.sort() b = [2, 3, 1, 9, 3, 7, 4] c = sorted(b, reverse=True) 运行效果如下图所示： 我们也知道，Python中的元组是可以比较大小的...它的比较方法就是先对第一个元素比较，如果第一个元素相等，再比较第二个元素。...因此对包含元组的列表也可以这样排序，例如： d = [(6, 5), (1, 3), (4, 7), (6, 4), (1, 8), (7, 9)] d.sort() 但现在问题来了，如果要对这个列表排序...，但是需要对元组中的第一个元素升序，第二个元素降序，应该怎么办呢？...例如对如下列表进行排序，按元组第一个元素升序，第二个元素降序： [(6, 'apple'), (1, 'google'), (4, 'future'), (6, 'zero'), (1, 'stand'

    88810
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券