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

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. SoutceTree用户名或者密码输入错误解决方案

    soutceTree在拉取代码时候需要输入账户名或者密码,如果一时输入错了,可以这样修改: 1.找到这个目录:C:\Users\Administrator\AppData\Local\Atlassia ...

  2. 分布式链路追踪系统Sleuth和ZipKin

    1.微服务下的链路追踪讲解和重要性 简介:讲解什么是分布式链路追踪系统,及使用好处 进行日志埋点,各微服务追踪. 2.SpringCloud的链路追踪组件Sleuth 1.官方文档 http://cl ...

  3. Jemeter压力测试

    Jmeter教程 简单的压力测试 Jmeter是一个非常好用的压力测试工具.  Jmeter用来做轻量级的压力测试,非常合适,只需要十几分钟,就能把压力测试需要的脚本写好. 转载自小坦克:https: ...

  4. 使用元数据设计的update、query封装

    package util; import java.lang.reflect.InvocationTargetException; import java.sql.Connection; import ...

  5. tomcat中修改Web站点的默认根目录

    转自:http://blog.csdn.net/wzqcongcong/article/details/6387907 想把Tomcat的默认网站根目录修改成自己指定的目录,比如:F:/MyWeb.这 ...

  6. linux 常用命令(二)——(centos6.8-centos7)防火墙的启动、关闭

    centos 6.8 [centos6.5]: 查看chkconfig列表里面是否有iptables的服务: chkconfig | grep iptables 查看防火墙状态: service ip ...

  7. freeswitch新增模块

    概述 freeswitch的架构由稳定的核心模块和大量的外围插件式模块组成.核心模块保持稳定,外围模块可以动态的加载/卸载,非常灵活方便. 外围模块通过核心提供的 Public API与核心进行通信, ...

  8. 跨域@RequestBody@RequestParam 和JSON.stringify

  9. SpringSecurity入门

    基础 spring security的底层就是一个过滤器链 ExceptionTranslationFilter是一个异常过滤器,用来处理认证授权过程中的异常 UseranmePasswordAuth ...

  10. Golang gomail 发送邮件 --初使用

    gomail是一个第三方库,可以发送邮件 安装:go get -u github.com/go-gomail/gomail 使用示例: m := gomail.NewMessage() m.SetHe ...