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

HTML5新特性

结构伪类选择器 结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素属性选择器.png 结构伪类选择器-01.png E:first-child 匹配父元素的第一个子元素E...匹配父元素的第n个子元素E，也就是说，nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配 E:nth-of-type(n) 匹配同类型中的第...先去匹配E ，然后再根据E 找第n个孩子 小结 结构伪类选择器一般用于选择父级里面的第几个孩子 nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配...先去匹配E ，然后再根据E 找第n个孩子 关于 nth-child（n） 我们要知道 n 是从 0 开始计算的，要记住常用的公式 如果是无序列表，我们肯定用 nth-child 更多 类选择器、属性选择器...单伪元素.png 双伪元素.png 盒子模型（★★★） CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变

2.3K41

网络编程（五）之HTML5和CSS3提高

一、 HTML5的新特性 HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。 1.1 HTML5 新增的语义化标签 以前布局，我们基本用div 来做。...属性选择器(权重为10) 结构伪类选择器(权重为10) 伪元素选择器(权重为1) 2.1 属性选择器 属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器。...">我是哥斯拉 哪我是谁 ​ 2.2 结构伪类选择器 结构伪类选择器主要根据文档结构来选择器元素...1个孩子 我是第2个孩子 我是第3个孩子 我是第4个孩子 我是第5...父级添加双伪元素 【4】CSS3盒子模型 CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border- box，这样我们计算盒子大小的方式就发生了改变

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

CSS笔记(20) 非常重要

结构伪类选择器 结构伪类选择器主要根据文档结构来选择元素,常用于根据父级选择器里面的子元素(第三个是重点!)...小结: 结构伪类选择器一般用于选择父级里面的第几个孩子. nth-child对父元素里面所有孩子排序(序号是固定的),先找到第n个孩子,然后看看是否和E匹配. nth-of type对父元素里面指定子元素进行排序选择....先去匹配E,然后再根据E找到第n个孩子....关于nth-child(n)我们要知道n是从0开始计算的,要记住常用的公式 如果是无序列表,我们肯定用nth-child更多. 权重问题.类选择器,伪类选择器,属性选择器的权重都是10....用一张图来解释:假设放了一个div盒子,然后写上div::before{},那么就是在div里面的前面放了一个新盒子,after同理,在div盒子里面的后面放了一个新盒子. <!

45120

CSS counter-increment计数器自动递增

④ 理解了“普照规则”，则以我们通常的计数器递增效果也可以理解了。 考虑下面这两个问题： 爸爸受到普照，且重置默认值0，爸爸有2个孩子。孩子自身都没有普照。两个孩子的计数值是？...爸爸没有普照，重置默认值0，爸爸有2个孩子。孩子自身都接受普照。两个孩子的计数值是？ 答案是：1,1和1,2! 哦？答案居然不一样，有什么差别呢？ 很简单。什么爸爸，孩子你都不要关心。...情况1就爸爸被普照，因此，计数器增加1次，此时两个孩子的counter自然都是1; 情况2，两个孩子被普照，普照2次，第1个孩子普照之时，计数器+1，也就是1；第2个孩子普照之时再+1，于是就是2.... 我是王小三 我是王小四 <div class="reset...所以，我们可以在头尾放两个差距甚远的列表，然后，这些列表自动显示序号。而ol/ul只能写死start实现，很不灵活，一旦列表有删减，就嗝屁了。 由于计数器是伪元素控制显示的。

1.7K20

HTML5和CSS3提高

这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这 些新特性。 1.HTML5 新增的语义化标签 以前布局，我们基本用 div 来做。...2.结构伪类选择器 结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素 3.结构伪类选择器 nth-child（n） 选择某个父元素的一个或多个特定的子元素（重点） n 可以是数字...0 个元素或者超出了元素的个数会被忽略 ) 结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素 区别： nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第...先去匹配E ，然后再根据E 找第n个孩子 4.伪元素选择器（重点） 伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。...来指定盒模型，有2个值：即可指定为 content-box、border-box，这样我们 计算盒子大小的方式就发生了改变。

95440

css 指定孩子节点样式设置

我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情 作为一个前端，我经常遇到list展示的需求。...如果是设置一个list孩子节点的样式，我可能会这样写 .list{ } // 一般我list的child是div .list > div { } 但是遇到排名次的需求，前三名要用框框框柱,经常要写这样的代码...>啊 })} 我就思考，css伪类里面有:first-child和:last-child 。...那会不会有控制某个范围child的伪类呢？ 查了一下，发现还真有，那就是:nth-child。 它的使用方式是:nth-child(An+B)。...('app')); 我看下代码，运行起来的效果 css 指定孩子节点样式设置 从之前代码解决，变成css解决后，代码感觉更加清爽了，写代码的速度也更快了。

1.6K10

css笔记

（难) 伪类选择器 伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。...伪娘 类 .one 伪类 :link 为了和我们刚才学的类选择器相区别， 类选择器是一个点 比如 .demo {} 而我们的伪类 用 2个点 就是 冒号 比如 :link{} 链接伪类选择器...前面我们说过，网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？ CSS的定位机制有3种：普通流（标准流）、浮动和定位。...，不论元素的类型 :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。...{ /* 最后一个孩子 */ color: purple; } li:nth-child(4) { /* 选择第4个孩子 n 代表

7.7K50

前端成神之路-CSS（选择器、背景、特性）

即…又…的意思 比如： p.one 选择的是： 类名为 .one 的 段落标签。 用的相对来说比较少，不太建议使用。...1.5 链接伪类选择器（重点） 伪类选择器： 为了和我们刚才学的类选择器相区别 类选择器是一个点 比如 .demo {} 而我们的伪类 用 2个点 就是 冒号 比如 :link{} 伪娘 作用： 用于向某些选择器添加特殊的效果...比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。 因为伪类选择器很多，比如链接伪类，结构伪类等等。我们这里先给大家讲解链接伪类选择器。...注意： 只有 文字才 能组成段落 因此 p 里面不能放块级元素，特别是 p 不能放div 同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素...比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。

1.9K20

CSS选择器详解

，即E可以是html的子元素，也就是说E可以是body 该选择符总是能命中父元素的第n个为E的子元素，不论第n个子元素是否为E /* 设置父元素第二个 p 元素为红色，虽然该 p...html的子元素，也就是说E可以是body 该选择符总是能命中父元素的倒数第n个为E的子元素，不论倒数第n个子元素是否为E p:nth-last-of-type(1) {...--我是一个空节点p，请注意我与其它非空节点p的外观有什么不一样--> 结构性伪类选择符 E:empty :checked CSS3 E:checked {...仅用于@page规则 该伪类选择符只允许定义margin, orphans, widows 和 page breaks相关属性 @page :left { sRules } 设置页面容器位于装订线左边的所有页面使用的样式...仅用于@page规则 该伪类选择符只允许定义margin, padding, border 和 background属性 @page :right { sRules } 设置页面容器位于装订线右边的所有页面使用的样式

2.8K40

web前端面试中10个关于css高频面试题,你都会吗?

，对于HTML文档，就是HTML元素 E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1 E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1 E...优点: 简单, 代码少, 浏览器支持好 缺点: 不能和position配合使用, 因为超出的尺寸会被隐藏overflow:hidden 使用CSS的:after伪元素 结合 :after 伪元素（注意这不是伪类...给浮动元素的容器添加一个 clearfix 的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。...通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格"020"或点"."，并且赋予clear属性来清除浮动。...用纯CSS创建一个三角形的原理是什么 之前写三角形, 都是直接记住代码,没有探究原因,我也是直到有一次面试时,面试大哥让我说说css创建三角形的原理,我就......回来就赶紧翻资料.接下来我就将当时我理解的过程列举出来

2.8K20

148道 CSS 与 JavaScript 基础面试题

::before 和 :after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。 相关知识点： 单冒号（:）用于CSS3伪类，双冒号（::）用于CSS3伪元素。...也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。 伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。...可以，但也只有 :link 和 :visited 可以交换位置，因为一个链接要么访问过要么没访问过，不可能同时满足，也就不存在覆盖的问题。 8. CSS3 新增伪类有那些？...elem:nth-child(n) 选中父元素下的第n个子元素，并且这个子元素的标签名为elem，n可以接受具体的数值，也可以接受函数。...默认值为auto，表示继承父元素的align-items 属性，如果没有父元素，则等同于stretch。 14. 用纯 CSS 创建一个三角形的原理是什么？ 采用的是相邻边框连接处的均分原理。

1.1K20

前端硬核面试专题之 CSS 55 问

父级 div 定义 display: table 。 父级 div 定义 伪类 :after 和 zoom 。...---- CSS 选择符有哪些 ？哪些属性可以继承 ？优先级算法如何计算 ？新增伪类有那些 ？...---- ::before 和 :after 中双冒号和单冒号有什么区别 ？解释一下这 2 个伪元素的作用 单冒号 (:) 用于 CSS3 伪类，双冒号 (::) 用于 CSS3 伪元素。...大家要注意 html 中必须使用 div 标签，不要妄图使用什么 p 标签来达到目的。因为 div 有个默认属性，即如果不设置宽度，那它会自动填满它的父标签的宽度。这里的 main 就是例子。...戳 阅读原文，获取原文地址（能查阅外链）。 如果觉得本文还不错，记得给个 star ， 你的 star 是我持续更新的动力。

2K20

CSS基础之伪类选择器的总结

在这篇博客中，我会结合具体例子来分析伪类选择器（可能概念性不是很强，但是好用 ~ ） 属性选择器 input[value] 意思是选择的input标签，必须具有value属性 input[type=text...但低于div .box…） 结构伪类选择器 ul:first-child 选择ul中的第一个孩子 ul li:first-child 选择ul中的第一个li ul:last-child 选择ul中的最后一个孩子...ul:nth-child(n) 选择ul中的第n个孩子 n可以是数字、关键字、公式 n的用法： n=2 选择第二个孩子 n 可以是关键字：even偶数，odd奇数 n 可以是公式， 例如ul li:nth-child...(n) 意思是从第0个孩子开始（但是注意 第0个孩子是不存在的），逐次加1，选中所有的 例如ul li:nth-child(2n+1) 意思是n从0开始，选中序号为2*n+1 的孩子 ul:first-of-type...因为nth-child在修改样式的时候，会先给ul中的孩子排序，即p为1，div为2，div为3，然后去看nth-child中的数字，发现第一个孩子是p，然后去找前面需要匹配的标签 （此例中为div），

65940

伪元素的妙用–单标签之美

:before和::before的区别 在介绍具体用法之前，简单介绍下伪类和伪元素。伪类大家听的多了，伪元素可能听到的不是那么频繁，其实 CSS 对这两个是有区分的。...（补充于2016.06.28） 我也是才知道这个姿势。为了不误导读者，就赶紧补充一下。 伪元素虽然强大，但是还是有一些特定的标签是不支持伪元素 before 和 after 的。...所以通常这种情况需要用到雪碧图的话，都是在按钮中设置一个伪元素，将伪元素的高宽设置为原本 icon 的大小，再利用绝对定位定位到需要的地方，这样无论雪碧图每个 icon 的边距是多少，都能够完美适应。...用 CSS3 transfrom 属性，我们可以轻松的得到一个梯形，菱形或者平行四边形。有时我们设计师们希望在这些容器内配上文字，譬如平行四边形可以表达一种速度之感。...但在项目中，有需求是需要让行级元素也自动换行的，通常这种情况，我都是用 换行标签解决。

77610

【CSS进阶】伪元素的妙用--单标签之美

:before和::before的区别 在介绍具体用法之前，简单介绍下伪类和伪元素。伪类大家听的多了，伪元素可能听到的不是那么频繁，其实 CSS 对这两个是有区分的。 ? ?...有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持这两种表示方式。...所以通常这种情况需要用到雪碧图的话，都是在按钮中设置一个伪元素，将伪元素的高宽设置为原本 icon 的大小，再利用绝对定位定位到需要的地方，这样无论雪碧图每个 icon 的边距是多少，都能够完美适应。...所以，我们用 before 伪元素生成一个与按钮大小一致的黑色半透明层 rgba(0,0,0,.2)，在 .btn:hover:before 时显示，用 after 伪元素生成一个与按钮大小一致的白色半透明层...但在项目中，有需求是需要让行级元素也自动换行的，通常这种情况，我都是用 换行标签解决。

1.1K120

css之选择器

可以通过标签的属性来选择元素 ?...(n) 匹配其父元素的第N个子元素，第一个标号为1，相当于E:first-child E:nth-last-child(n) 匹配其父元素的倒数第N个子元素，第一个编号为1 小tip：先找到E的父元素...，再选择它父元素下面第n个元素 E:nth-of-type(n) 选择满足E选择器的元素的父元素内，满足E选择器条件的子元素中不同种类型（类型是指标签，如p标签和div标签是不同种类型）第N...个子元素 小tip：先找到E的父元素，再选择它父元素下面满足E条件的元素，再选择这些元素同种类型的第N个 E:nth-last-of-type(n) 与nth-of-type(n) 作用类似，但是倒着匹配的...小tip：先找到E的父元素，再选择它父元素下面满足E条件的元素，再倒着选择这些元素同种类型的第N个 E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type

74140
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

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

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

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

    领券