第n个子选择器在媒体查询中不起作用 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

你知道在 JavaScript 中也能使用媒体查询吗

但你知道我们对JavaScript也有媒体查询吗? 我们可能在JavaScript中并不经常看到它们，但在过去的几年里，我发现它们对于创建响应式插件(如滑块)很有帮助。...例如，在某个分辨率下，您可能需要重新绘制和重新计算滑块项目。在JavaScript中处理媒体查询与在CSS中处理媒体查询是非常不同的，尽管概念是相似的:匹配一些条件并应用一些东西。...Using matchMedia() 为了确定文档是否与JavaScript中的媒体查询字符串匹配，我们使用matchMedia()方法。...因此，虽然它确实模仿了“媒体查询”的行为，允许我们匹配视口宽度，但它不能匹配任何其他东西-我们知道，真正的媒体查询有这么多的能力。结论这就是JavaScript中的媒体查询!...这种方法在开发HTML5游戏时很常见，在移动设备上观看效果最好: 结论这就是JavaScript中的媒体查询!

4K3 0

css媒体查询aspect-ratio宽高比在less中的使用

css媒体查询有一个宽高比很方便，aspect-ratio ，可以直接使用宽/高来进行页面适配使用样例如下： // 宽高比在(（320/50）+(728/90))/2 两个尺寸中间值以内...{ display: none; } } } } 注意三点： 1、宽高比一定是比值的形式，不能直接写小数，宽/高 2、在less...中直接写宽高比也不会生效，因为less会编译成小数，可以在比值前面加一个 ~ 完美解决 3、避免样式覆盖，最好把大比例的媒体查询写在后面参考链接： https://developer.mozilla.org.../zh-CN/docs/Web/Guide/CSS/Media_queries 媒体查询 http://www.zhangyunling.com/837.html device-aspect-ratio...aspect-ratio单屏布局 https://stackoverflow.com/questions/50465331/scss-media-query-aspect-ratio-not-working scss中不生效

3.1K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

在shell程序里如何从文件中获取第n行

我一直在使用 head -n | tail -1，它可以做到这一点，但我一直想知道是否有一个Bash工具，专门从文件中提取一行(或一段行)。所谓“规范”，我指的是一个主要功能就是这样做的程序。...答：有一个可供测试的文件，内容如下：使用 sed 命令，要打印第 20 行，可写为 sed -n '20'p file.txt sed -n '20p' file.txt 测试截图如下：要打印第...8 到第 12 行，则可用命令 sed -n '8,12'p file.txt 如果要打印第8、9行和第12行，可用命令 sed -n '8p;9p;12p' file.txt 对于行数特大的文件...，为了提高处理速度，可采用类似如下命令 sed '5000000q;d' file.txt tail -n+5000000 file.txt | head -1 需要关注处理性能的伙伴可以在上述命令前加上...其他可实现相同效果的命令工具还有 cut, awk, perl 等： cut -f23 -d$'\n' file.txt awk 'NR == 23 {print; exit}' file.txt perl

4532 0

常用的CSS3选择器

三、结构化伪类选择器 :root选择器 :root选择器用于匹配文档根元素，在HTML中，根元素始终是html元素。也就是说使用“:root选择器”定义的样式，对所有页面元素都生效。...:nth-child(n)和:nth-last-child(n)选择器使用:first-child选择器和:last-child选择器可以选择某个父元素中第一个或最后一个子元素，但是如果用户想要选择第...2个或倒数第2个子元素，这两个选择器就不起作用了。...n 个子元素和倒数第n个子元素，而:nth-child(n)和:nth-last-child(n)选择器用于匹配属于父元素的第 n 个子元素和倒数第n个子元素，与元素类型无关。...:after选择器 :after伪元素选择器用于在某个元素之后插入一些内容，使用方法与:before选择器相同。五、链接伪类 1.链接伪类在CSS中，通过链接伪类可以实现不同的链接状态。

4.1K2 0

CSS3---first-child或者nth-child(1) 不起作用的原因

一、零碎 1、first-child、last-child、nth-child(n)、nth-child(2n)、nth-child(2n-1)、nth-child(odd)、nth-child...(even)、nth-last-child(3)（倒数第三个）注意点：选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 ...1、先找到该伪类调用者（元素）的父类 2、其次找到父类下的第n个子元素 3、最后看该子元素是不是1中的伪类调用者，如果是，则应用css，否则不应用 ...----》有时候first-child或者nth-child(1) 不起作用的原因 /*此时first-child不起作用，是因为.tap_con的父元素win的第一个子元素是.top，此时找到第一个子元素

3K5 0

CSS高级选择器

他们之间用宫格隔开我们选择该标签的时候可以.a.a-1,也有.a,也可以.a-1 常用的两个伪类选择器伪类选择器都是用:连接的类名:nth-child(N):先确定位置，再筛选选择器在同一结构下都是相同选择器时使用...类名:nth-of-type(N):先确定选择器，在匹配位置在同一结构下不全是相同选择器时使用举例第2个,然后让他变色成红色,如果第二个不是p他就不起作用--> p:nth-of-type(3){ color:red } 不起作用--> 二.后代(子代)选择器后代选择器: CSS语法:上一级标签他所有的后代用宫格进行连接子带选择器...[属性名*=值]包含某某值(模糊查询) 五.交叉选择器就是把上述的选择进行组合,包括之前讲的基础选择器六.群组选择器就是把上述的选择器用包括之前讲的基础选择器,隔开从而选择多个元素七.选择器的优先级

8243 0

CSS 常见面试题速查

匹配文档的根元素，对于HTML文档，就是HTML元素 E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1 E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素...# 关于媒体查询是什么媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制样式表范围的表达式组成，例如宽度、高度和颜色媒体查询在 CSS3 中出现，允许内容的呈现针对一个特定范围的输出设备而进行裁剪...怎么使用媒体查询包含一个可选的媒体类型和，满足 CSS3 规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为 true 或 false 如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型...，并且所有表达式的值都是 true，那么该媒体查询的结果为 true，那么媒体查询内的样式会生效。...-- link 元素中的 CSS 媒体查询 --> <!

9111 0

CSS选择器

:first-child和last-child选择器 :first-child选择器和:last child选择器分别用于为父元素中的第-个或者最后一个子元素设置样式。...:nth-child(n)和nth-last-child(n)选择器使用:first- child选择器和:last- child选择器可以选择某个父元素中第-一个或最后一个子元素，但是如果用户想要选择第...2个或倒数第2个子元素，这两个选择器就不起作用了。...:nth-of-type(n)和:nth-last-of-type(n)选择器这两种选择器的不同之处在于:nth-of-type(n)和:nth-last-of-type(n)选择器用于匹配属于父元素的特定类型的第...n个子元素和倒数第n个子元素，而:nth-child(n)和:nth-last-child(n)选择器用于匹配属于父元素的第n个子元素和倒数第n个子元素，与元素类型无关。

2.5K1 1

sqlserver 查找某个字符在字符串中第N次出现的位置

例如：查找'A,' 在'A,B,C,D,A,B,C,D,C,D,B,A,C,E,'中第二次出现的位置怎么实现,SQL 中有这样的函数吗？...SQL code /* 方法很多，这里简单写一个返回@find在@str中第(@n)次出现的位置。没有第(@n)次返回0。...*/ create function fn_find(@find varchar(8000), @str varchar(8000), @n smallint) returns int as begin...if @n < 1 return (0) declare @start smallint, @count smallint, @index smallint, @len smallint...index = 0 return (0) else select @count = 1, @len = len(@find) while @index > 0 and @count n

6.7K1 0

CSS基础知识

-- 结果属于第 n 个子节点(单数节点：odd，偶数节点：even) --> selector:nth-child(n) { ...查找第n个子selector，后同。 } 第 an+b 个子节点(n从0开始的递增值，a、b为数字。) --> selector:nth-child(an+b) { ... } 第 n 个子节点(单数节点：odd，偶数节点：even) --> selector:nth-of-type(n) { ... } 第 an+b 个子节点(n从0开始的递增值，a、b为数字。)...媒体查询 WC太多了，基础篇写到这里。上厕所去了，其他内容后续再介绍。

1731 0

「HTML&CSS」第一部分

IE9 浏览器中，需要把语义化标签都转换为块级元素语义化标签，在移动端支持比较友好，另外，HTML5 新增的了很多的语义化标签，随着课程深入，还会学习到其他的三、多媒体音频标签多媒体标签有两个，...-- 注意：在 chrome 浏览器中已经禁用了 autoplay 属性 -->

2942 0

HTML5新特性

多媒体标签分为音频 audio 和视频 video 两个标签使用它们，我们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的flash和其他浏览器插件了。...（★★★）匹配到父元素的第n个元素匹配到父元素的第2个子元素 ul li:nth-child(2){} 匹配到父元素的序号为奇数的子元素 ul li:nth-child(odd){} odd 是关键字...3){} 选择器中的 n 是怎么变化的呢？...匹配父元素的第n个子元素E，也就是说，nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配 E:nth-of-type(n) 匹配同类型中的第...先去匹配E ，然后再根据E 找第n个孩子小结结构伪类选择器一般用于选择父级里面的第几个孩子 nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配

2.3K4 1

前端成神之路-HTML5CSS3_01

使用语义化标签的注意 - 语义化标签主要针对搜索引擎 - 新标签可以使用一次或者多次 - 在 `IE9` 浏览器中，需要把语义化标签都转换为块级元素 - 语义化标签，在移动端支持比较友好， - 另外...，`HTML5` 新增的了很多的语义化标签，随着课程深入，还会学习到其他的三、多媒体音频标签多媒体标签有两个，分别是音频 – audio 视频 – video audio 标签说明可以在不使用标签的情况下...-- 注意：在 chrome 浏览器中已经禁用了 autoplay 属性 --> 选择器(上) 八、CSS3 属性选择器(下) 九、结构伪类选择器十、nth-child 参数详解 nth-child 详解注意：本质上就是选中第几个子元素 n 可以是数字...; } /* n + 5 就是从第5个开始往后选择 */ ul li:nth-child(n + 5) { background-color: peru; } /* -n

4511 0

CSS 01 准备选择器、伪元素

CSS3 浏览器支持情况网址查询：caniuse.com CSS3的伪类选择器（一）动态伪类选器 a:link{} a:visited{} a:hover{} a:active{} UI元素状态伪类选择器... html部分： // disable 是状态 CSS部分：（根据状态确定样式） input :enable{} input:disable{} CSS3的伪类选择器（二）结构伪类选择器...(2n){} 元素的第偶数个子元素选中 li:nth-child(2n+1){} 元素的第奇数个子元素选中 li:nth-child(n+5){}...元素从第5个子元素开始选中 li:nth-child(4n+1){} 元素每4个元素选中 li:nth-last-child(){} 选中顺序从右往左...li:only-of-type{} 选择的元素是它父元素只有一个子元素，但是限制子元素的标签类型为li li:empty{} 选中的li

9344 0

HTML5和CSS3提高

在 IE9 中，需要把这些元素转换为块级元素其实，我们移动端更喜欢使用这些标签 2.HTML5 新增的多媒体标签新增的多媒体标签主要包含两个：音频：视频：使用它们可以很方便的在页面中嵌入音频和视频...2.结构伪类选择器结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素 3.结构伪类选择器 nth-child（n）选择某个父元素的一个或多个特定的子元素（重点） n 可以是数字...，关键字和公式 n 如果是数字，就是选择第 n 个子元素，里面数字从1开始… n 可以是关键字：even 偶数，odd 奇数 n 可以是公式：常见的公式如下 ( 如果n是公式，则从0开始计算，但是第...先去匹配E ，然后再根据E 找第n个孩子 4.伪元素选择器（重点）伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。...必须有 content 属性 before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素伪元素选择器和标签选择器一样，权重为 1 5.CSS3 盒子模型 CSS3 中可以通过 box-sizing

9754 0

【愚公系列】2023年03月其他-Web前端基础面试题（CSS_42道）

CSS3 的新特性中，在布局方面新增了 flex 布局，在选择器方面新增了例如 first-of-type,nth-child 等选择器，在盒模型方面添加了 box-sizing 来改变盒模型，在动画...中唯一引入的伪元素是::selection 10、多媒体查询、多栏布局 11、border-image 12、2D转换：transform:translate(x,y)rotate(x,y)skew...基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。 32、什么是外边距重叠？重叠的结果是什么？...35、nth-of-type和nth-child的区别 :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素 :nth-child(n) 选择器匹配属于其父元素的第...N 个子元素，不论元素的类型 36、有什么方式可以对一个DOM设置它的CSS？

3.1K2 0

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

比如： p:nth-child(n){background:red} 表示E父元素中的第n个字节点 p:nth-child(odd){background:red}/*匹配奇数行...因为nth-child选择器在计算子元素是第n个元素，是连同所有父元素中所有子元素一起计算的，这样的话，p2其实是第三个元素，但是h1和h2由于没有被选中，所以颜色不变。...在“E:nth-of-type(n)”选择器中的“n”和“E:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。...简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。案例代码： <!...总结：为了方便记忆和查询，把CSS的结构伪类选择器归为四类： 1）通用子元素过滤器：E:nth-child(n)（顺序过滤）和E:nth-last-child(n)(逆序过滤

5501 0

一篇文章带你了解CSS Pseudo-classes(伪类 )

CSS伪类允许设置元素的动态状态的样式，例如悬停，活动状态和焦点状态，以及文档树中现有但不能通过使用其他选择器作为目标的元素，而无需添加任何选择器它们的ID或类。例如，针对第一个或最后一个子元素。...注意：要 :first-child在Internet Explorer 8和更早版本中工作，必须在文档顶部声明a 。...ul li:last-child例中的选择器从无序列表中选择最后一个列表项，并从其中删除右边框。...注意： CSS :last-child选择器在Internet Explorer 8和更早版本中不起作用。在Internet Explorer 9及更高版本中支持。...提示： CSS :nth-child(N)选择器在必须选择以特定间隔或模式（例如在偶数或奇数位置等）出现在文档树内的元素的情况下非常有用。

2K1 0

CSS笔记(20) 非常重要

这些新标签页面中可以使用多次在IE9中,需要把这些元素转化成块级元素其实,我们移动端更喜欢使用这些标签 HTML5中还增加了很多其他的标签,我们后面再继续学....新增的多媒体标签主要包含两个: 音频视频使用他们可以很方便的在页面中嵌入音频和视频,而不再去使用flash和其他浏览器插件....nth-child(n)选择某个父元素的一个或多个特定的子元素,注意括号里的字母只能是n. n可以是数字,关键字和公式 n如果是数字,就是选择第n个子元素,里面的数字从1开始 n可以是关键字:even偶数...,odd奇数 n可以使公式:常见的公式如下(如果n是公式,则从0jisuan,但是第0个元素的个数会被忽略) 比如说,我们想做一个隔行变色的效果,该怎么实现呢?....先去匹配E,然后再根据E找到第n个孩子.

4692 0

CSS3常用选择器

、Safari、Opera Element:nth-child(N) 概念：匹配属于其父元素的第 N 个子元素，不论子元素是哪个都算入，匹配不到Element则无效兼容性：IE9+、FireFox4...概念：匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数兼容性：IE9+、FireFox4+、Chrome、Safari、Opera Element:nth-of-type...(N) 概念：匹配属于父元素的特定类型的第 N 个子元素的每个元素兼容性：IE9+、FireFox4+、Chrome、Safari、Opera Element:nth-last-of-type...(N) 概念：匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数兼容性：IE9+、FireFox4+、Chrome、Safari、Opera Element:first-of-type...兼容性：::selection在IE家族中，只有IE9+版本支持，在Firefox中需要加上其前缀“-moz”

8362 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭