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

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. 工具库用久了，你还会原生操作 Cookie 吗？

    用得好了,工具库和框架确实是一大助力,但就怕我们会因此习惯了走捷径,而忘了自己的根本依靠是什么. 前言 前端技术的飞速发展,给从业人员不可避免地带来了"疲劳"感,我们常常会感叹学不 ...

  2. String转double失去精度问题

    最近遇到一个坑,微信小程序中退款 19.9的字符串转double变成19.89,导致退不成功 . 坑死我了.现在把更改后的代码贴出来 public static void main(String[] ...

  3. win7上帝模式详解

    最近,Windows7"GodMode"(上帝模式)被国内各大网站和论坛炒得沸沸扬扬."GodMode"始见于国外网站"GeekInDisguise& ...

  4. Python之pytesseract模块-实现OCR

    在给PC端应用做自动化测试时,某些情况下无法定位界面上的控件,但我们又想获得界面上的文字,则可以通过截图后从图片上去获取该文字信息.那么,Python中有没有对应的工具来实现OCR呢?答案是有的,它叫 ...

  5. PyQT5：信号和槽

    PyQT5:信号和槽 信号和槽 Qt的主要特征之一是它使用信号和插槽在对象之间进行通信. 当潜在的事件发生时,会发出一个信号.插槽是可调用的Python,如果将信号连接到插槽,则在发出信号时将调用该插 ...

  6. 为什么Class实例可以不是全局唯一的——自定义类加载器

    为什么Class实例可以不是全局唯一的 通过定义两个类加载器加载同一字节码文件来证明Class实例为什么不是全局唯一的 1.将一个名为Demo(没有后缀)的字节码文件放在D盘根目录 2.定义两个类加载 ...

  7. 你的 JVM 基础“大厦”稳健吗？

    [从 1 开始学 JVM 系列] JVM 对于每位 Java 语言编程者来说无疑是"重中之重",尽管我们每天都在与它打交道,却很少来审视它.了解它,慢慢地,它成为了我们" ...

  8. Linux常用命令 - nl命令详解

    21篇测试必备的Linux常用命令,每天敲一篇,每次敲三遍,每月一循环,全都可记住!! https://www.cnblogs.com/poloyy/category/1672457.html 显示行 ...

  9. nacos配置中心模块详解

    本文已收录 https://github.com/lkxiaolou/lkxiaolou 欢迎star. 配置中心 业务上的配置,功能开关,服务治理上对弱依赖的降级,甚至数据库的密码等,都可能用到动态 ...

  10. 通过HttpURLConnection下载图片到本地--批量下载

    一.背景说明 这篇文章讲述的是批量下载附件,在上一篇文章中,介绍了下载单个附件(上一篇文章). 二.实现思路 主要的实现思路:创建文件夹->文件夹中创建需要下载的文件->压缩文件夹-> ...