首页 > 其他分享 >css-functions伪类选择器系列二

css-functions伪类选择器系列二

时间：2024-09-26 17:51:48浏览次数：10  
标签：functions last children nth child span odd 选择器 css

一张图浏览CSS Functions

概述

本文主要讲述CSS的部分伪类选择器第二篇，包括：:nth-child、:nth-last-child、:nth-of-type和:nth-last-of-type。

:nth-child()

:nth-child伪类是根据父元素的子元素列表中的索引来选择元素。

语法

:nth-child是以一个参数nth来描述匹配兄弟元素列表中元素索引的模式。元素索引从1开始。

:nth-child(nth) {
  /** */
}

其中nth可以是关键字也可以是函数符号

  • 关键字 ：odd表示奇数，如 1、3、5…；even表示偶数，如 2、4、6。

  • 函数符号

    • <An+B>：A表示步长；B表示偏移量；n表示从 0 开始的整数，如 5n+1就是包含 1、6、11…

    • nth of <selector>：表示选择与<selector>选择器匹配的第nth个元素，这时的nth可以是<An+B>的模式或者非负整数

  • 非负整数：<nth>也可以就是一个数值，如 1，3，6，8…

示例

  • 效果
    在这里插入图片描述

  • 代码如下：

<style>
  .first {
    .children.pre span:nth-child(-n + 3) {
      background: rgb(30, 120, 223);
    }

    .children.odd span:nth-child(odd) {
      background: red;
    }

    .children.odd span:nth-child(2n + 1) {
      border: 2px solid #000;
    }

    .children.even span:nth-child(even) {
      background: orange;
    }

    .children.even span:nth-child(2n) {
      border: 4px dotted green;
    }

    .children span:nth-child(-n + 3 of .im) {
      background-color: gold;
    }
  }
</style>
<div class="order">
  <h2><code>:nth-child</code></h2>
  <div class="content first">
    <div class="item">
      <div class="children">
        <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
        <span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
      </div>
    </div>
    <div class="item">
      <h5>-n+3:前3个背景为蓝色</h5>
      <div class="children pre">
        <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
        <span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
      </div>
    </div>
    <div class="item">
      <h5>odd:背景为红色;2n+1：边框加粗且颜色为黑色</h5>
      <div class="children odd">
        <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
        <span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
      </div>
    </div>
    <div class="item">
      <h5>odd:背景为橘色;2n+1：边框改为虚线加粗且颜色为绿色</h5>
      <div class="children even">
        <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
        <span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
      </div>
    </div>
    <div class="item">
      <h5>of &lt;selector /&gt; ：子元素前3个`im`类的背景色改为金色</h5>
      <div class="children of">
        <span>1</span><span class="im">2</span><span>3</span><span>4</span
        ><span class="im">5</span> <span class="im">6</span><span>7</span
        ><span>8</span><span class="im">9</span><span>10</span>
      </div>
    </div>
  </div>
</div>

:nth-last-child()

:nth-last-child()和:nth-child的语法类似，不过:nth-last-child()是从最后倒着计数，和后者相反。

示例

  • 效果
    在这里插入图片描述

  • 代码如下：

<style>
  .last {
    .children.pre span:nth-last-child(-n + 3) {
      background: rgb(30, 120, 223);
    }

    .children.odd span:nth-last-child(odd) {
      background: red;
    }

    .children.odd span:nth-last-child(2n + 1) {
      border: 2px solid #000;
    }

    .children.even span:nth-last-child(even) {
      background: orange;
    }

    .children.even span:nth-last-child(2n) {
      border: 4px dotted green;
    }

    .children span:nth-last-child(-n + 3 of .im) {
      background-color: gold;
    }
  }
</style>
<h2><code>:nth-last-child</code></h2>
<div class="content last">
  <div class="item">
    <div class="children">
      <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
      <span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
    </div>
  </div>
  <div class="item">
    <h5>-n+3:后3个背景为蓝色</h5>
    <div class="children pre">
      <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
      <span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
    </div>
  </div>
  <div class="item">
    <h5>odd:背景为红色;2n+1：边框加粗且颜色为黑色</h5>
    <div class="children odd">
      <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
      <span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
    </div>
  </div>
  <div class="item">
    <h5>odd:背景为橘色;2n+1：边框改为虚线且颜色为绿色</h5>
    <div class="children even">
      <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
      <span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
    </div>
  </div>
  <div class="item">
    <h5>of &lt;selector /&gt; ：子元素后3个`im`类的背景色改为金色</h5>
    <div class="children of">
      <span>1</span><span class="im">2</span><span>3</span><span>4</span
      ><span class="im">5</span> <span class="im">6</span><span>7</span
      ><span>8</span><span class="im">9</span><span>10</span>
    </div>
  </div>
</div>

:nth-of-type()

:nth-of-type()伪类是基于相同类型（标签名称）的兄弟元素中的位置来匹配元素。

语法
:nth-of-type(nth) {
  /** */
}

nth表示匹配元素的模式，同上差不多。可以是关键词odd或even，也可以是<An+B>，还可以是非负整数。

示例

  • 效果
    在这里插入图片描述

  • 代码如下：

<style>
  .first {
    .children.odd span.light:nth-of-type(odd) {
      color: red;
    }

    .children.even span.light:nth-of-type(even) {
      color: rgb(99, 32, 32);
      font-weight: bolder;
    }

    .children.blue span:nth-of-type(2n + 1) {
      color: rgb(14, 53, 224);
      font-weight: bolder;
    }
  }
</style>
<h2><code>:nth-of-type</code></h2>
<div class="content first">
  <div class="item">
    <div class="children">
      <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
      <span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
    </div>
  </div>
  <div class="item">
    <h5>odd:颜色为红色</h5>
    <div class="children odd">
      <span>1</span>
      <span class="light">2</span>
      <span>3</span>
      <span class="dark">4</span>
      <span>5</span>
      <span class="light">6</span>
      <span class="light">7</span>
      <span>8</span>
      <span class="light">9</span>
      <span>10</span>
    </div>
  </div>
  <div class="item">
    <h5>even:颜色为棕色</h5>
    <div class="children even">
      <span>1</span>
      <span class="light">2</span>
      <span>3</span>
      <span class="dark">4</span>
      <span>5</span>
      <span class="light">6</span>
      <span class="light">7</span>
      <span>8</span>
      <span class="light">9</span>
      <span>10</span>
    </div>
  </div>

  <div class="item">
    <h5>2n+1:颜色为蓝色</h5>
    <div class="children blue">
      <span>1</span>
      <span class="light">2</span>
      <span>3</span>
      <span class="dark">4</span>
      <span>5</span>
      <span class="light">6</span>
      <span class="light">7</span>
      <span>8</span>
      <span class="light">9</span>
      <span>10</span>
    </div>
  </div>
</div>

:nth-last-of-type()

:nth-last-of-type()和:nth-of-type的语法类似，不过:nth-last-of-type()是从最后倒着计数，和后者相反。

示例

  • 效果
    在这里插入图片描述

  • 代码如下：

<style>
  .last {
    .children.odd span.light:nth-last-of-type(odd) {
      color: red;
    }

    .children.even span.light:nth-last-of-type(even) {
      color: rgb(99, 32, 32);
      font-weight: bolder;
    }

    .children.blue span:nth-last-of-type(2n + 1) {
      color: rgb(14, 53, 224);
      font-weight: bolder;
    }
  }
</style>
<h2><code>:nth-of-last-type</code></h2>
<div class="content last">
  <div class="item">
    <div class="children">
      <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
      <span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
    </div>
  </div>
  <div class="item">
    <h5>odd:颜色为红色</h5>
    <div class="children odd">
      <span>1</span>
      <span class="light">2</span>
      <span>3</span>
      <span class="dark">4</span>
      <span>5</span>
      <span class="light">6</span>
      <span class="light">7</span>
      <span>8</span>
      <span class="light">9</span>
      <span>10</span>
    </div>
  </div>
  <div class="item">
    <h5>even:颜色为棕色</h5>
    <div class="children even">
      <span>1</span>
      <span class="light">2</span>
      <span>3</span>
      <span class="dark">4</span>
      <span>5</span>
      <span class="light">6</span>
      <span class="light">7</span>
      <span>8</span>
      <span class="light">9</span>
      <span>10</span>
    </div>
  </div>

  <div class="item">
    <h5>2n+1:颜色为蓝色</h5>
    <div class="children blue">
      <span>1</span>
      <span class="light">2</span>
      <span>3</span>
      <span class="dark">4</span>
      <span>5</span>
      <span class="light">6</span>
      <span class="light">7</span>
      <span>8</span>
      <span class="light">9</span>
      <span>10</span>
    </div>
  </div>
</div>

标签：functions,last,children,nth,child,span,odd,选择器,css
From： https://blog.csdn.net/m0_46281382/article/details/142522817

相关文章

  • CSSE2310 Command Line Arguments
    CSSE2310–Semester2,2024Assignment3IntroductionThegoalofthisassignmentistodemonstrateyourskillsandabilityinfundamentalprocessmanagementandcommunicationconcepts(pipesandsignals),andtofurtherdevelopyourCprogrammingskills......
  • scss概念
    SCSS（SassyCSS）是CSS的一种预处理器语言，它在CSS的基础上提供了更多的功能和灵活性，使得样式表的编写和管理更加高效和便捷。以下是SCSS的一些优势：变量（Variables）：SCSS允许使用变量来存储颜色、字体大小等数值，使得在整个样式表中统一调整这些值变得更加方便和可维护。嵌套（NestedRules）：可......
  • Unity DatePicker用法，实现UI的日期/时间选择器功能
    前言用Unity3d做一个类似于选时间段，查询数据并展示统计UI的功能插件https://assetstore.unity.com/packages/tools/gui/datepicker-for-unityui-68264样例效果弹出日期选择器时间范围选择器包含类型SharedCalendar共享的日历，这个就是几个选择器共用一个日历来选择时间......
  • HTML与CSS二三事
    概述HTML是英文HyperTextMark-upLanguage(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！如下图：HTML页面主体格式如......
  • CSS常用样式及示例
    CSS常用样式及示例 一、简介   层叠样式表(英文全称：CascadingStyleSheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式......
  • 第六章 元素应用CSS
    1.使用CSS设置字体样式在CSS中设置字体样式可以通过多种属性来实现。以下是一些常用的字体样式属性及其用法： 基本字体样式cssbody{    font-family:'Arial',sansserif;/字体类型/    font-size:16px;/字体大小/    font-weight:normal;/......
  • 伪类选择器：动态伪类、结构伪类、否定伪类、UI伪类、目标伪类、语言伪类
    什么是伪类：很像类，但不是类，是元素特殊状态的一种描述。作用：选中特殊状态的元素1.动态伪类什么是动态伪类：因为它的变化是动态的，拿a:hover举例，一会悬浮一会不悬浮，是动态变化的。拿a标签举例：a:link 代表没有访问过的超链接      a:visited 代表访问过的超链接......
  • Flutter 自定义国家选择器：基于 A ~ Z字母索引的列表跳转与侧边栏导航实现
    在许多移动应用中，我们经常需要通过字母索引快速跳转到目标位置，比如通讯录、国家选择等功能。这篇博客将带大家实现一个仿照通讯录的Flutter国家选择器。通过一个字母索引的侧边栏，用户可以快速跳转到目标字母分组。效果：1.项目需求与设计思路我们需要实现一个包含多个国......
  • CSS基础
    CSS简介CSS概念CSS（CascadingStyleSheets）层叠样式表，又叫级联样式表，简称样式表CSS文件后缀名为.cssCSS用于HTML文档中元素样式的定义为什么需要CSS使用css的目的就是让网页具有美观一致的页面CSS和HTML之间的关系HTML用于构建网页的结构CSS用于构建HTML元素的样式H......
  • CSS选择器
    选择器由HTML元素的id、class属性或元素名本身以及一些特殊符号构成，用来指定要为哪个HTML元素定义样式。选择器是CSS样式规则中重要的组成部分，我们可以将选择器看作是CSS样式与HTML元素之间的匹配模式，与选择器关联的样式规则会应用于选择器所指定的HTML元素上......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99