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

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. html2canvas以及domtoimage的使用踩坑总结 动态获取的二维码失效如何生成海报

    //判断手机为安卓还是ios 安卓html2canvas方法 ios系统dom-to-image方法 $(".code").click(function() { var u = n ...

  2. JSP 9大隐式对象和四个作用域的范围

    Java中 九大隐式对象说明 输入/输出对象:  request   response   out 作用域通信对象: session  application  pageContext Servlet ...

  3. java之struts2的ThreadLocal和ActionContext

    在之前的学习中,我们知道struts2可以将表单中的数据自动设置到处理类的属性上,还有类型转换等其他功能.那么struts2是怎样做这件事情的呢? struts2完成这些功能是通过拦截器来完成的,并且 ...

  4. Cookie中的HttpOnly

    1.什么是HttpOnly? 如果您在cookie中设置了HttpOnly属性,那么通过js脚本将无法读取到cookie信息,这样能有效的防止XSS攻击,具体一点的介绍请google进行搜索 2.ja ...

  5. python-django中使用事务以及小坑

    django中使用事务 一.导入事务模块 from django.db import transaction 二.对相应的业务进行事务操作 方式一:为整个函数进行事务操作 @transaction.a ...

  6. 深入理解TCP三握四挥

    面试中被问到不少次TCP的三握四挥,今天特意来做一个总结(一些资料是很久前找的,忘了参考的链接了) 一.三次握手 首先来看一张图 最初,客户机A与服务器B的TCP进程都处于 CLOSED 状态. 然后 ...

  7. 笔谈FFmpeg（二）

    经过前面的学习对FFmpeg的基本流程已经很熟悉了,现在到了掌握其中细节的时候了,用FFmpeg做播放器解码操作中,涉及到了一些结构体,这些结构之间到底有什么关系,它们是怎样协同工作的呢.文章 FFM ...

  8. 获取项目中所有URL--获取swagger上展示的接口信息

    有时我们需要接口的一些基本信息,比如接口请求路径,接口请求方式等,我们用这些信息来做判断,或者入库. 我在开发接口权限的时候就遇到了这个问题,之前写的接口很多,现在需要将这些接口信息存到数据库中, 用 ...

  9. Android自动化测试探索（二）常用自动化工具

    Android常用自动化工具 ADB - 是Google提供的为Android编写UI测试用例的自动化工具, Android开发/测试人员不可替代的强大工具 uiautomator - 是Google ...

  10. three.js展示三维模型

    1.概要 最近学习Three.js,尝试加载一些3d max导出的obj.stl模型,在展示模型的时候遇到了一些问题,模型的尺寸.位置和旋转角度每次都靠手工调整,非常的不方便,就想着写一个方法来随心所 ...