首页 > 其他分享 >css伪类选择器

css伪类选择器

时间:2023-11-24 22:12:58浏览次数:39  
标签:伪类 元素 nth 行的子 选中 child type 选择器 css

点击查看代码
:nth-child(){},用来选择父元素下的第n个子元素。
注意::nth-child(){}是根据父元素下所有子元素进行排序
:nth-child(2n){},选中父元素下偶数行的子元素。
:nth-child(2n+1){},选中父元素下奇数行的子元素。
:nth-child(odd){},选中父元素下奇数行的子元素。
:nth-child(even){},选中父元素下偶数行的子元素。


:first-of-type{},用来选择父元素下的第一个子元素。
注意::first-of-type{}是根据父元素下所有同类型的子元素进行排序。
:last-of-type{},用来选择父元素下的最后一个子元素。
注意::last-of-type{}是根据父元素下所有同类型的子元素进行排序。
:nth-of-type(n){},用来选择父元素下的第n个子元素。
注意::nth-of-stype(n){}是根据父元素下同类型的子元素进行排序
:nth-of-type(2n){},选中父元素下偶数行的子元素。
:nth-of-type(even){},选中父元素下偶数行的子元素
:nth-of-type(2n+1){},选中父元素下奇数行的子元素。
:nth-of-type(odd){},选中父元素下奇数行的子元素。
:not(n){}否定类,将复合的元素去除,n为指定数值。

标签:伪类,元素,nth,行的子,选中,child,type,选择器,css
From: https://www.cnblogs.com/zsnhweb/p/17854889.html

相关文章

  • CSS多行文本溢出显示省略号
    ##WebKit内核浏览器解决办法display:-webkit-box 将对象作为弹性伸缩盒子模型显示;-webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式;text-overflow:ellipsis 用省略号“…”隐藏超出范围的文本。-webkit-line-clamp是用来限制在一个块元素显示的文本的行数,......
  • css 发光文字
    .textBox{font-family:"MicrosoftYaHei";font-size:28px;font-weight:bold;white-space:nowrap;line-height:40px;background:linear-gradient(30deg,rgba(255,255,2......
  • 这篇保证你彻底搞懂Java NIO的Selector事件选择器
     Selector提供选择执行已经就绪的任务的能力,使得多元I/O成为可能,就绪选择和多元执行使得单线程能够有效率地同时管理多个I/Ochannel。C/C++许多年前就已经有select()和poll()这两个POSIX(可移植性操作系统接口)系统调用可供使用。许多os也提供相似的功能,但对Java程序......
  • HTML+CSS+Javascript+Vue
    TableofContentsI.HTMLII.CSSGetStartedI.HTML按tab自动生成LabelMeaningPropertiesdiv块状元素span行间元素h1-h6标题iicon图标strong字体加粗a超链接img插入图片video插入视频controlsinput表单(输入账号、......
  • CSS杂记
    .bigClass{  margin:200pxauto;保证金:200px自动;  width:500px;宽度:500px;  height:500px;高度:500px;  background-color:yellow;背景颜色:黄色;  display:flex;显示:柔体;  /*控制子容器位置*/  align-items:center;align......
  • css 水平垂直居中的几种方法
    水平垂直居中的几种方式记录一下容器内只有单一元素时居中的几种方式<divstyle="width:300px;height:300px"class="wrap"><divstyle="width:100px;height:100px"class="box"></div></div>1.容器flex,调整内部轴线.wrap{di......
  • CSS 尺寸单位概述
    在本文中,我们将探讨CSS尺寸单位的四大类别。我们将了解这些尺寸单位的用途、它们的最佳工作原理,以及如何在每种情况下选择最佳尺寸单位,从而在各种媒体和设备尺寸下优化我们的布局。关于CSS尺寸单位CSS提供了多种指定元素大小或长度的方式,其中一些更为直观。CSS单位可分......
  • Tailwind CSS 解决了什么问题?
    从页面样式设计的颗粒度Granularity来谈起元素颗粒度我们知道,构成网页页面元素的最底层,最原始的东西就是HTML&CSS为每一个元素指定不同的内联inline-style或者class来控制它的呈现方式,最细程度可以到元素的style属性来控制,颗粒度停留在元素<!DOCTYPEhtml><htmll......
  • 纯CSS实现炫酷文本阴影效果
    如图所示,这是一个文本阴影效果,阴影有多个颜色,鼠标悬停时文本阴影效果消失,文本回到正常的效果。让我们逐步分解代码,看看如何使用纯CSS实现这个效果的。基于以上动图可以分析出以下是本次实现的主要几个功能点:文本有多个颜色的阴影的效果文本有空心镂空的效果鼠标悬停时文本回......
  • CSS选择器
    CSS选择器是用来选择需要改变样式的HTML元素的模式。到CSS3为止,支持的选择器类型有6种,包括标签选择器、派生选择器(上下文选择器)、id选择器、class选择器、属性选择器和通配符*选择器。以下是这六种选择器的简要介绍:标签选择器:通过HTML元素的标签名来选择元素。派生选择器(上下文选择......