开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

P:n-child(N)不能在css div中工作

问题：P:n-child(N)不能在CSS div中工作。

回答： P:n-child(N)是CSS中的一个伪类选择器，用于选择某个元素的第N个子元素。然而，在CSS中，div元素是一个块级元素，它没有子元素的概念，因此P:n-child(N)不能直接在div中工作。

在CSS中，P:n-child(N)通常用于选择某个父元素下的子元素，例如ul下的li元素，或者table下的tr元素等。它可以根据子元素在父元素中的位置来选择特定的子元素。

如果想要在div中使用类似的选择器，可以考虑使用其他的CSS选择器来实现相同的效果。例如，可以使用类选择器、ID选择器、属性选择器等来选择div中的特定元素。

以下是一些常用的CSS选择器：

类选择器（Class Selector）：使用类名选择元素。例如，选择class为"example"的元素：.example
ID选择器（ID Selector）：使用元素的ID选择元素。例如，选择ID为"example"的元素：#example
属性选择器（Attribute Selector）：根据元素的属性选择元素。例如，选择具有"data-example"属性的元素：[data-example]
后代选择器（Descendant Selector）：选择某个元素的后代元素。例如，选择div元素内的所有p元素：div p
子元素选择器（Child Selector）：选择某个元素的直接子元素。例如，选择div元素下的所有p元素：div > p
相邻兄弟选择器（Adjacent Sibling Selector）：选择某个元素的下一个相邻兄弟元素。例如，选择div元素后面的第一个p元素：div + p

以上是一些常用的CSS选择器，可以根据具体的需求选择合适的选择器来操作div元素中的子元素。

腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：提供可扩展的云服务器实例，满足不同规模和需求的应用场景。详情请参考：https://cloud.tencent.com/product/cvm
腾讯云云数据库MySQL版：提供高性能、可扩展的MySQL数据库服务，适用于各种规模的应用。详情请参考：https://cloud.tencent.com/product/cdb_mysql
腾讯云对象存储（COS）：提供安全、稳定、低成本的云存储服务，适用于存储和处理各种类型的数据。详情请参考：https://cloud.tencent.com/product/cos

相关搜索:CSS hover + div不工作 CSS第n个子项(奇数)不工作我不能在CSS中定位div而不搞乱动画为什么背景图像不能在css中工作，而能在html中工作？为什么我不能在CSS中居中div？如何为CSS定位此Div中的特定P CSS过渡在chrome中工作，但不能在safari中工作 Angular PrimeNG CSS p-table pSortableColumn，启用自动换行-单词不工作 CSS动画只能在google chrome中工作吗？为什么position: fixed；不能在CSS中工作？HTML视频在烧杯浏览器中不工作(P2P)：选中不能在带有伪元素的css中工作 CSS Div,需要它在Firefox和Safari中工作 Angular 7- div中的背景不工作 Bootstrap CSS只能在PC web浏览器中工作，不能在移动浏览器中工作 Webpack配置中的CSS加载器不工作为什么手机的内部CSS不能在gmail中工作？为什么我的css动画不能在Safari中工作？ngModel innerHTML可以在p标记中工作，但不能在输入标记angular2中工作 Javascript -以div中的p标记为目标，不返回任何内容

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

【CSS】CSS 文本样式 ③ ( 文字排版案例一 | 设置标题 | div 中设置布局 | hr 标签设置横线 | p 标签分割段落 | 设置页面总体文字大小 | 修改 h1 标签样式 )

文章目录一、文字排版案例二、设置标题三、div 中设置布局四、hr 标签设置横线五、p 标签分割段落六、设置页面总体文字大小七、修改 h1 标签样式八、文本中设置粗体显示九、使用... 展示效果 : 二、设置标题 ---- 将标题放在 h1 标签中 : 狂人日记效果如下 : 三、div 中设置布局 ---- div 标签有换行功能...>1918年5月15日鲁迅收藏本文五、p 标签分割段落 ---- 使用 p 标签分割段落代码示例 : <!...记中语误，一字不易；惟人名虽皆村人，不为世间所知，无关大体，然亦悉易去。至于书名，则本人愈后所题，不复改也。七年四月二日识。一今天晚上，很好的月光。...记中语误，一字不易；惟人名虽皆村人，不为世间所知，无关大体，然亦悉易去。至于书名，则本人愈后所题，不复改也。七年四月二日识。一今天晚上，很好的月光。

2.5K2 0

CSS Selectors Level 4新特性全面解析

Level 3 中，如果再一次升级，那么就变成了 CSS Selectors Level 4。...下面我们可以对目前 W3C 工作草案中的 CSS Selectors Level 4 新特性进行一个阶段性总结，之所以叫阶段性，是因为未来可能有更多的新特性加入。...在 CSS3 中已经有 :not()，不过在 CSS3 中只能使用简单的匹配规则，例如 :not(p) 用来选择不是的元素。...——不区分大小写匹配标识 Case-Sensitivity 用于声明某个匹配规则中，对字符串或者某个 value 的匹配不区分大小写。...无论如何，相信在各大厂商的和 W3C 工作组的推动下，未来不管在 CSS 还是 JavaScript 上，将会逐渐走向规范上的统一，让我们拭目以待吧！

2K7 0

CSS技术

虽然最后一条声明的最后可以不加分号(但尽量在每条声明的末尾都加上分号) 例如： p{ color:red; font-size:30px; } 注：一般每行只描述一个属性 CSS 注释： /*注释内容...Css 代码没什么复用性可方言。第二种在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式。...1.只能在同一页面内复用代码，不能在多个页面中复用 css 代码。 2.维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了。...我们在第一个和第三个标签中使用class02在第二个标签中使用class01第四个标签不使用class 然后我们就利用class的选择来实现了我们想要的效果组合选择器组合选择器的格式是：选择器 1，选择器 2，选择器 n{...=class01 剩余标签不设置然后我们就得到了如图所示的效果这个组合选择器就是把前面的class和id结合起来，使得我们能够降低代码的冗余，尽可能提高我们的效率

5911 0

Web前端基础（06）

(“div:lt(n)”) 匹配下标小于n的div $(“div:gt(n)”) 匹配下标大于n的div $(“div:not(.abc)”) 匹配所有div 排除掉class值为abc的div $(“...div:even”) 匹配下标为偶数的div $(“div:odd”) 匹配下标为基数的div 内容选择器 $(“div:has§”) 匹配包含p子元素的div $(“div:empty”) 匹配空的div...:first 最后一个 div:last 第n个 div:eq(n) 小于n个 div:lt(n) 大于n个 div:gt(n) 不包含 div:not(xxx) 偶数 div:even 基数 div:...onclick="alert('p')"> <script src="..

2.7K2 0

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

::first-line 伪元素只能在块容器中,所以,::first-line伪元素只能在一个display值为block, inline-block, table-cell 或者 table-caption...nth-of-type() | 选择指定类型的子元素 :nth-of-type() 这个 CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。...n 为正值或零值。....innerDiv p:nth-last-of-type(1) { color: orangered; } 这会选择innerDiv元素中包含的类型为p元素的列表中的最后一个子元素。...Div 1 和 Div 2会被选中，p 不会被选中。 ---- 原文：https://blog.bitsrc.io/css-ps...

1.1K2 0

Web阶段：第二章：CSS语言

属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration），例如：p {color: blue} 多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。...3.Css代码没什么复用性可方言。第二种：在head标签中，使用style标签来定义各种自己需要的css样式。...1.只能在同一页面内复用代码，不能在多个页面中复用css代码。 2.维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了。...第三种：把CSS定义在一个单独文件中，然后引入使用。使用html 的标签导入 css 样式文件。...> span标签2 组合选择器组合选择器格式是：选择器1，选择器2，选择器n{ 属性：值; } 需求1：修改 class=“class01

5823 0

React入门三： JSX | 8月更文挑战

JSX的基本使用 1.1 createElement()存在的问题繁琐不简洁不直观，无法一眼看出所描述的结构用户体验差可以说 jsx就是HTML标签的写法。...需要使用babel编译后，才能在浏览器环境中使用。 create-react-app脚手架中已经默认有该配置，无需手动配置。编译JSX语法的包为：@babel/preset-react。...div = ( 姓名：{name} ) 2.2 注意点单大括号中可以使用任意的Javascript表达式 {1} {"ssss"} {1...大于':'小于等于'} const sayHi = ()=> 'Hi~' {sayHi()} JSX自身也是JS表达式注意：JS中的对象是一个例外，一般指挥出现在style属性中 {dv...:"sss"} // 不正确 const h1 = I am JSX const div = ( {h1} ) 不能在{ }中出现语句（if for等 )

1.1K3 0

html 鼠标形状箭头,CSS各种鼠标样式介绍

当你想在网页的不同位置让鼠标显示不同形状，以体现不同的功能区;当你想让你的网站体现与众不同的风格时，考虑一下在鼠标样式上下功夫吧。...这就要用到css层叠样式表中的cursor属性了。...crosshair：十字型 text：平时鼠标移动到文本上的样式 wait：等待的效果 default：默认的那种效果 help：带问号的鼠标样式 e-resize：向右的箭头 ne-resize：向右上方的箭头 n-resize...如网址：“http://5211.91.tc/sb.htm”，“http://www.blog286.com/sina/20070906/0Z610102007.html”，但可悲的是这些鼠标样式只能在...; div.innerHTML = html; div.style.cursor = ‘pointer’; div.style.marginBottom = ‘7px’; div.style.display

8.2K2 0

Sass速通（二）：嵌套与作用域

嵌套选择器嵌套在 Sass 中，可以在父选择器中写子选择器，以嵌套的形式来表达关联的关系，这样做可以减少我们重复书写父选择器的工作量。...父选择器 & 在 CSS 中，基本选择器分为以下几种： ID 选择器，如 #id 类选择器，如 .class 标签选择器，如 div、p 属性选择器，如 [lang='en'] 伪类选择器，如 a:hover...要注意的是，在复合选择器中，& 只能放在开头使用。群组选择器在 CSS 中，可以用逗号分隔多个选择器，形成一个群组。...> p，选中条件：节点为 div 的邻层子节点节点标签为 p + 为相邻兄弟选择器，如 div + p，选中条件：节点为 div 后面的第一个节点节点标签为 p ~ 为同层后续选择器...变量作用域在 Sass 中，变量只能在它被声明的层级和子层级访问；如果一个变量在不同层级中被重复定义，在使用时会从下到上寻找最近的定义。这与 JS 中的函数作用域相似。

1.6K2 0

1-选择器与DOM对象

"> CodePlayer jQuery代码: // 选择了id分别为n2、n4、n5、n6、n7的5个元素 // n5的子元素n6中包含"CodePlayer..."jQuery"文本的会变色 $('dd:contains("jQuery")').css('color', '#FF0000'); }); (7.2) :empty（取不包含子元素或文本为空的元素）...CodePlayer jQuery代码: // 选择了id分别为n2、n4、n5、n6、n7的5个元素 // n5的子元素n6中包含"CodePlayer...// 虽然在前面n6已经从文档中被移除 // 但不会将其从jQuery对象中移除，因此我们还可以使用该jQuery对象，将n6再次放入文档中 $n6.prependTo("body"); 结果是: [...一点也不。 For the time being. 暂时；暂且；目前

2.9K11 0

最全面的前端开发指南

确保你可以从它丰富的词汇中获益。 Published: 21st Feb, 2015 … <!...提高网站不需要你成为一个WCAG专家，你完全可以通过修复一些小问题，从而造成一个巨大的变化，例如：学习正确使用alt 属性确保链接和按钮被同样地标记（不允许）不专门依靠颜色来传递信息... 性能除非有正当理由才能在内容前加载脚本，不要阻塞页面的渲染。如果你的样式表很重，开头就孤立那些绝对需要得样式，并在一个单独的样式表中推迟二次声明的加载。... ... CSS 分号虽然分号在技术上是CSS一个分隔符，但应该始终把它作为一个终止符。

7687 0

【CSS】381- 提升你的CSS选择器技巧

(codepen链接：https://codepen.io/dgwyer/embed/qYvpMP) 工作电子邮件地址是必填项，并且要求填写正确有效；个人工作电子邮件地址不是必需的，但如若填写，需正确有效...其中 n 是从零开始，然后 n 为1，再 n 为2，依此类推匹配所有符合表达式的元素。结构选择器中使用参数来做匹配的选择器如下： :nth-child() 正序匹配某个元素的一个或多个子元素。...::placeholder 匹配表单元素中的占位符文本。杂项选择器我们再拿出点时间了解一下那些不属于任何类别的选择器，这其中有部分是实验性的，所以你必须等待一段时间才能在生产中使用。...例如你有以下的选择器组合： nav p.content, header p.content, main p.content, sidebar p.content, footer p.content {... 我们将含义相同的三种语言文字分别放到各自的中，并用 lang 属性分别单独给其定义对应的语言代码。

1.1K4 0

jQuery选择器大全(48个代码片段+21幅图演示)

并列选择器 $(document).ready(function () { // 将p元素和div元素的margin设为0 $('p, div').css('margin... 123 456 2. prev...); 下面的代码，只有123和789会变色 123 456 ...例如x = 3, y = 0时就是3n，表示取第3n个元素（n>=0）。实际上xn+y是上面两种的通项式。...必须勾选你现在工作的企业属于： <input

5K8 0

vscode之Emmet语法

在前端开发的过程中，一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候，效率会特别低下，因为需要敲打很多尖括号，而且很多标签都需要闭合标签等。...VsCode内置了Emmet语法,在后缀为.html/.css中输入缩写后按Tab键即会自动生成相应代码请注意在VsCode新版本中按Tab不再默认启用Emmet展开缩写!...) 您可以使用元素的名称，如div或p来生成HTML标签。...div>p.parent>span.child^ul.brother>li => <ul...lipsumN,N表示生成的单词数,正整数.可以不填. lorem => Lorem ipsum dolor sit amet, consectetur adipisicing elit.

1.7K3 2

浏览器加载解析渲染机制的全面解析

简介在前面一篇文章中，讲到了用户从输入url到看到页面的过程，其中涉及到浏览器的工作机制这一块我们并没有去详细分析。这篇文章，将对浏览器的加载解析渲染机制进行深入地剖析。...本篇文章将基于webkit来讨论浏览器工作原理。...DOM和标签基本是一一对应的关系，例如，如下的标签： Hello DOM ...理论上，既然样式表不改变Dom树，也就没有必要停下文档的解析等待它们，然而，存在一个问题，脚本可能在文档的解析过程中请求样式信息，如果样式还没有加载和解析，脚本将得到错误的值，显然这将会导致很多问题，这看起来是个边缘情况...这个模式保持了很多年，并且在html4及html5中都特别指定了。开发者可以将脚本标识为defer，以使其不阻塞文档解析，并在文档解析结束后执行。

1.1K1 0

CSS 技术

虽然最后一条声明的最后可以不加分号(但尽量在每条声明的末尾都加上分号) 例如： p{ color:red; font-size:30px; } 注：一般每行只描述一个属性 CSS 注释： /*注释内容...Css 代码没什么复用性可方言。第二种在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式。...我们提前设置好对哪些标签添加CSS样式，然后后面不用再添加style属性就可以实现我们想要的CSS样式这种方式的缺点。 1.只能在同一页面内复用代码，不能在多个页面中复用 css 代码。...工作量太大了。第三种把 css 样式写成一个单独的 css 文件，再通过 link 标签引入即可复用。...css样式：标签的字体为蓝色标签的字体大小为20个像素标签的边框为一个像素的红色实线然后我们在下面的标签中使用第一个标签设置id=id01 第二个标签设置class=class01 剩余标签不设置

6482 0

CSS选择器及优先级总结

important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性同一级别 (1) 同一级别中后写的会覆盖先写的样式 (2) 同一级别css引入方式不同...元素选择器 el p 选择所有元素。选择器分组 el,el div,p 选择所有元素和所有元素。...后代选择器 el el div p 选择元素内部的所有元素。子元素选择器 el > el div>p 选择的第一子代的所有元素。...:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。...三、一些注意 1、id选择器 www3school中所说：“一个id选择器只能在一个文档中使用一次“，但在css实践中你会发现两个同样的id都会生效。

5882 0

Selenium系列（十二） - 自动化必备知识之CSS选择器的详细使用

Web UI自动化中，定位方式的优先级优先级最高：ID 优先级其次：name 优先级再次：CSS selector 优先级再次：Xpath 针对css selector和xpath的优先级做一个简单的说明...原因1：css是配合html来工作，它实现的原理是匹配对象的原理，而xpath是配合xml工作的，它实现的原理是遍历的原理，所以两者在设计上，css性能更优秀原因2：语言简洁，明了，相对xpath 原因...html页面中，css正确写法的栗子 /* id选择器 */ #abc { color: #cc0000; font-size: 12px; } /* class 选择器 */ .down...:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。...:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个元素的每个元素。

1.4K3 0

CSS基础-引入方法，选择器，继承

一.CSS引入方法：行内式、嵌入式、导入式、链接式。 1、行内式。即：在标签的style属性中设定CSS样式。 ... 3、导入式即：将一个外部CSS文件引入CSS文件或HTML文件,注意此方法既能在CSS文件里使用也能够在HTML的标签之间使用。 ...HTML: 我是一个div元素 4、复合选择器 4.1 交集选择器例子： CSS: p.special{ color.../">我是第二个a标签 //不会被选中，没有title属性我是第一个a标签 //不会被选中，title不=...不是span的兄弟--> 　　　　　　　　　　六、CSS的继承特性子元素会继承父元素中的样式 CSS: p{ color:red; text-decoration

6871 0

CSS选择器详解

最近在做一些面试的工作，我经常会问的一个问题就是：CSS中有哪些选择器。我往往得到的答案就是id选择器啊、class选择器啊，再追问下去就没了，这让我很是意外！...我是段落2 　　子代选择器 E>F { sRules } 选定文档元素 E 所有的子代元素 F，不包含孙代元素 /* 设置 div 子代的 p 为红色，但孙代的... :only-of-type CSS3 E:only-of-type { sRules } 匹配同类型中的唯一的一个同级兄弟元素E 要使该属性生效，E元素必须是某个元素的子元素...> :nth-of-type(n) CSS3 E:nth-of-type(n) { sRules } 匹配同类型中的第n个同级兄弟元素E 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html...n) CSS3 E:nth-last-of-type(n) { sRules } 匹配同类型中的倒数第n个同级兄弟元素E 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是

2.9K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭