17CSS3选择器——伪类选择器一

最新推荐文章于 2021-10-27 15:11:33 发布
最新推荐文章于 2021-10-27 15:11:33 发布
阅读量495 收藏 1
点赞数
分类专栏： # css3学习 htmlcss学习园地 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47197906/article/details/119678749
版权

文章目录

1、E:root

该选择器选择文档的根节点，效果和设置 html 相同。（在html⽂档中根元素就是html）

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        :root {
            background: lightgreen;
        }
        /*
      与下列样式效果相同
      html{
          background: lightgreen;
      }
      */
    </style>
</head>
<body>
</body>

在这里插入图片描述

2、E:nth-child(n)

选择 E 元素父元素的第 n 个子元素。n 有两种取值：

  • n 取值为整数
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p:nth-child(3) {
            background-color: red;
        }
    </style>
</head>
<body>
    <p>1</p>
    <a href="">2</a>
    <p>3</p>
    <p>4</p>
</body>

在这里插入图片描述
选择器选取了 <p> 的父元素的第三个子元素。

注：这些子元素不一定是同种类型，如上述例子中，父元素的第二个子元素是 <a> ,它与其它 <p> 是兄弟元素。另外，当该选择器取整数时，只能取正整数。

  • n 取值为表达式

当取值为表达式时，变量只能使用 n，并且 n 从 0 开始依次加1，即取值为表达式时，选择器选择多个值，[n=0,1,2,3…]。当计算结果小于等于 0 或 大于子元素总数时，不选取元素。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p:nth-child(2n + 1) {
            background-color: blue;
        }
    </style>
</head>
<body>
    <p>1</p>
    <a href="">2</a>
    <p>3</p>
    <p>4</p>
</body>

在这里插入图片描述
表达式为 2n-1，[n=0,1,2,3...]，计算结果为 nth-child(1)，nth-child(3)…，所以该选择器选择了第一个和第三个元素。

注：使用表达式时，CSS3 提供了两个特殊值：odd 和 even。odd 相当于 2n+1，even 相当于 2n。

3、E:nth-last-child(n)

与 E:nth-child(n) 相比多了一个 last，其实该选择器与前者十分相似，只不过前者是从前往后计数第 n 个，该选择器是从最后一个往前计数。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p:nth-last-child(2n + 1) {
            background-color: red;
        }
    </style>
</head>
<body>
    <p>1</p>
    <p>2</p>
    <a href="">3</a>
    <p>4</p>
    <p>5</p>
    <p>6</p>
</body>

在这里插入图片描述
可以看到，从最后一个元素往前计数，第一个、第三个、第五个元素都被选择器选中。

4、E:nth-of-type(n)

该选择器与 E:nth-child(n) 语法相同，在选择的元素上有些区别。该元素选择的是与 E 相同类型的兄弟元素，我们来看一个例子：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /* 选择的是与 E 相同类型的兄弟元素 */
        p:nth-of-type(2n + 1) {
            background-color: red;
        }
    </style>
</head>
<body>
    <p>1th of ele,1th of p</p>
    <p>2th of ele,2th of p</p>
    <a href="https://www.baidu.com">3th of ele,1th of a</a>
    <p>4th of ele,3th of p</p>
    <p>5th of ele,4th of p</p>
    <p>6th of ele,5th of p</p>
</body>

在这里插入图片描述
该选择器选择的是与 p 类型相同的兄元素，表达式为 2n+1，即选择奇数项元素，可以看到第一个第三个第五个 p 元素都被选中了。

5、E:nth-last-of-type(n)

该选择器与之前我们学习的 E:nth-last-child(n) 相类似，它与上一个选择器 E:nth-of-type(n) 选择元素的方式相同，只不过计数是从最后一个符合条件的兄弟元素开始往前计数。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /* 选择的是与 E 相同类型的兄弟元素 ，计数是从最后一个符合条件的兄弟元素开始往前计数*/
        p:nth-last-of-type(2n + 1) {
            background-color: red;
        }
    </style>
</head>
<body>
    <p>1th of ele,1th of p</p>
    <p>2th of ele,2th of p</p>
    <a href="https://www.baidu.com">3th of ele,1th of a</a>
    <p>4th of ele,3th of p</p>
    <p>5th of ele,4th of p</p>
    <p>6th of ele,5th of p</p>
    <p>7th of ele,6th of p</p>
</body>

在这里插入图片描述

6、E:last-child

该选择器选择 E 元素的父元素的最后一个子元素。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*  E:last-child  选择 E 元素的父元素的最后一个子元素*/
        p:last-child {
            background: red;
        }
    </style>
</head>
<body>
    <p>wo</p>
    <p>ai</p>
    <p>bai</p>
    <p>du</p>
</body>

在这里插入图片描述

注：该选择器需要满足父元素的最后一个元素和 E 才会选取，否则不会选取，例如下面这段代码

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p:last-child {
            background: red;
        }
    </style>
</head>
<body>
    <p>wo</p>
    <p>ai</p>
    <p>bai</p>
    <p>du</p>
    <span>Hello</span>
</body>

在这里插入图片描述

7、E:first-of-type

该选择器选择 E 元素父元素的子元素的第一个与 E 元素类型一致的元素。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p:first-of-type {
            background: red;
        }
    </style>
</head>
<body>
    <h1>baidu</h1>
    <p>wo</p>
    <p>ai</p>
    <p>bai</p>
    <p>du</p>
    <h1>baidu</h1>
</body>

在这里插入图片描述
可以看到，第一个子元素是 <h1>，第一个符合类型一致的子元素是 <p>wo</p>，选择器选择了该元素。

8、E:last-of-type

该选择器选择 E 元素父元素的子元素的最后一个与 E 元素类型一致的元素。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p:last-of-type {
            background: red;
        }
    </style>
</head>
<body>
    <h1>baidu</h1>
    <p>wo</p>
    <p>ai</p>
    <p>bai</p>
    <p>du</p>
    <h1>baidu</h1>
</body>

在这里插入图片描述
可以看到，最后一个子元素是 <h1>，最后一个符合类型一致的子元素是 <p>du</p>，选择器选择了该元素。

注：first-of-type、 last-of-type 与之前的 last-child 和在 CSS2 中我们这里没有讲解的 first-child 的区别就是，first-of-type、last-of-type 选择的是第一个或最后一个类型一致的元素，这个元素一定存在，而 first-child 和 last-child 则第一个或最后一个元素与 E 类型一致时才会选择，否则选择器不生效，即符合的元素不一定存在。

9、E:only-child

该元素选择的是 E 是其父元素唯一的子元素：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .div1 {
            border: 2px solid;
        }
        .div2 {
            margin-top: 10px;
            border: 2px solid;
        }
        
        p:only-child {
            background: red;
        }
    </style>
</head>
<body>
    <div class="div1">
        <p>hello world</p>
    </div>
    <div class="div2">
        <p>hello baidu</p>
        <span>wo ai xue xi</span>
    </div>
</body>

在这里插入图片描述
可以看到，父元素中唯一有一个 <p> 元素的是 div1，div2 中有两个元素，所以选择器选择了 <p>hello world</p>。

10、E:only-of-type

该选择器选择的是 E 是其父元素唯一的子元素类型：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .div1 {
            border: 2px solid;
        }
        .div2 {
            margin-top: 10px;
            border: 2px solid;
        }
        
        p:only-of-type {
            background: red;
        }
    </style>
</head>
<body>
    <div class="div1">
        <p>hello world</p>
    </div>
    <div class="div2">
        <p>hello baidu</p>
        <span>wo ai xue xi</span>
    </div>
</body>

在这里插入图片描述
可以看到，选择器选择了两个元素，在两个 div 块中，都只有一个 <p> 类型，所以都被选取。

11、E:empty

该选择器选择的是空元素，匹配每个没有任何子级的元素（包括文本节点）。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*E:empty 选择的是空元素*/
        p:empty {
            width: 1000px;
            height: 20px;
            background: red;
        }
    </style>
</head>
<body>
    <p>hello world</p>
    <p></p>
    <p>hello bai du</p>
</body>

在这里插入图片描述
可以看到，第二个空的

元素被选取了。

12、E:target

该选择器选择的是一个 id 与 当前 url 匹配的元素，匹配当前活动的target元素的样式。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*E:target 选择的是一个 id 与 当前 url 匹配的元素*/
        :target {
            border: 2px solid;
            background: lightgreen;
        }
    </style>
</head>
<body>
    <a href="#p1">jump to p1</a><br />
    <a href="#p2">jump to p2</a>
    <p id="p1">p1</p>
    <p id="p2">p2</p>
</body>

在这里插入图片描述
点击两个 link 链接，可以发现，对应跳转的元素样式相应的改变了。
在这里插入图片描述

13、E:not(s)

该选择器匹配不符合参数选择器 s 描述的元素（匹配除了指定s元素的其他元素）

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .demo {
            color: lightgreen;
        }
        p:not(.demo) {
            color: red;
        }
        /*E:not(s) 匹配不符合参数选择器 s 描述的元素*/
        :not(.demo) {
            color: blue;
        }
    </style>
</head>
<body>
    <p class="demo">hello world</p>
    <p>hello bai du</p>
    <span>hello</span>
</body>

在这里插入图片描述
可以看到，第一个否定伪类选择器选择了 class 不为 demo 的 <p> 元素，样式为红色；第二个否定伪类选择器选择了 class 不为 demo 的 <span> 元素，样式为蓝色。

14、E:enabled & E:disabled

该选择器匹配的是元素的可用和禁用状态，主要用于表单元素。E:enabled 匹配每个启用的元素， E:disabled匹配每个禁用的元素。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*E:enabled & E:disabled  匹配的是元素的可用和禁用状态*/
        input:enabled {
            background: red;
        }
        input:disabled {
            background: lightgreen;
        }
    </style>
</head>
<body>
    <input
            type="text"
            name="test1"
            placeholder="disabled"
            disabled="true"
    /><br />
    <input type="text" name="test2" placeholder="enabled" />
</body>

在这里插入图片描述
可以看到，输入框的可用和不可用两种状态都被选择器获取到了。

15、E:checked

匹配每个选中的输⼊元素(仅⽤于单选按钮或复选框)，该选择器一般用于 radio或 checkbox，选择它们的 checked 状态：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        input[type='checkbox']:checked {
            margin: 100px;
        }
    </style>
</head>
<body>
    <input type="checkbox" name="checkbox" />
</body>

点击复选框，查看选择器选中元素的效果。可以看到，当复选框属性为 checked 时，复选框被选中，样式改变。
在这里插入图片描述
示例2：

input:checked{
	width: 100px;
}
input:checked~label {
  color: red;
}

<p><input type="radio" checked="checked" value="html5" name="test"><label>html5</label></p>
<p><input type="radio" value="css3" name="test"><label>css3</label></p>

在这里插入图片描述

远近2021
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3--nth-child的用法
m0_58065010的博客
06-08 2464
选择器查看的是元素在其父元素中的位置，而不是它在文档中的位置或它在其类别中的位置。所以，如果你有一个列表，它包含两种不同的类元素，希望这篇文章能帮助你更好地理解这个强大的选择器，并在你的下一个项目中找到它的用途。选择器是一个强大的工具，允许我们根据它们在父元素中的位置选择元素。是从1开始计数的（在HTML中，第一个元素的索引为1），但在。实际上不会选择任何第0个子元素，因为没有第0个子元素。是一个整数，表示要选择的子元素的位置。会考虑所有的子元素，而不仅仅是特定的类别。实际上在选择所有偶数位置的元素，而。
python前端学习之css
a88225969的博客
06-11 469
01-css的引入方式 在HTML中引入css方式总共有三种： 行内样式 内接样式 外接样式 　　　　　3.1 链接式 　　　　　3.1 导入式 css介绍 现在的互联网前端分三层： HTML：超文本标记语言。从语义的角度描述页面结构。 CSS：层叠样式表。从审美的角度负责页面样式。 JS：JavaScript 。从交互的角度描述页面行为 ...
伪类选择器：E:checked、E:default和E:indeterminate
nineteen73的专栏
04-15 992
19.4.4 伪类选择器：E:checked、E:default和E:indeterminateE:checked伪类选择器用来指定当表单中的radio单选框或checkbox复选框处于选取状态时的样式。代码清单19-21为一个E:checked伪类选择器的使用示例，在该示例中使用了几个checkbox复选框，复选框在非选取状态时边框默认为黑色，当复选框处于选取状态时通过E:checked伪类选
nth-child的使用方法
热门推荐
Evan's Blog ٩(๑❛ᴗ❛๑)۶
06-09 8万+
一、需求描述 在开发过程中，会碰到一些选择器的需求： 例如使列表中的第一项或者最后一项显示不同的样式 、列表中的奇数或者偶数项显示不同的背景色 . . . 等等。 我们可以通过 CSS 来实现这样的效果，CSS 给我们提供了几个样式参数：first-child、last-child、nth-child(n)。 二、使用方法的代码示例 1.常见使用方法 first-child first-child：选择列表中的第一个标签。 举例：第一行字体显示为红色，代码如下： li:first-child{ c
java更改图片小于32kb_echarts上传图表图片到Java 后台保存出来是空白图片？
weixin_35980267的博客
02-28 2446
找到原因了。在页面上alert 出来的是带 + 号的。传到后台后 + 号 变成空格。页面alert 出来的如下：iVBORw0KGgoAAAANSUhEUgAABPAAAAGQCAYAAAAgD57+AAAgAElEQVR4nO3d35Nc52HnZ/0H8l8Q7+0mqbJTuN0quXZVyYUuqKqYykq+WG6y69yoIqWyKbmsDaVwY0DaikHDiamlV5SWLklk...
CSS3 选择器 伪类选择器介绍
09-25
前面花了两节内容分别在《CSS3选择器——基本选择器》和《CSS3选择器——属性选择器》介绍了CSS3选择器中的基本选择器和属性选择器使用方法，今天要和大家一起学习CSS3选择器中的第三部分，也是最后一部分——伪类...
CSS伪类/伪元素选择器整理
12-13
一、超链接  a：link{ color:red;}  a：visited{ color:blue;...二、更多伪类  ：root —————————— 文档的根  ：nth-child(n) ——————— 作为其父元素的第n个孩子的一个元素   ：n
CSS3 选择器 基本选择器介绍
12-13
第二部分我把他称作是属性选择器，第三部分我把他称作伪类选择器，这一部分也是最难理解和掌握的部分，今天我们先来看第一部分——基本选择器。我们先来看一个常用的选择器列表图 下面我们先看看上
CSS3 选择器 属性选择器介绍
09-25
上一切在《CSS3选择器——基本选择器》中主要介绍了CSS3选择器的第一部分，这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器
JavaWeb——css基础知识与它的三种使用方法和三种选择器
01-08
什么是css css，全称Cascading Style Sheets，中文名：层叠样式表。...选择器：浏览器根据“选择器”决定受CSS样式影响的HTML元素（标签,id或者类） 属性（ property）是你要改变的样式名，并且每个属性
web前端学习笔记（18）之nth-child() 的别样用法
Fightingdddd的博客
08-09 1989
nth-child是一个经常使用的css3属性,本来以为基本用法都已经掌握了，直到前段时间一次面试被问到。 背景 面试官拿出他的笔记本现场叫我实现下面效果。 有下面一个 list, 请将 3 到 10 的数字设置为红色： <ul> <li>1</li> ...
CSS3伪类选择器：nth-child()（nth-child(odd)/nth-child(even)）
angou6476的博客
12-11 2312
nth-child(odd)：奇数 nth-child(even)：偶数 使用时，如果是精确到数字时，切记是从同一级别的元素开始计算，而不是指定某个类才开始计算。 比如： <li></li> <li class="test"></li> <li></li> 如果我要选择class为test的，nth-c...
css3的nth-child选择器的详细探讨
FungLeo's Blog
03-06 1万+
css3的nth-child选择器的详细探讨css3的nth-child选择器的详细探讨 前言 有哪些 nth-child nth-child研究开始 构建DOM结构 开始实践CSS代码为方便研究我们现给一段基础CSS代码 选择第N个LI 选择前三个 选择从第四个开始到最后 选择第四个到第八个 选择奇数行 选择偶数行 选择369等三倍数行 选择258等三倍数行 选择14710等三倍数行 选择 51
css3奇偶选择
沧笙踏歌的博客
01-27 864
css3的强大，让人惊叹，人们在惊喜之余，又不得不为其艰难的道路感到可惜：好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标 准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器能实现部分规范，但这又有什么用呢？面对更多的兼容性问题，CSSer们只有望洋轻叹。虽 然如此，但有前瞻性的我们，又怎能停步不前呢？今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法： :nth-child(an+b) 为什么选择她，因为我认为，这个选择器是最多学问的一个了。很可
伪类（伪类选择器）
weixin_46736220的博客
04-06 326
文章目录基本过滤选择器内容过滤选择器可见性过滤选择器属性过滤选择器表单对象属性过滤选择器 基本过滤选择器 :first 选取第一个元素，返回单个元素 $(“p:first”) 选取所有< p>元素中第一个< p>元素 :last 选取最后一个元素，返回单个元素 :not(selector) 去除所有与给定选择器匹配的元素，返回元素集合 $(“input:not(.myClass)”) 选取 类名 不是 myClass 的< input> 元素 :eve
checked 使用例子
bajiudongfeng的专栏
04-23 1461
" > 限制级     $("input[type=checkbox]").change(function(e){     e.preventDefault();     var checked = e.target.checked;   }); 给多选按钮绑定chang事件当选中或者取消选中的时候就会触发这个事件,然后可以通过e.target.checked
css如何筛选第一个元素,css选择器怎么选取第几个元素
weixin_39909366的博客
08-03 1万+
css选择器选取第几个元素的方法：1、使用“first-child”选择器选取属于其父元素的首个子元素；2、使用“last-child”选择列表中的最后一个标签；3、使用“nth-child(3)”选择第3个标签等等。本文操作环境：windows7系统、HTML5&&CSS3版本、Dell G3电脑。css用选择器选取第几个元素？css怎么用选择器选取第几个元素？下面本篇文章来给大...
jquery选择器大全
胡杰的专栏
05-12 1800
jquery选择器大全 一、核心:$是jquery类的一个别名,$()构造一个jquery对象,jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都基于这个函数，或者说都是在以某种方式使用这个函数。 1、 ${表达式}：根据这个表达式来查找所有匹配的元素。 eg:$("div>p"); 查找所有p元素，且这些p元素都是div的子元素. $("input:radio",document.forms[0]); 查找文档第一个表单中，所有的单选按钮。 ...
CSS中的nth-child()属性
欢欢的博客
10-27 3万+
first-child、last-child、nth-child、nth-last-child、nth-of-type first-child，last-child可直接使用，例如 ul li:first-child，ul li:last-child， 但是其余的选择都需要在后面加入()，例如ul li:nth-child(n); ->选中ul元素下面第n个li元素，且n是从1开始的，这里和JavaScript中的eq()不同，eq选择也是从第1个开始的，但是索引值是从0开始 1、fi...
css从入门到精通——基础选择器
最新发布
06-09
好的，关于 CSS 的基础选择器，我可以为你进行解答。 在 CSS 中，选择器是用来指定我们想要样式化的 HTML 元素的。基础选择器包括以下几种： 1. 标签选择器：可以通过 HTML 标签名称来选择指定的元素，例如：`p` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值