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

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. mysql基础操作（一）：DDL、DML

    -- 1.在命令行中开启数据库: net start mysql -- 2.在命令行中关闭数据库: net stop mysql 1.DDL语句:create.drop.alter -- 查看所有的数 ...

  2. 微信小程序学习笔记二 数据绑定 + 事件绑定

    微信小程序学习笔记二 1. 小程序特点概述 没有DOM 组件化开发: 具备特定功能效果的代码集合 体积小, 单个压缩包体积不能大于2M, 否则无法上线 小程序的四个重要的文件 *js *.wxml - ...

  3. 优先队列PriorityQueue&Lambda&Comparator

    今天翻阅<Labuladuo的算法小抄>时发现在使用优先队列的PriorityQueue解决一道hard题时(leetCode 23),出现了如下代码: ListNode mergeKLi ...

  4. Hutool中那些常用的工具类和方法

    Hutool中那些常用的工具类和方法 Hutool是一个Java工具包,它帮助我们简化每一行代码,避免重复造轮子.如果你有需要用到某些工具方法的时候,不妨在Hutool里面找找,可能就有.本文将对Hu ...

  5. MySQL-表迁移工具的选型-xtrabackup的使用

    1.1. 场景 有的时候test人员可能需要在测试库上比较新的数据,这时候只能是从生产库上面去那了.如果是小表还好实用mysqldump/mysqlpump就可以轻松的解决.但是,如果遇到了大表这将是 ...

  6. JavaWeb使用Filter进行字符编码过滤 预防web服务中文乱码

    JavaWeb使用Filter进行字符编码过滤 预防web服务中文乱码 准备条件:一个创建好的 JavaWeb 项目 步骤: 1.创建一个类并实现 Filter 接口 import javax.ser ...

  7. 快速入门PaddleOCR，并试用其开发一个搜题小工具

    介绍 PaddleOCR 是一个基于百度飞桨的OCR工具库,包含总模型仅8.6M的超轻量级中文OCR,单模型支持中英文数字组合识别.竖排文本识别.长文本识别.同时支持多种文本检测.文本识别的训练算法. ...

  8. Tars | 第4篇 Subset路由规则业务分析与源码探索

    目录 前言 1. Subset不是负载均衡 1.1 任务需求 1.2 负载均衡源码结构图 1.3 负载均衡四种调用器 1.4 新增两种负载均衡调用器 1.5 Subset应该是"过滤&quo ...

  9. 2.设计模式常用的UML图分析(用例图、类图与时序图)

    1-用例图 概述 展现了一组用例.参与者以及他们之间的关系. 用例图从用户角度描述系统的静态使用情况,用于建立需求模型. 用例特征 保证用例能够正确捕捉功能性需求,判断用例是否准确的依据. 用例是动宾 ...

  10. webpack learn1-配置项目加载各种静态资源及css预处理器2

    继续在webpack.config.js中配置loader { test:/\.css$/, use: [ 'style-loader', 'css-loader' ] },{ test:/\.(jp ...