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

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. 何时覆盖hashCode()和equals()方法

    The theory (for the language lawyers and the mathematically inclined): equals() (javadoc) must defin ...

  2. EL表达式学习（二）

    1.从特定域中获取值: 2.从请求页面的input标签中,获取值:(同servlet中的getParameter和getParameterValues): 3.获取请求头(同servlet中的getH ...

  3. JDBC基础篇（MYSQL）——PreparedStatement执行DML、DQL等

    注意:其中的JdbcUtil是我自定义的连接工具类:代码例子链接: package day03.prepare; import java.sql.Connection; import java.sql ...

  4. Web安全-信息收集

    信息收集 前言:在渗透测试过程中,信息收集是非常重要的一个环节,此环节的信息将影响到后续成功几率,掌握信息的多少将决定发现漏洞的机会的大小,换言之决定着是否能完成目标的测试任务.也就是说:渗透测试的思 ...

  5. promise例题

    let promise = new Promise(resolve => { console.log('Promise'); resolve(); }); promise.then(functi ...

  6. GUI容器之布局管理器

    布局管理器 布局管理器:frame.setLayout(); 默认值为new flowLayout() 流式布局 frame.setLayout(new FlowLayout(FlowLayout.R ...

  7. ELK+kafka+filebeat搭建生产ELFK集群

    文章原文 ELK 架构介绍 集群服务版本 服务 版本 java 1.8.0_221 elasticsearch 7.10.1 filebeat 7.10.1 kibana 7.10.1 logstas ...

  8. noip模拟48

    A. Lighthouse 很明显的容斥题,组合式与上上场 \(t2\) 一模一样 注意判环时长度为 \(n\) 的环是合法的 B. Miner 题意实际上是要求偶拉路 对于一个有多个奇数点的联通块, ...

  9. Gitlab（1）- 简单介绍

    什么是 Gitlab 一个开源分布式版本控制系统 开发语言:Ruby 功能:管理项目源代码.版本控制.代码复用与查找.权限管控 Git 家族成员 Git:是一种版本控制系统,是一个命令,是一种工具 G ...

  10. Sentry Web 性能监控 - Trends

    系列 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创建版本 快速使用 Docker 上手 Sentry-CLI - 30 秒上手 Source Maps Sentry For ...