登录  /  注册
首页 > web前端 > css教程 > 正文

如何使用css属性nth-child(n)匹配选择第n个子元素

不言
发布： 2018-06-21 16:39:33
原创
1994人浏览过

这篇文章主要介绍了关于如何使用css属性nth-child(n)匹配选择第n个子元素，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

css匹配选择第n个子元素可以使用:nth-child(n) 选择器，其匹配属于其父元素的第N个子元素，不论元素的类型

加入要让第二个 th 占table表格总宽度的50%. 

<style type = "text/css"> 
table tr th:nth-child(2) 
</style> 
<table> 
<tr> 
<th>第一个</th> 
<th>第二个</th> 
<th>第三个</th> 
</tr> 
</table>
登录后复制

定义： 

:nth-child(n) 选择器匹配属于其父元素(在这里就是tr)的第 N （这里选择第2个）个子元素（这里子元素是th），不论元素的类型。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

关于CSS中的table-cell属性的使用方法

如何使用CSS的pointer-events属性实现鼠标穿透效果

以上就是如何使用css属性nth-child(n)匹配选择第n个子元素的详细内容，更多请关注php中文网其它相关文章！

相关标签：
css 匹配选择 子元素
来源：php中文网
上一篇：css页面中左中右分栏布局的实现 下一篇：如何创建一个自己的bootstrap模板
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
Redux 状态无法正确访问后端 (mySQL) 数据 我在后端（mySQL）和前端之间渲染数据时遇到了问题。我已经在reduxdevtools和控制台日志中进行了调试，但仍然找不到原因。数据在控制台日志中正确获取，但当我记录我的状态时...
P粉139351297来自于2023-09-20 10:40:44
0 1 124
根据用户输入从数据集中筛选数据的问题 以下是我迄今为止尝试过的概述：我有一个searchInput元素，用户可以在其中输入他们的搜索查询。当searchInput的值发生变化时，我使用一个函数来处理过滤过程。过滤函数循...
P粉903969231来自于2023-09-20 09:37:52
0 1 262
Axios GET 请求被前端中的某些内容修改 在这个动作中，我在URL“api/media/action”上有一个基本的GET响应exportconstlistWorks=async(dispatch)=>{try{di...
P粉195200437来自于2023-09-20 08:39:45
0 1 198
如何正确使用计算器？ :root{--offset:30px;}.grid-cols-custom{/*使用自定义属性和calc()计算列宽*/grid-template-columns:calc((4...
P粉046878197来自于2023-09-19 23:56:39
0 1 273
这节课的意思是依赖注入等于脱了裤子放屁？ 这节课的意思是依赖注入等于脱了裤子放屁？
小多来自于2023-09-20 22:24:24
0 0 44
使用WebRTC和Javascript录制多个标签页 我目前能够录制一个标签页，并从其流创建一个媒体录制器。我希望能够切换到另一个标签页并在另一个标签页上继续进行同样的录制，然后最后提供一个拼接好的视频。我该如何实现这个？
P粉571233520来自于2023-09-19 23:07:01
0 1 190
重置“startButtonGame”的可见性是唯一的问题；其他一切都正常工作 我正在开发一个21点游戏。到目前为止，除了这个小细节之外，一切都正常。基本上，开始游戏按钮只应在游戏之前和游戏之后可见。我没有问题，可以将其设置为隐藏，但是当我完成一局游戏时，它不...
P粉614840363来自于2023-09-19 22:02:31
0 1 254
作为主要部分使用的图片的最佳实践是什么？ 我有一个使用图片作为主要部分的部分。问题是图片对于手机、平板电脑和台式机来说太大了，有1MB。我担心图片太大了。我想知道在使用图片作为主要部分背景时的最佳实践。谢谢您的友善建议和意...
P粉727416639来自于2023-09-19 20:54:07
0 1 212
PHP：比较数组的数组并在值匹配时创建新数组 这里是一个示例数据集$all_items=array($a1=array(name=>"item1",description=>"item...
P粉323224129来自于2023-09-19 19:48:02
0 1 222
关闭：MySQL更新查询以增加特定值 如何使用相同的值增加更新mysql列Id名称更新A（期望）更新B（期望）1AAAAA112AAAAA123AAAAA134BBBBB215BBBBB226CCCCC317CCCCC...
P粉129275658来自于2023-09-19 18:36:24
0 1 276
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 技术文章
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1

 | 本站CDN由 数掘科技 提供

登录PHP中文网，和优秀的人一起学习！
全站2000+教程免费学
微信扫码登录

  • 精品班

  • 立即咨询

  • 微信沟通

  • QQ群

  • 优惠券

  • 返回顶部