CSS3 新增属性选择器 结构伪类选择器

最新推荐文章于 2024-06-16 14:48:26 发布
最新推荐文章于 2024-06-16 14:48:26 发布
阅读量79 收藏
点赞数
文章标签： servlet html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MOUNTAIN_SEA1/article/details/126292357
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS新增结构伪类选择器</title>
    <style>
        /* 1. 选择ul里面的第一个孩子 小li */
        ul li:first-child {
            background-color: pink;
        }
        /* 2. 选择ul里面的最后一个孩子 小li */
        ul li:last-child {
            background-color: pink;
        }
        /* 3. 选择ul里面的第2个孩子 小li  */
        ul li:nth-child(2) {
            background-color: skyblue;
        }
        /* 4. 选择ul里面的第6个孩子 小li  */
        ul li:nth-child(6) {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS新增结构伪类选择器-nth-child</title>
    <style>
        /* 1. 把所有的偶数的孩子选出来 */
        ul li:nth-child(even) {
            background-color: #ccc;
        }

        /* 2. 把所有的奇数的孩子选出来 */
        ul li:nth-child(odd) {
            background-color: grey;
        }

        /* 3. :nth-child(n)  从0开始 每次加1 往后面计算 这里面必须是n 不能是其他的字母 选择了所有的孩子*/
        ol li:nth-child(n) {
            background-color: pink;
        }
    </style>
</head>

<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
    <ol>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ol>
</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS新增结构伪类选择器2</title>
    <style>
        /* 1. :nth-child(2n) 选择了所有偶数孩子  等价于even */
        ol li:nth-child(2n) {
            background-color: pink;
        }

        /* 2. :nth-child(2n+1) 选择了所有奇数孩子  等价于odd */
        ol li:nth-child(2n+1) {
            background-color: skyblue;
        }

        /* 3. 前5个li变成紫色 */
        ul li:nth-child(-n+5) {
            background-color: pink;
        }
    </style>
</head>

<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
    <ol>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ol>
</body>

</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS新增nth-of-type选择器</title>
    <style>
        ul li:first-of-type {
            background-color: pink;
        }
        ul li:last-of-type {
            background-color: pink;
        }
        ul li:nth-of-type(even) {
            background-color: skyblue;
        }
        /* nth-child 会把所有的孩子都排列序号 */
        /* 执行的时候首先看 :nth-child(1) 之后会去看 前面的div */
        /* div 与 p 无法匹配 所以没有一个孩子会被选中 */
        section div:nth-child(1) {
            background-color: red;
        }
        /* nth-of-type 会把指定元素的盒子排列序号 */
        /* 执行的时候首先看 div指定的元素 之后会去看 ：nth-of-type(1) 第几个孩子 */
        section div:nth-of-type(1) {
            background-color: blue;
        }
    </style>
</head>
<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
    <!-- 区别 -->
    <section>
        <p>光头强</p>
        <div>熊大</div>
        <div>熊二</div>
    </section>
</body>
</html>

Cassie燁
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3新增属性——新增选择器（属性选择器、结构伪类选择器、伪元素选择器）
m0_53619602的博客
06-06 1202
结构伪类选择器主要根据文档结构来选择器元素,常用于根据父级选择器里面的子元素 效果图E[att="val"] 效果图： E[att^="val"] 效果图： E[att$="val"] 效果图： E[att*="val“] 效果图： 结构伪类选择器主要根据文档结构来选择器元素,常用于根据父级选择器里面的子元素 E:firs...
css3的新增的选择器
ovocc的博客
10-21 1498
CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。 1.回顾一下旧的选择器 标签选择器 即是html标签名作为选择器 举例： <p>标签选择器</p> p { color: yellow; } 这里有个p标签，给他添加样式的时候也是用的p。这种就是标签选择器 类选择器 用class属性调用class类 举例： <p class="one">标签选择器</p> .one { .
CSS3 新增选择器(属性选择器、结构伪类选择器、伪元素选择器)
ItDaChuang的博客
09-23 866
详细总结CSS3中新增的3中选择器。
彻底搞懂css3中的八个结构伪类选择器
csdn_chuan的博客
11-22 864
css3给我们新增的伪类选择器属性，顾名思义就是来让我们选择元素并给元素设置样式用的，但是，这几兄弟长得太相似，在项目中用的时候，我们总是小心翼翼的选择，但结果总是和我们的预期相差甚远。解决问题的根本办法就是从根源上铲除它，是时候整明白这几个哥们了。
CSS3新增的伪类选择器
cidycidy99999的博客
08-24 1661
:first-of-type p:first-of-type 选择属于其父元素的首个 元素的每个 元素。 :last-of-type p:last-of-type 选择属于其父元素的最后 元素的每个 元素。 :only-of-type p:only-of-type 选择属于其父元素唯一的 元素的每个 元素。 :only-child p:o...
CSS结构伪类选择器
热门推荐
歪脖先生的博客
01-11 1万+
结构伪类选择器 结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。 表 2-6 结构伪类选择器 选择器 功能描述 版本 E:last-child 选择父元素的倒数第一个子元素E，相当于E:nth-last-child(1) 3 E:n
CSS3新增选择器示例-伪类选择器
07-10 5325
一. 伪类选择器介绍1.1 首先了解下什么是类选择器类选择器语法：.类名也就是标签的class属性值 示例代码<!DOCTYPE html> <html> <head> <title>css3中选择器示例</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style>
CSS3 新增选择器-子级选择器-兄弟选择器-结构伪类选择器-伪元素选择器-属性选择器
猿码互联
10-14 2152
在上面的例子中，选择器 .list li:nth-child(2) 会选择第 2 个 li 元素，并设置其颜色为红色，而选择器 .list li:nth-child(4) 会选择第 4 个 li 元素，并设置其颜色为红色。在上面的例子中，除了第一个 class 为 "item" 的 div 元素后面的第一个 h3 元素之外，其它的 h3 元素都会被选择。它是通过 ~ 或 + 符号来实现的。需要注意的是，结构伪类选择器通常是基于元素在文档中的位置来进行选择的，因此对于动态生成的元素可能不起作用。
CSS3的新增选择器示例-属性选择器
07-09 1342
一. CSS3概述css3是css2的升级版本，新增了许多特性，弥补了css2的众多不足之处。css3许多查找元素的方法，极大的提高了查找元素的效率和精准度。css3目前在市场上，对pc端的支持很差，有些需要添加私有前缀但在移动端的支持要优于pc端 二. 选择器1. 属性选择器 css3中对属性选择器元素元素的查找提供了五种形式 1.1 E[attr] 表示存在attr属性即可找到<!DOCT
CSS中的十二种结构伪类选择器
一碗周
08-29 5056
Hello 大家好，我是一碗周，不是你想的那个“一碗粥”，是一个不想被喝掉的前端????????‍????，如果我写的文章有幸可以得到你的青睐，万分有幸~ 这是【从头学前端】系列文章的第二十七篇-《CSS中的十二种结构伪类选择器》 编写不易转载请获得允许 写在前面 本篇文章我们将来学习CSS中的结构伪类选择器，该类选择器包含的内容如下表所示： 伪类选择器 作用 selector:first-child 用来定位一组兄弟元素中的第一个元素 selector:last-child 用来
两种CSS3伪类选择器详细介绍
12-13
css伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了，因为这些在平时中是常用到的伪类选择器，现在向大家介绍一下两种新增的Css3伪选择器。 1、UI元素状态伪类 我们把":enabled",":disabled",":...
HTML5新增的Css选择器、伪类介绍
09-28
HTML5新增了Css选择器、伪类，本文整理了一些，并给出简单的使用介绍，喜欢html5的朋友可以参考下，希望对大家有所帮助
CSS3 新增选择器的实例
01-19
结构(位置)伪类选择器（CSS3) :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论...
HTML静态网页成品作业(HTML+CSS)—— 环保主题介绍网页(5个页面)
weixin_42283461的博客
06-10 1135
HTML静态网页成品作业(HTML+CSS)—— 环保主题介绍网页(5个页面)
HTML 中使用 JavaScript 的具体方式
weixin_44814196的博客
06-10 974
介绍在 HTML 文档里面使用 JavaScript 的常见方式
HTML动画效果技术指南：打造引人注目的网页悬浮体验
仰望苍穹
06-14 612
通过上述步骤和技巧，您将能够制作出既引人注目又功能性强的悬浮动画，从而提升网站的用户体验和品牌形象。记住，动画的目的是增强而不是分散用户的注意力，因此在设计时要注重细节和整体的协调性。随着技术的不断进步，HTML动画效果的实现方式也会不断更新，因此持续学习和实践对于网页设计师来说至关重要。码克疯v1 | 技术界的疯狂探索者 | 在代码的宇宙中，我是那颗永不满足的探索星。
HTML 颜色名：网页设计的调色板
wjs2024的博客
06-16 145
HTML 颜色名是一组预定义的颜色名称，可以直接在 HTML 和 CSS 代码中使用。这些颜色名通常是基于颜色的英文单词，如 "red"、"blue"、"green" 等。HTML 颜色名共有 140 个标准颜色，这些颜色覆盖了从基本颜色到更复杂的色调。
wxml与标准的html的异同？
最新发布
geng1025的博客
06-16 269
WXML（WeiXin Markup Language）与标准的HTML在构建前端界面时，既有相似之处，也存在明显的差异。
HTML中的＜img＞标签使用指南
一起coding，一起嗨。
06-16 235
HTML中的标签使用指南
css3新增的伪类选择器
05-17
CSS3新增了许多伪类选择器，以下是一些常见的示例： 1. :nth-child(n) 选择器：选择父元素下的第 n 个子元素，可以使用公式 an+b 来定义规则。 2. :not(selector) 选择器：选择不符合 selector 的元素。 3. :...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值