#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. 用C#调用Matlab图像处理自制QQ游戏2D桌球瞄准器

    平时不怎么玩游戏,有时消遣就玩玩QQ里的2D桌球,但是玩的次数少,不能像骨灰级玩家一样百发百中,肿么办呢?于是某天突发奇想,决定自己也来做个“外挂”.说是外挂,其实只是一个瞄准器,毕竟外挂是修改别人的 ...

  2. AS3 Signals

    在项目中,使用as3内置事件框架必须通过自定义事件才可以实现值的传递,大量自定义事件.定义常量和整个事件派发的管理.添加侦听器.移除侦听器,或多或少都会带来大量的代码,而signals这个框架思想原来 ...

  3. ssh连接阿里云一段时间不操作自动断开

    打开/etc/ssh/sshd_config 添加或修改: ClientAliveInterval 120 ClientAliveCountMax 0

  4. Session fixation--wiki

    http://en.wikipedia.org/wiki/Session_fixation In computer network security, session fixation attacks ...

  5. 超级强大的vim配置(vimplus)

    vimplus vimplus是vim的超级配置安装程序 github地址:https://github.com/chxuan/vimplus.git,欢迎star和fork. 接触vim到现在也有几 ...

  6. Little Bishops uva861

    Little Bishops A bishop is a piece used in the game of chess which is played on a board of square gr ...

  7. struts2.1笔记01:MVC框架思想浅层理解

      1. Struts 1是全世界第一个发布的MVC框架: 它由Craig McClanahan在2001年发布,该框架一经推出,就得到了世界上Java Web开发者的拥护,经过长达6年时间的锤炼,S ...

  8. Mac下启动Apache

    1.启动 sudo apachectl -k start 2.重新启动 sudo apachectl -k restart     //-------------------------------- ...

  9. linux mail 配置

    1:sudo apt-get install sendmail sendmail-cf2:ps aux | grep sendmail3.配置/etc/mail/sendmail.mc    FEAT ...

  10. DHCP服务详解

    DHCP概念和原理 dhcp服务作用 为大量客户机自动分配地址,提供集中管理 减轻管理和维护成本,提高网络配置效率 可分配的地址信息主要包括: 网卡的IP地址.子网掩码 对应的网络地址 默认网关地址 ...