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

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. 『Go基础』第1节 Go语言简介

    1. Go语言简介 Go语言起源于2007年, 并于2009年开源. Go语言是一门全新的静态类型开发语言, 具有自动垃圾回收, 丰富的内置类型, 错误处理, 并发编程等特征.

  2. BZOJ4141 THUSC2013 魔塔 贪心

    没得传送门 考虑当\(Atk\)增大时,\(Def\)一定越来越没用,因为回合数在变少.所以考虑从小到大枚举\(Atk\)然后双指针计算. 设\(f_i(x)\)表示在\(Atk = i\)时,\(D ...

  3. idea之常见问题解决

    在启动类中的main方式时报类似java.lang.NoClassDefFoundError: javax/servlet/http/HttpServletRequest异常 解决方案:

  4. treeMultiselect 去掉勾选项

    场景描述:弹窗,显示树形结构,节点层次可变(可只有一级节点,也可是多级节点),限制只能选择一个节点! 1.修改jquery.tree-multiselect.min.js 文件 2.前台页面 参考代码 ...

  5. 【阿里云开发】- 安装MySQL数据库

    我用的机器配置是 阿里云轻量服务器,系统:CentOS7.3,内存:2G,系统盘40G,1核. 在CentOS中默认安装有MariaDB,这个是MySQL的分支,但为了需要,还是要在系统中安装MySQ ...

  6. 某位前辈的Image识图，，有点意思，先留存

    import PIL from PIL import Image def get_bin_table(threshold=155): ''' 获取灰度转二值的映射table 0表示黑色,1表示白色 ' ...

  7. 关于在centos下安装python3.7.0以上版本时报错ModuleNotFoundError: No module named '_ctypes'的解决办法

    3.7版本需要一个新的包libffi-devel,安装此包之后再次进行编译安装即可. #yum install libffi-devel -y#make install若在安装前移除了/usr/bin ...

  8. Spark 用Scala和Java分别实现wordcount

    Scala import org.apache.spark.{SparkConf, SparkContext} object wordcount { def main(args: Array[Stri ...

  9. Multiple network matches found for name 'selfservice', use an ID to be more specific.报错

    今天正在做openstack实例时输入neutron subnet-create --name selfservice   --dns-nameserver 114.114.114.114 --gat ...

  10. java基础（12）---异常

    一.throws和throw 用户程序自定义的异常和应用程序特定的异常,必须借助于 throws 和 throw 语句来定义抛出异常. 区别: 1.概念 throws E1,E2,E3只是告诉程序这个 ...