CSS3新增选择器-伪类选择器

最新推荐文章于 2024-03-18 14:36:41 发布
最新推荐文章于 2024-03-18 14:36:41 发布
阅读量209 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luxunlx123/article/details/105876807
版权

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        .nav1 li:first-child {background: #f00;}
        .nav1 li:last-child {background: #f0f;}
        .nav1 li:nth-child(3) {background: #00f;}
        .nav1 li:nth-last-child(3) {background: #0f0;}
        </style>
    </head>
    <body>
        <h1>列表</h1>
        <li class="nav1">
            <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>
        </li>

    </body>
</html>

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        .nav1 li:nth-child(odd) {background: #f00;}
        .nav1 li:nth-child(even) {background:#0f0;}
        .nav2 li:nth-last-child(odd) {background:#00f;}
        .nav2 li:nth-last-child(even) {background: #ff0;}
        </style>
    </head>
    <body>
        <h1>列表A</h1>
        <li class="nav1">
            <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>
        </li>
        <h1>列表B</h1>
        <li class="nav2">
            <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>
        </li>
    </body>
</html>

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        .nav1 li:nth-of-type(odd) {background: #f00;}
        .nav1 li:nth-of-type(even) {background:#0f0;}
        </style>
    </head>
    <body>
        <h1>列表A</h1>
        <li class="nav1">
            <ul>
                <li>列表项目1</li>
                <h3>曲肖冰</h3>
                <li>列表项目2</li>
                <h3>曲肖冰</h3>
                <li>列表项目3</li>
                <h3>曲肖冰</h3>
                <li>列表项目4</li>
                <h3>曲肖冰</h3>
                <li>列表项目5</li>
                <h3>曲肖冰</h3>
                <li>列表项目6</li>
                <h3>曲肖冰</h3>
                <li>列表项目7</li>
                <h3>曲肖冰</h3>
                <li>列表项目8</li>
            </ul>
        </li>
    </body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .nav1 li:nth-child(7n+1) {background:#f00;}
            .nav1 li:nth-child(7n+2) {background:#f90;}
            .nav1 li:nth-child(7n+3) {background:#ff0;}
            .nav1 li:nth-child(7n+4) {background:#0f0;}
            .nav1 li:nth-child(7n+5) {background: #00ffff;;}
            .nav1 li:nth-child(7n+6) {background:#00f;}
            .nav1 li:nth-child(7n) {background:#609;}
        </style>
    </head>
    <body>
        <h1>列表A</h1>
        <li class="nav1">
            <ul>
                <li>列表项目1</li>
                <li>列表项目</li>
                <li>列表项目2</li>
                <li>列表项目</li>
                <li>列表项目3</li>
                <li>列表项目</li>
                <li>列表项目4</li>
                <li>列表项目</li>
                <li>列表项目5</li>
                <li>列表项目</li>
                <li>列表项目6</li>
                <li>列表项目</li>
                <li>列表项目7</li>
                <li>列表项目</li>
                <li>列表项目8</li>
            </ul>
        </li>
    </body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        li:only-child {background: #f00;}
        </style>
    </head>
    <body>
        <h1>列表A</h1>
        <li class="nav1">
            <ul>
                <li>列表项目1</li>
                <li>列表项目</li>
                <li>列表项目2</li>
                <li>列表项目</li>
                <li>列表项目3</li>
                <li>列表项目</li>
                <li>列表项目4</li>
 
            </ul>
        </li>
        <li class="nav2">
            <ul>
                <li>列表项目</li>
            </ul>
        </li>
    </body>
</html>

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        :target {background:#0f0;}
        </style>
    </head>
    <body>
      <a href="#text1">示例1</a>|<a href="#text2">示例2</a>
        <div id="text1">
            <h1>示例1</h1>
            <p>内容</p>            
        </div>
        <div id="text2">
            <h1>示例2</h1>
            <p>内容</p>            
        </div>
    </body>
</html>

点击示例1
在这里插入图片描述
点击示例2
在这里插入图片描述

在这里插入图片描述

包含选择器会显示所有属性内容
子选择器仅仅会显示属性下内容，对包含的内容不显示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box1 , .box2{width: 200px; border: 1px #000 solid; margin-bottom: 20px;}
            .box1 span {color: #f00;}
            .box2>span {color: #0f0;}
        </style>
    </head>
    <body>
        <div class="box1">
            曲肖冰
            <span>等</span>
            <h1>静悄悄<span>回不去了</span></h1>
            <i>当真<span>天亮以后说再见</span></i>
        </div>

        <div class="box2">
            曲肖冰
            <span>等</span>
            <h1>静悄悄<span>回不去了</span></h1>
            <i>当真<span>天亮以后说再见</span></i>

        </div>
    </body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box1 li+li {background: #f00;}
            .box2 .ol+li {background: #0f0;}
        </style>

    </head>
    <body>
       
        <h1>列表A</h1>
            <ul class="box1">
                <li>列表项目1</li>
                <li>列表项目2</li>
                <li>列表项目3</li>
                <li>列表项目4</li>
                <li>列表项目5</li>
                <li>列表项目5</li>
                <li>列表项目6</li>
            </ul>
        <h1>列表B</h1>
            <ul class="box2">
                <li>列表项目1</li>
                <li class="ol">列表项目2</ol>
                <li>列表项目3</li>
                <li class="ol">列表项目4</ol>
                <li>列表项目5</li>
                <li class="ol">列表项目6</ol>
            </ul>
    </body>
</html>

在这里插入图片描述

在这里插入图片描述
ol后面所有的li

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box1 .ol~li {background: #f00;}
        </style>

    </head>
    <body>
       
        <h1>列表A</h1>
            <ul class="box1">
                <li class="ol">列表项目1</li>
                <li>列表项目2</li>
                <li>列表项目3</li>
                <li>列表项目4</li>
                <li>列表项目5</li>
                <li>列表项目5</li>
                <li>列表项目6</li>
            </ul>
  
    </body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

房东的喵
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3.0新增伪类选择器
SongYuLong
03-03 683
CSS3.0新增伪类选择器结构性伪类选择器根节点子节点奇，偶个节点xn+y个节点UI元素状态伪类选择器浏览器专属的属性在脚本中修改样式 结构性伪类选择器 根节点 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html"/> <title> :root伪类选择器 </title>
CSS3基础入门 ----- 新增选择器
weixin_65489884的博客
03-11 524
css3新增的选择器
Css提高——Css3的新增选择器
最新发布
迪幻的博客
03-18 677
新型办法：伪类选择器的额外标签法。
nth-child选择（小研究）
天空影
12-13 1863
nth-child用法 小研究
CSS3新增结构伪类选择器
WangZhang_521的博客
01-05 110
CSS3新增结构伪类选择器 <!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"> &
CSS3新增选择器 nth-child(){}，盒子阴影、文字阴影，背景，浏览器内核与前缀
qq_60839348的博客
11-28 1785
CSS3新增选择器 nth-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 个子元素，不论...
【第四篇】CSS选择器之伪类选择器
Ethan's Blog
07-17 2854
介绍CSS中伪类选择器，包括:first-child,:first-of-type等子类伪类选择器，:focus,:hover等UI伪类选择器。
CSS3新增属性——新增选择器（属性选择器、结构伪类选择器、伪元素选择器）
m0_53619602的博客
06-06 1202
结构伪类选择器主要根据文档结构来选择器元素,常用于根据父级选择器里面的子元素 效果图E[att="val"] 效果图： E[att^="val"] 效果图： E[att$="val"] 效果图： E[att*="val“] 效果图： 结构伪类选择器主要根据文档结构来选择器元素,常用于根据父级选择器里面的子元素 E:firs...
css定位-css新增选择器（内减，属性，伪类，2d变换，过渡）
qq_52711676的博客
06-08 456
定位的使用：1.4种定位方式：静态、相对、绝对、固定2.4种边偏移属性：left、right、top、bottom注意：偏移值准确的理解是“距离什么位置有多少像素” 。 如 top:100px; 距离顶部为100像素 （向下走）所有标准流都是静态定位语法： 2.相对定位 相对于自身在标准流的位置进行定位移动语法： 使用场景：微调元素和配合绝对定位来实现效果从父元素一直往上找设置过定位的直系父元素，作为自己的偏移参照物，找不到就继续往上找，直到html停止语法： 使用场景：配合相对定位使用（
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>
HTML5——CSS3新增伪类选择器（常用）
Lanly-Li的博客
08-03 889
结构性伪类选择器 :first-child 第一个子节点、:last-child 最后1个子节点、:nth-child(n) 第n个子节点、:nth-last-child(n) 倒数第n个子节点、:only-child 唯一的子节点 :nth-child(n)、:nth-last-child(n)还有一些特殊用法，通过括号内的东西来限制选择： 1、odd/event:第奇数个...
CSS3新增的伪类选择器，让你体验使用CSS3的快感。
湮顾千古的博客
10-27 7512
CSS选择器用于选择你想要的元素的样式的模式。伪类元素主要用于对已有选择器做进一步的限制，对已有选择器能匹配的元素做进一步的过滤。 伪类选择器 1.UI元素状态伪类选择器 UI元素状态伪类选择器主要用于根据UI元素的状态进行筛选，UI元素状态伪类选择器有如下几个。 示例 描述 示例 描述 :link 选择链接元素 :visited 访问过链接元素...
CSS3选择器
大佐
06-29 203
CSS3选择器 css3选择器主要分为：属性选择器和结构伪类选择器 属性选择器： e[type="text"]{} 选择名字完全匹配的这个标签,eg:div[class="box"]{width:100px;}div中class等于box的宽度改为100px。 e[type*=""] {} *号选择的是包含的属性值 e[type^=""] {} ^号选择是以“”里面开头的...
CSS3 新增伪类选择器
wangjingyi
03-27 184
伪类选择器 [b]:nth-child(n)选择器[/b] 用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的[color=red]起始值始终是1[/color]，而不是0!表达式的值为0或小于0的时候，不选择任何匹配的元素。 [b]:nth-last...
【04】HTML5+CSS3：01-HTML5新增标签、多媒体标签、input标签、新增表单属性、CSS3属性选择器、伪元素选择器、2D转换
忘尘丶莫负的博客
06-02 561
文章目录HTML5 第一天一、什么是 `HTML5`二、`HTML5 ` 新增标签三、多媒体音频标签四、多媒体视频标签五、新增 input 标签六、新增表单属性七、`CSS3 ` 属性选择器(上)八、`CSS3 ` 属性选择器(下)九、结构伪类选择器十、`nth-child` 参数详解十一、`nth-child` 和 `nt-of-type` 的区别十二、伪元素选择器十三、伪元素的案例十四、`2D` 转换之 `translate`十五、让一个盒子水平垂直居中十六、`2D 转换 rotate` HTML5
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、付费专栏及课程。

余额充值