一、结构（位置）伪类选择器（ : ）

1、:first-child

2、:last-child

3、:nth-child(n)或者:nth-child(2n)或者:nth-child(2n+1)

<body>

    <ul>

        <li>我是第一个</li>

        <li>我是第二个</li>

        <li>我是第三个</li>

        <li>我是第四个</li>

        <li>我是第五个</li>

        <li>我是第六个</li>

        <li>我是第七个</li>

        <li>我是第八个</li>

        <li>我是第九个</li>

        <li>我是第十个</li>

    </ul>

</body>
<style>

        ul li:first-child{

            /* 选择第一个li */

            background: rgb(228, 22, 22);

        }

        ul li:last-child {

            /* 选择最后一个li */

            background: rgb(109, 18, 212);

        }

        ul li:nth-child(6){

            /* 选择第n个li */

            background: rgba(140, 214, 19);

        }

        ul li:nth-child(2n){

            /* 选择偶数li（注：n=0,1,2,3,4……） */

            font-size: 20px;

        }

        ul li:nth-child(2n+1){

            /* 选择奇数li（注：n=0,1,2,3,4……） */

            font-size: 12px;

        }

    </style>

二、属性选择器（[   ]）

1、[ 属性  ]

2、可以和正则表达式混用，如 $ 和 ^ 和  * 

<body>

    <ul>

        <li class="test">我是第一个</li>

        <li class="two123">我是第二个</li>

        <li class="twotabc">我是第三个</li>

        <li class="abcfour">我是第四个</li>

        <li class="ggg-four">我是第五个</li>

        <li class="bug">我是第六个</li>

        <li class="bug_ee">我是第七个</li>

        <li class="hhbug">我是第八个</li>

        <li class="bug345">我是第九个</li>

        <li class="test">我是第十个</li>

    </ul>

</body>
<style>

        ul li[class=test] {

            /* 选择有属性为class=test的li（第一个和第十个） */

            background: rgb(206, 25, 25);

        }

        ul li[class$=four]{

            /* 选择属性里结尾有four的类名的li（第四个和第五个）*/

            background: rgb(106, 9, 216);

        }

        ul li[class^=two]{

            /* 选择属性里开头有two的类名的li（第二个和第三个） */

            background: rgb(54, 201, 10);

        }

        ul li[class*=bug]{

            /* 选择属性里所有带有bug的类名的li（第六、七、八、九个） */

            font-size: 30px;

        }

 </style>

CSS3 新增选择器：伪类选择器和属性选择器的更多相关文章

  1. CSS3新增的伪类选择器

    伪类选择器的作用:对已有选择器做进一步的限制,对已有选择器能匹配的元素做进一步的过滤.CSS 3提供的伪类选择器主要分为以下三类: 结构性伪类选择器 UI元素状态伪类选择器 其他伪类选择器 1.结构性 ...

  2. CSS3新增的伪类

    Element1 ~ element2:选择前面有element1的所有element2元素 [attr ^= val] 属性值以val开头的元素 [attr $= val] 属性值以val结尾的元素 ...

  3. css3新增的伪类和伪元素

    E:target事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素.文档或窗口 E:disabled表示不可点击的表单控件 E:enabled表示可点击的表单控件 E:checked表 ...

  4. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  5. CSS3的一个伪类选择器:nth-child()

    CSS3的一个伪类选择器“:nth-child()”. Table表格奇偶数行定义样式: 语法: :nth-child(an+b) 为什么选择她,因为我认为,这个选择器是最多学问的一个了.很可惜,据我 ...

  6. 妙味css3课程---1-2、css3中新增的伪类和伪元素有哪些

    妙味css3课程---1-2.css3中新增的伪类和伪元素有哪些 一.总结 一句话总结: 1.div:target{}是什么意思? 比如a标签的锚点链接到div,div:target{}就可以找到这个 ...

  7. CSS 基础知识点 样式 选择器 伪类

    CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...

  8. css3学习之--伪类与圆角

    随着css3.0的发布到逐渐完善,目前已经大部分浏览器已经能较好地适配,所以写一些css3的学习经历,分享心得,主要以案例讲解为主,话不多说,今天以css3的新增的“圆角”属性来讲解,基于web画一个 ...

  9. css3怎么分清伪类和伪元素

    伪类用于向某些选择器添加特殊的效果. 伪元素用于将特殊的效果添加到某些选择器. 伪类有::first-child ,:link:,vistited,:hover,:active,:focus,:lan ...

  10. ::before ::after CSS3中的伪类和伪元素

    ::before和::after伪元素的用法 一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:fo ...

随机推荐

  1. [LOJ3048] [十二省联考2019] 异或粽子

    题目链接 LOJ:https://loj.ac/problem/3048 洛谷:https://www.luogu.org/problemnew/show/P5283 Solution 考虑每个子串都 ...

  2. ChipGenius 识别U盘主控信息

    ChipGenius 识别U盘主控信息 ================== End

  3. 可分离滤波器设计高斯滤波 CUDA程序优化， 实验记录

    环境:RTX2060 ,1920X1080p ,循环10次, kernal_size=8 一 .测试前128个线程拷贝到dst数据的性能  ,只测试行卷积, block=(128+2r)X1 1. 使 ...

  4. Wenaox 一款轻量性能好的微信小程序状态管理库

    感慨一下!!! 从开始开发 wenaox 从开始到现在,,时不时更新一下,改一改 bug,却发现已经快 1 年了 orz 虽然很少人用 hhh,但偶尔也会有人提一些问题,我就知道还有人用的~ 感兴趣的 ...

  5. JavaScript函数参数传递

    Hello,今天和大家分享下JS中的一个基本概念:函数参数传递! 先来看看一个DEMO var str="hello world"; function func(s){ s=&qu ...

  6. 【iOS】去除字符串首尾空格或某字符

    在iOS的实际开发中,常会出现需要去除空格的情况,总结有三种情况: 去除字符串首尾连续字符(如空格): 去除字符串首部连续字符(如空格): 去除字符串尾部连续字符(如空格): 去除字符串首尾连续字符( ...

  7. mysql 的使用

    1. 安装 https://dev.mysql.com/downloads/mysql/ 2. 配置 $ vim ~/.bash_profile $ export PATH=$PATH:/usr/lo ...

  8. pssh安装及使用

    pssh全称是parallel-ssh,基于Python编写的并发在多台服务器上批量执行命令的工具,它支持文件并行复制.远程并行执行命令.杀掉远程主机上的进程等:该工具可以视作ansible的简化版本 ...

  9. 1、uiautomator2常用语法

    uiautomator2常用语法 连接设备 使用USB连接: d=u2.connect_USB('148b4090')输入手机序列号 d是给当前连接设备定位一个变量 获取设备的信息: print(d. ...

  10. css背景雪碧图等

    1.背景图 雪碧图技术 要设置背景,是要设置在某个盒子上 <!doctype html> <html lang="en"> <head> < ...