nth-of-type在选择class的时候需要注意的一个小问题

查了下w3和MDN的手册，没发现有这个说明，写篇随笔记下。

1、.class:nth-of-type(n)在选择class的时候，如果在class前面插入x个同类型标签，n需要加上x

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<head>
<style>
    * {padding: .5em;}
    .para:nth-of-type(1) {background-color: red;}
</style>
</head>
<body>

    <p class="para">我是第1个p.para标签</p>
    <p class="para">我是第2个p.para标签</p>

</body>
</html>

当在第1个p.para前面插入一个p时:

    <p>我是一个普通的p标签</p>
    <p class="para">我是第1个p.para标签</p>
    <p class="para">我是第2个p.para标签</p>

此时.para:nth-of-type(2)才会是第一个p.para样式生效，jQuery选择器同理：

2、如果多个标签具有相同class，.class:nth-of-type(n)选择class的时候会全部选中所有标签的第n个class元素，jQuery只选择第一个标签的第n个class元素

    <div class="para">我是第1个div.para标签</div>
    <div class="para">我是第2个div.para标签</div>
    <div>我是一个普通的div标签</div>

    <section class="para">我是第1个section.para标签</section>
    <section class="para">我是第2个section.para标签</section>
    <section>我是一个普通的section标签</section>

    <p class="para">我是第1个p.para标签</p>
    <p class="para">我是第2个p.para标签</p>
    <p>我是一个普通的p标签</p>

建议添加样式时使用tag:nth-of-type(n)或者tag.class:nth-of-type(n)筛选元素

时间： 2024-10-11 00:23:11

nth-of-type在选择class的时候需要注意的一个小问题的相关文章

将html中的<input type="file" />(选择文件) 元素隐藏，并通过其它方式触发点击。

file input的默认外观实在不好看,所以我们要搞定它.. 1. 首先,我们把file input放入一个label,并且将这个label显示为一定的宽高,比如显示为(bootstrap)btn的样式; 2. 为此input增加样式,内联或css文件内写都可以:style="left:-9999px;position:absolute;" 3. 在label内增加文本(作为label btn的显示文本),比如下方示例中的span; <label id="realBt

input type=file 选择文件路径获取方法

input file上传按钮选择文件后的value是无法直接获取到的,本文借用js方法获取file选中文件的物理路径和文件名代码如下: DOM结构: <input type="text" id="textfield" /><br/> <a class="a-upload"> <input type="file" name="file" id="fileF

js 获取input type="file" 选择的文件大小、文件名称、上次修改时间、类型等信息

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body&

如何选择行的第一个和最后一个值之间间隔为5分钟

我有与样本外汇一分钟栏报价表. id,quote_name,quote_date,quote_time,open_rate,close_rate,high_rate,low_rate"1417","EURUSD","2015-01-01","13:01:00","1.2096","1.2096","1.2097","1.2096""141

CSS中的各个选择节点，都有样式最后一个无样式的快捷解决方法

2.1.3 多标签多标签选择器一般和html上下文有关,它有以下集中分类选择一个祖先的所有子孙节点,例如 div p{…} 选择一个父元素的所有直属节点,例如 div > p{…} 选择某一个元素紧挨着的兄弟节点,例如 li + li{…} 选择某一个元素的所有同胞节点,例如 span ~ a{…} 以上各种情况的组合应用(不要组合过于复杂,编码讲求可读性第一) 给大家列举一个比较典型的应用,如下图上图中的效果应该比较常见,在各个菜单之间加下划线.我之前的实现是:每个li都加一个borde

HTML <input type="file">上传文件——结合asp.net的一个文件上传示例

HTML的代码:(关键是要在form里设置enctype="multipart/form-data",这样才能在提交表单时,将文件以二进制流的形式传输到服务器) 一. <form id="form1" action="test.aspx" method="post" enctype="multipart/form-data"> <div> <input type="f

Jquery 结合 easyUI 实现当选择框中的值等于某一个值的时候，另一个combobox中的值发生变化。

$('#AccType').combobox({ onChange:function(){ if ($('#AccType').combobox('getValue')=="CCA"){ //假如账户类型文本框中的值等于公司结算账号 $("#YesNo_sfczfzhgl").combobox({readonly:"readonly"}); $("#YesNo_sfczfzhgl").combobox('setValue',&

每天一个小程序——选择排序时的一个小问题！

一开始我的程序如下,一直出现错误,基本上肯定逻辑上没有错误,用C-free编译运行时排序根本就没用,后来改成后面的才有用! (一),有问题的程序 #include<stdio.h>//#define LEN 10void Sort(int arry[]);int Select_min(int arry[]);int main(){ int a[10],num=0; for(num=0;num<10;num++) /*输入10个数字*/ { scanf("%d",&a

LINUX常用配置及命令

一. Fedora系统配置 1. [设置网卡IP] 步骤如下: 1) 用root用户登陆,打开/etc/sysconfig/network-scripts/ifcfg-eth0文件注意:打开的文件要根据网卡来设置,如:网卡eth1的配置文件就是ifcfg-eth1. 2) 设置以下内容: DEVICE=eth0 BOOTPROTO=static IPADDR=10.128.32.36 NETMASK=255.0.0.0 ONBOOT=yes GATEWAY=10.