#CSS伪类选择器

##使用css伪类选择器需要注意的

使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时,
网页渲染是从语句的后面开始读取的,也就是说,类似 p:first-child 这样的伪类选择器,指的是“某元素的以p元素作为第一子项的那项”,而不是“p元素的第一个子项”.

原因是因为,其实这里在p:之前,省略了 xxx & nbsp; 这几个字符,导致很容易产生误解。

e.g.

    div p:first-child{color:red;}

    <div>

        <h1>111</h1>

        <p>222</p>

        <p>333</p>

    </div>

这里的222字符不会变红,因为它不是div元素的以p元素为第一子项的那个元素,在这个例子中,div 元素以p元素作为第一子项是不成立的,没有任何一个元素符合这个条件,h1元素也不会响应color:red.

##用css伪类选择器去除带有边框的最后一个元素的办法

如果在设计一个导航栏时,每个元素之间有竖线相隔,通过伪类选择器可以很简洁地去除最后一个li元素的右边框线。

    li{
border-right:1px red solid;
}
ul li:last-child{
border-right:none;
}

即可去除最右边的也就是最后一个li的有边框线,而不用额外给最后一个li取名。

关于CSS伪类选择器的更多相关文章

  1. CSS伪类选择器

    一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...

  2. CSS伪类选择器 - nth-child(an+b):

    CSS伪类选择器 - nth-child(an+b): 第一种:简单数字序号写法:nth-child(number)直接匹配第number个元素.参数number必须为大于0的整数.li:nth-ch ...

  3. CSS伪类选择器active模拟JavaScript点击事件

    一.说明 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式. IE7及更早浏览器只支持a元素的:active,从IE8开始支持其它元素的:active. 另:如果需要给超链接定义:访问前 ...

  4. css伪类选择器的查找顺序

    当伪类选择器last-child.first-child无效时,就是因为不了解css伪类选择器的查找顺序造成选中某一元素失败. 先给出一段dom <body> <div>第一个 ...

  5. css伪类选择器及伪元素选择器

    1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...

  6. CSS伪类选择器和伪元素选择器

    CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{ba ...

  7. css伪类选择器详细解析及案例使用-----伪类选择器(1)

    动态伪类选择器:E:link :选择匹配的E元素,并且匹配元素被定义了超链接并未被访问过.E:visited :选择匹配的E元素,而且匹配的元素被定义了连接并已被访问过.E:active :选择匹配的 ...

  8. css 伪类选择器制作登录框表单

    使用伪类选择器 制作鼠标悬停时文本框出现橙色虚线边框 制作鼠标激活时出现背景颜色淡橙色 使用css制作文本框圆角矩形效果,制作文本框背景图片,及背景不重复效果 <!DOCTYPE html> ...

  9. 彻底搞懂CSS伪类选择器:is、not

    本文介绍一下Css伪类:is和:not,并解释一下is.not.matches.any之前的关系 :not The :not() CSS pseudo-class represents element ...

随机推荐

  1. Asp.net MVC @Html.DisplayNameFor中文乱码解决办法

    这是utf8的问题,vs2015默设要用utf8编码,以前的gb2312皆会产生乱码 这问题还是会继续发生,因为常会复制旧程序档进新方案.它会出现很奇怪的错误,而不是这么明显的乱码,你怎么抓bug都抓 ...

  2. 经常使用的android弹出对话框

    我们在平时做开发的时候,免不了会用到各种各样的对话框,相信有过其它平台开发经验的朋友都会知道,大部分的平台都仅仅提供了几个最简单的实现,假设我们想实现自己特定需求的对话框,大家可能首先会想到,通过继承 ...

  3. 升级、备份红帽PaaS openshift 上的 wordpress

    红帽提供了一个很稳定的PAAS服务平台:openshift!此博客即作为wordpress建在里面. 这里记录怎样升级与备份wordpress. 预备: 安装 openshift command li ...

  4. hive 经常使用命令

    1.查看表结构信息   desc formatted table_name;   desc table_name; 查看关联文件: desc extended f_tblog_online_mds; ...

  5. oc-09-#pragma mark指令的使用,用于查找代码

    // 3-[了解]#pragma mark指令的使用,用于查找代码. #import <Foundation/Foundation.h> //声明一个狗类 #pragma mark 声明狗 ...

  6. C#_Jquery无刷新上传

    昨晚网友有下载了一个jQuery无刷新上传的小功能,他尝试搬至ASP.NET MVC应用程序中去,在上传死活无效果.Insus.NET使用Teamviewer远程桌面,操作一下,果真是有问题.网友是说 ...

  7. Redis 客户端连接

      Redis 通过监听一个 TCP 端口或者 Unix socket 的方式来接收来自客户端的连接,当一个连接建立后,Redis 内部会进行以下一些操作: 首先,客户端 socket 会被设置为非阻 ...

  8. USB相关知识

    USB基础知识概论 如何实现Linux下的U盘(USB Mass Storage)驱动: How to WriteLinux USB MSC (Mass Storage Class) Driver U ...

  9. 纯C++ 连接SQL Server2005 数据库读写操作的小例子

    一个测试c++链接 sql server 数据库的例子// 数据库说明// 数据库用户为 sa , 密码为 空// 数据库为 MyDB// 表为 UserInfo// 表字段为 Name . Pass ...

  10. javascript 通过面向对象编写圆形数字时钟

    效果如图所示,代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...