Css 第n个类型vs第n个子类型
我对类型的第n个Css 第n个类型vs第n个子类型,css,css-selectors,Css,Css Selectors,我对类型的第n个pseudo类有点困惑，以及它应该如何工作——特别是与第n个child类相比 也许我有错误的想法，但考虑到这种结构 <div class="row"> <div class="icon">A</div> <div class="icon">B</div> <div class="label">1</div> <div class="label">2<
pseudo类有点困惑，以及它应该如何工作——特别是与第n个child
类相比
也许我有错误的想法，但考虑到这种结构
<div class="row">
<div class="icon">A</div>
<div class="icon">B</div>
<div class="label">1</div>
<div class="label">2</div>
<div class="label">3</div>
</div>
然而，至少在chrome中，它没有选择它。只有当它是行中的第一个子项时，它才显示有效，这与n个子项
相同-因此，这与n类型
之间有什么区别
.label:nth-of-type(1)
这里的“类型”指的是元素的类型。在本例中，div
，而不是类。这并不意味着第一个元素是.label
，而是指其类型的第一个元素，该元素也有一个label
类
不存在其类型的索引1
处具有label
类的元素。第n个子伪类指的是“第n个匹配的子元素”，这意味着如果您具有如下结构：
<div>
<h1>Hello</h1>
<p>Paragraph</p>
<p>Target</p>
</div>
在添加的10个元素中，有8个是
，2个是
，两个阴影部分元素表示
，其余8个是
页面的css如下所示：
<style>
* {
padding: 0;
margin:0;
}
section p {
width: 20px;
height: 20px;
border:solid 1px black;
border-radius: 15px;
margin:20px;
float: left;
}
section i {
width: 20px;
height: 20px;
border:solid 1px black;
border-radius: 15px;
margin:20px;
float: left;
}
section p:nth-child(1) {
background-color: green; /*first-child of p in the flow*/
}
section i:nth-child(1) {
background-color: red; /*[first-child of i in the flow]NO */
}
section i:nth-of-type(1) {
background-color: blue; /*the type i of first child in the flow*/
}
</style>
</head>
<body>
<section>
<p></p>
<p></p>
<p></p>
<p></p>
<i></i>
<p></p>
<i></i>
<p></p>
<p></p>
<p></p>
</section>
</body>
代码中的第二个红色灯泡不起作用，因为我不是流中的第一个元素
section i:nth-child(1) {
background-color: red; /*[first-child of i in the flow]NO */
}
section i:nth-of-type(1) {
background-color: blue; /*the type i of first child in the flow*/
}
图中的蓝色灯泡表示流中的第一种i
section i:nth-child(1) {
background-color: red; /*[first-child of i in the flow]NO */
}
section i:nth-of-type(1) {
background-color: blue; /*the type i of first child in the flow*/
}
：类型的第n个
用于选择特定类型的兄弟姐妹。
所谓类型，我指的是标签的类型，如，，等
：第n个子项
用于选择特定父项标记的子项，而不考虑类型
：第n种类型的示例
HMTL：
CSS:
请注意，
标记和:n子类
伪类之间有一个空格
ul:n个子（偶数）{背景色：红色}
结果：这里有一个简单的例子，显示了第n个child与第n个type之间的差异
考虑下面的HTML
红色背景将应用于div内的第二个p元素
之所以会出现这种情况，是因为child的第n个基本意思是在容器中查找第n个p标记（在本例中为第2个p标记）
使用第n个孩子
这里没有应用css
之所以会出现这种情况，是因为第n个子项基本上意味着在容器中查找第n个标记（在本例中，第2个标记是div），并检查它是否是p标记。下面是一个示例：
<div>
<div >0</div>
<div >1</div>
<div >2</div>
<div >3</div>
<div >4</div>
<div >5</div>
</div>
0
1.
2.
3.
4.
5.
此选择器：div div:n子级（1）
将选择div的第一个子级，但另一个条件是子级必须是div。
这里的第一个子元素是0
，但是如果第一个子元素是段落p
：0
，此选择器将不会影响页面，因为没有第一个子元素div
，第一个子元素是p
但是这个选择器：div div:nth类型（1）
如果第一个子元素是0
将影响它，但是如果第一个子元素是0
现在他将影响第二个子元素1
，因为它是他类型div的第一个子元素：nth类型（p）//p=integer，基本上返回关于body的DOM元素。
element:nth-of-type(p) //p=integer , basically return the DOM Element with respect of body.
Let us understand this with an example
<html>
<head>
</head>
<body>
<div>
<p> This is paragraph in first div</p>
<input type="text" placeholder="Enter something"/>
<p>This is a paragraph </p>
</div>
<div>
<p>This is paragraph in second div</p>
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>
<label> This is label <strong>inside Unordered List</strong></label>
</li>
</ul>
</div>
</body>
</html>
**This above html will look like this.**
让我们用一个例子来理解这一点
这是第一部分的段落
这是一段
这是第二部分的段落
- 第一项
- 第二项
-
这是无序列表中的标签
**上面的html将如下所示**
现在假设我们必须为无序列表中的第二项设置样式。
在这种情况下，我们可以使用第n个类型（索引）选择器wrt DOM body。
我们可以实现这样的造型
div:n类型（2）li:n类型（2）{
颜色：红色；
字体大小：粗体；
}
说明：div:nth类型（2）通过这个，我们试图告诉您在html正文中找到第二个div，在我们可以访问第二个div之后，现在我们可以使用相同的nth类型选择器在div内部挖掘，接下来我们使用li:nth类型（2），所以现在我们可以在第二个div内部找到第二个列表并对其进行样式化。
最终代码：
div:n类型（2）li:n类型（2）{
颜色：红色；
字体大小：粗体；
}
这是第一部分的段落
这是一段
这是第二部分的段落
- 第一项
- 第二项
-
这是无序列表中的标签
**最终输出将如下所示**
我想知道这一切将在哪里打破（ie8和之前的版本是肯定的）ie8和更低版本肯定不支持它，但其他几乎一切都很好（包括IE9）
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
</ul>
<div>
<p>I am first</p>
<div>I am secong</div>
<p>I am 3rd</p>
</div>
p:nth-of-child(2){
background:red;
}
p:nth-child(2){
background:red;
}
<div>
<div >0</div>
<div >1</div>
<div >2</div>
<div >3</div>
<div >4</div>
<div >5</div>
</div>
element:nth-of-type(p) //p=integer , basically return the DOM Element with respect of body.
Let us understand this with an example
<html>
<head>
</head>
<body>
<div>
<p> This is paragraph in first div</p>
<input type="text" placeholder="Enter something"/>
<p>This is a paragraph </p>
</div>
<div>
<p>This is paragraph in second div</p>
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>
<label> This is label <strong>inside Unordered List</strong></label>
</li>
</ul>
</div>
</body>
</html>
**This above html will look like this.**
Now suppose We have to style Second Item in UnOrderd list.
In this case we can use nth-of-type(index) selector wrt DOM body.
we can achieve styling like this
<style type="text/css">
div:nth-of-type(2) li:nth-of-type(2){
color: red;
font-weight: bold;
}
</style>
explanation : div:nth-of-type(2) by this we are trying to tell find the second div in html body,after that we have second div accessible ,now we can dig inside div using same nth-of-type selector,next we are using li:nth-of-type(2) so now we can find second list inside second div and styling it .
Final Code :
<html>
<head>
<style type="text/css">
div:nth-of-type(2) li:nth-of-type(2){
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<p> This is paragraph in first div</p>
<input type="text" placeholder="Enter something"/>
<p>This is a paragraph </p>
</div>
<div>
<p>This is paragraph in second div</p>
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>
<label> This is label <strong>inside Unordered List</strong></label>
</li>
</ul>
</div>
</body>
</html>
**And Final output will look like this**