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

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. AX 2009中Set运用

    Set运行: 例子: Set m_set = new Set(Types::String); m_set.add("AAA"); m_set.add("BBB" ...

  2. [洛谷P4052][JSOI2007]文本生成器

    题目大意:有$n$个字符串$s_i$,问有多少个长度为$m$的字符串至少包含$n$个字符串中的一个,字符集 A-Z .$s_i,m\leqslant100,n\leqslant60$ 题解:$AC$自 ...

  3. Unity的学习笔记（摇杆制作）

    最近看到了一个很新颖的摇杆,就是按下后,会出现在按下的位置,并且拖着走的时候,到一定距离整个摇杆也会跟着走,于是自己测试做了一下这种摇杆 首先,先说一下我的摇杆预设体结构 代码挂在哪里都无所谓,关键是 ...

  4. K8S conul部署

    官网有Helm方式的安装文档(https://www.consul.io/docs/platform/k8s/index.html) 一,准备工作: 1,k8s环境 2,nfs服务器 二,创建PV n ...

  5. 隐马尔可夫模型（HMM）的分类

    1.遍历型(ergodic model) 即每个状态都可以由任意一个状态演变而来,aij>0,for all i , j. 如图: 2.left-right type of HMM 每个状态只能 ...

  6. Django使用LDAP

    https://github.com/python-ldap/python-ldap Quick usage example: import ldap l = ldap.initialize(&quo ...

  7. 【洛谷 P4070】 [SDOI2016]生成魔咒（后缀自动机）

    题目链接 建出\(SAM\)后,不同子串个数就是\(\sum len(i)-len(fa(i))\) 因为\(SAM\)在线的,所以每加入一个字符就能直接加上其贡献,于是这道题就没了. 因为\(x\) ...

  8. python day7： time,datetime,sys,pickle,json模块

    目录 python day 7 1. time模块 2. datetime模块 2.1 date类 2.2 time类 2.3 datetime类 2.4 timedelta类 2.5 tzinfo时 ...

  9. mac上使用gitlab拉项目报错Permissions 0644 for ...

    解决办法:执行命令sudo chmod 0600 /Users/***(电脑名)/.ssh/id_rsa

  10. 前端js入门之 JavaScript 对象直接量

    JavaScript中,创建对象可以使用构造函数方式. 代码实例如下: obj.webName = "博客园"; obj.address = "编程语言"; 以 ...