Rel与CSS的联合使用
作者:张经纬 来源:张经纬的博客 发布时间:2010-02-20 13:03:00
Rel-License 是微格式的开发标准之一,简单的说就是通过给引用标签(通常是链接)加上REL属性,来标明所引用链接/数据与文章的关系。
Wordpress很早就引入了rel标准,在我们添加新链接的时候就可以看到“关系”属性。
早期某些社交类搜索引擎可根据这个标签来判断人与人之间的关系,但它对网页开发来说并无意义,值得庆幸的是随着浏览器的逐渐升级,我们可以利用CSS属性选择器以及REL来做一些有意思的功能。
这是一段带有REL属性的HTML结构。
<ul><li><a href="#" rel="civil">小李</a></li><li><a href="#" rel="party">局长</a></li></ul>
页面中他呈现这个样子
因为局长和小李是两个不同的阶级,所以我们应该有区分他们,我打算在小李和局长后面增加两张图片让他表现出这个样式。
过去,我们需要在两个链接标签上增加不同的class来实现这种样式,并且我们需要针对不同的样式书写不同的CSS
.c,.b {background:url(01.png) right center no-repeat;} .b {background-image:url(02.png);}
<ul><li><a href="#" rel="civil" class="c">小李</a></li><li><a href="#" rel="party" class="b">局长</a></li></ul>
现在,我们可以利用REL属性以及属性选择器来完成这个工作。
a[rel~="civil"]{background:url(01.png) right center no-repeat;}a[rel~="party"]{background:url(02.png) right center no-repeat;}
同时,我们的HTML结构也可以剔除那些多余的样式了。
<ul><li><a href="#" rel="civil">小李</a></li><li><a href="#" rel="party">局长</a></li></ul>
另外:ie6不支持属性选择器,但我们可以用JS来修复这个问题。


猜你喜欢
- vue3官方文档 defineProps 和 defineEmits 都是只能在 <
- 本文实例讲述了Python计算斗牛游戏概率算法。分享给大家供大家参考,具体如下:过年回家,都会约上亲朋好友聚聚会,会上经常会打麻将,斗地主,
- 1 HSV上下限颜色的HSV上下限如下表:2 追踪单个颜色import cv2 as cvimport numpy as npcap = c
- 最近在部署Azure虚拟机的时候,一直访问不了网络数据库,一搜资料才知道,Azure默认是不打开入网规则的,需要手动设置。在 Windows
- 即使打开了strict和warnings选项也无妨,下面代码并无错误和警告。#!/usr/bin/perluse strict;use wa
- 在开发的过程中,几乎不可能一次性就能写出毫无破绽的程序,断点调试代码是一个普遍的需求。作为前端开发工程师,以往我们开发的JavaScript
- python格式化字符串有%和{}两种 字符串格式控制符.字符串输入数据格式类型(%格式操作符号)%%百分号标记#就是输出一个%%c字符及其
- 如下所示:原因1:版本不对,如用环境变量设置的python3.7路径,那么用的就是3.7的pip.exe安装了包。却用的是2.7的pytho
- 批量更新不同表的数据今天翻到以前写的批量更新表中的数据的存储过程,故在此做一下记录。当时MySQL中的表名具有如下特征,即根据需求将业务表类
- 本文实例讲述了Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法。分享给大家供大家参考,具体如下:前言:想把QQ
- 案例故事:百度网盘非会员大量上传文件,会弹出:“上传文件数量超出500个现在,开通超级会员后可继续上传”,其实是限制拖入500张相片,并非限
- 区别1let和var用来声明变量,const用来声明常量。变量就是赋值后可以改变它的值,常量就是赋值后就不能改变它的值。当声明为对象时,可以
- 一、Python 矩阵基本运算引入 numpy 库import numpy as np1. python矩阵操作1)使用
- pandas.DataFrame为每一列保存一个数据类型dtype。要仅提取(选择)特定数据类型为dtype的列,请使用pandas.Dat
- 一、什么是用户体验?用户体验的名词解释用户体验(User Experience,简称UE)是一种纯主观的在用户使用一个产品(服务)的过程中建
- 前言Django完全支持也匿名会话,简单说就是使用跨网页之间可以进行通讯,比如显示用户名,用户是否已经发表评论。session框架让你存储和
- Python提供多种数据类型来存放数据项集合,主要包括序列(列表list和元组tuple),映射(如字典dict),集合(set),下面对这
- 内容导读TorchVision Transforms API 扩展升级,现已支持目标检测、实例及语义分割以及视频类任务。新 API 尚处于测
- //-------------------------------------------- // 删除千分点。 //-----------
- 打开终端 切换到根目录 [shell@localhost ~]# su -安装Mysql5.5之前先卸载CentOS自带的Mysql5.0。