本文介绍两种特殊的选择器

1.伪类选择器

2.属性选择器

1.伪类选择器

...: nth-of -type (x)

x为同类型兄弟元素中的排名

例如：

<body>

	<ul>

		<li><a href="xxx.doc">word文档</a></li>

		<li><a href="xxx.ppt">ppt文档</a></li>

		<li><a href="xxx.xls">Excel文档</a></li>

		<li><a href="xxx.txt">txt文档</a></li>

		<li><a href="xxx.rar">压缩文件</a></li>

	</ul>

</body>

//

<style>

      ul li:nth-of-type(1) a {background-position-y: 0px;}

      ul li:nth-of-type(2) a {background-position-y: -46px;}

      ul li:nth-of-type(3) a {background-position-y: -92px;}

      ul li:nth-of-type(4) a {background-position-y: -138px;}

      ul li:nth-of-type(5) a {background-position-y: -184px;}

</style>

2.属性选择器:

(1) ...[ attr = val ] 表示属性等于val的元素

(2)...[ href $= val ] 表示属性结尾等于val的元素

(3)...[ class ^= 'tap' ] 表示属性开头等于val的元素

例如下面代码

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<style type="text/css">

			ul li a{

				background-image: url(1.png);

				background-repeat: no-repeat;

				padding-right: 80px;

				background-position-x: right;

				font-size: 40px;

				line-height: 60px;

			}

			ul li a[href$='.doc']{background-position-y: 0px;}

			ul li a[href$='.ppt']{background-position-y: -50px;}

			ul li a[href$='.xls']{background-position-y: -100px;}

			ul li a[href$='.txt']{background-position-y: -150px;}

			ul li a[href$='.rar']{background-position-y: -200px;}

		</style>

	</head>

	<body>

		<ul>

			<li><a href="xxx.doc">word文档</a></li>

			<li><a href="xxx.ppt">ppt文档</a></li>

			<li><a href="xxx.xls">Excel文档</a></li>

			<li><a href="xxx.txt">txt文档</a></li>

			<li><a href="xxx.rar">压缩文件</a></li>

		</ul>

	</body>

</html>

代码中的ul li a[href$='.doc']{background-position-y: 0px;}

代表同级兄弟元素中href以.doc结尾的选择器

HTML[2种特殊选择器]_伪类选择器&属性选择器的更多相关文章

  1. Selectivizr-让IE6~8支持CSS3伪类和属性选择器

    一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性 ...

  2. CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)

    使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...

  3. css--css选择器，伪类

    前戏 前面我们说过CSS规则由选择器和声明组成,我们要给标签设置属性,那我们就要找到对应的标签,CSS选择器可以帮我们找到我们需要的标签 css选择器有: 标签选择器 类选择器 ID选择器 全局选择器 ...

  4. Bootstrap的优先级、选择器、伪类

    概述:Bootstrap的CSS组件的核心就是选择器的定义以及在各自优先级上的处理.由于大部分的选择器都非常的常见就一笔带过了,这里重点介绍一下Bootstrap用到的知识点. 一.优先级 之前我们使 ...

  5. CSS选择器：伪类（图文详解）

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 伪类(伪类选择器) 伪类:同一个标签,根据其不同的种状态,有不同的样式. ...

  6. CSS3 01. CSS3现状、属性选择器、伪类选择器、结构伪类、伪元素选择器、颜色、文本阴影shadow、盒子模型、私有化前缀

    CSS 3 现状 兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册 需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 ...

  7. CSS基础--属性选择器、伪类选择器

    属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  8. css 04-CSS选择器：伪类

    04-CSS选择器:伪类 #伪类(伪类选择器) 伪类:同一个标签,根据其不同的种状态,有不同的样式.这就叫做"伪类".伪类用冒号来表示. 比如div是属于box类,这一点很明确,就 ...

  9. CSS3每日一练之选择器-结构性伪类选择器

    <!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title> ...

随机推荐

  1. Java HdAcm1174

    空间一般直线的方程是:(x-x0)/a=(y-y0)/b=(z-z0)/c,这是一条过(x0,y0,z0),方向矢量为{a,b,c}的直线.假设已知点的坐标是A(e,f,g),过A点,且与{a,b,c ...

  2. Longhorn 云原生容器分布式存储 - Air Gap 安装

    内容来源于官方 Longhorn 1.1.2 英文技术手册. 系列 Longhorn 是什么? Longhorn 云原生容器分布式存储 - 设计架构和概念 Longhorn 云原生容器分布式存储 - ...

  3. C#·好文分享

    时间:2018-11-14 记录:byzqy 好文收藏,集中分享! 标题:C#接口<通俗解释> 地址:https://www.cnblogs.com/hamburger/p/4681681 ...

  4. Mybatis原理和代码剖析

    参考资料(官方) Mybatis官方文档: https://mybatis.org/mybatis-3/ Mybatis-Parent : https://github.com/mybatis/par ...

  5. CPU内部结构域寄存器

    CPU内部结构域寄存器   64位和32位系统区别: 寄存器是CPU内部最基本的存储单元. CPU对外是通过总线(地址.控制.数据)来和外部设备交互的,总线的宽度是8位,同时CPU的寄存器也是8位,那 ...

  6. Robot framework随机文件

    *** Variables *** @{Example} One Two Three *** Test Cases *** Example ${value}= Evaluate random.choi ...

  7. Nginx从安装到虚拟主机、https加密、重定向的设置

    编译前的设置: 在源代码文件中把版本号注释掉,这是为了防止针对特定版本的恶意攻击 关闭编译时的调试模式 解决编译前的依赖性 进行配置参数: 对参数进行解读: 编译和安装: 做软链接方便调用: 创建ng ...

  8. android kotlin determine file type from bytes 根据文件内容识别文件类型，类似python的filetype

    尝试了 URLConnection.guessContentTypeFromStream(ByteArrayInputStream(bytes)) 和 Tika().detect(bytes) 一个识 ...

  9. 洛谷P1314 聪明的质监员 题解

    题目 聪明的质监员 题解 这道题和之前Sabotage G的那道题类似,都是用二分答案求解(这道题还要简单一些,不需要用数学推导二分条件,只需简单判断一下即可). 同时为了降低复杂度,肯定不能用暴力求 ...

  10. MongoDB（15）- 查询操作里面的游标 cursor

    db.collection.find() 方法里面的游标 该方法最后会返回一个 cursor 正常情况下,访问文档必须迭代游标 重点事项 当调用 find() 函数时,Shell 并不立即查询数据库, ...