最容易让人误解的10个 CSS 选择器

这些选择器包括 first-child、last-child、only-child、nth-child(n)、nth-last-child(n) 和 first-of-type、last-of-type、only-of-type、nth-of-type(n)、nth-last-of-type(n)。在所有的选择器中,这十个选择器大概是最容易被人误解的选择器。

一、关于n

1)n 的表达式为:xn + y 。如1、2n、2n+1。

2)nth-child(n) 系列的 n 是对父元素的所有子元素进行编号;nth-type-child(n) 中的 n 仅对同一类型的元素进行编号,忽略中间夹杂的其他元素。

二、E:first-child 与 E :first-child

上面的两种写法并不相同,区别在于 :first-child 前有无空格,有无空格,差别很大,这也正是最易让人误解的地方。

1)没有空格的 E:first-child 表示“选择这样的E元素,E元素是其父元素的第一个子元素”;

2)有空格的 E :first-child 表示”选择 E 元素的第一个子元素“。

时间: 2024-11-05 12:33:19

最容易让人误解的10个 CSS 选择器的相关文章

被多数人误解的外链判定标准

前两年,seo领域流行一句话"内容为王,外链为皇",内容和外链的质量成为了网站排名能否上升的重要判定标准. 直到最近一段时间,百度的算法更新,有些人说"现在内容最重要了,外链的作用被大大削弱了".个人觉得说这些话的站长们一定是制造垃圾外链的高手(不带攻击人的意思),垃圾外链被百度毫不留情的删除那是必然的.但是高质量外链,百度还是会很认可的. 好像又出现了站长们耳朵都听出茧的一个词:高质量外链!什么叫高质量外链?pr9 br9的论坛(假设存在)加个签名随便发个帖子就是

10个CSS简写技巧让你永远受用

转自:http://blog.bingo929.com/10-css-shorthand-tips.html 前言: CSS简写就是指将多行的CSS属性声明化成一行,又称为CSS代码优化.CSS简写的最大好处就是能够显著减少CSS文件的大小,其实还有很多其他益处.臃肿而杂乱的CSS样式表会使你遇到问题是难以调试.尤其是当一个团队在进行设计的时候,你的臃肿的CSS代码会使你的团队其他成员的工作效率下降. 今天,暴风彬彬整理了一些CSS简写技巧,它们其实是CSS最常用的写法,但是太多的人使用Drea

网页重构应该避免的10大 CSS 糟糕用法

对于网页重构来说,CSS禅意花园 是网页布局从 table 表格转到了 html +css 的标志 .这些年来,随着我们的网站越来越复杂:html5,css3,新的技术.新的属性,越来越多的开发者开始思考和尝试提高他们的 CSS 技能.那么我们从哪里着手呢?对于网页重构工作来说,我们应该养成什么样的开发习惯?一个糟糕的 css 用法是怎样的?我们应该怎么处理这些糟糕的 css.今天这篇文章,我将谈一谈10个我们应该避免的 css 糟糕用法,当然,我们也会分享怎么才是正确的用法. 为了方便大家理解

10个CSS简写/优化技巧

CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写. CSS简写的最大好处就是能够显著减少CSS文件的大小,优化网站整体性能,更加容易阅读. 下面介绍常见的CSS简写规则: 一.盒子大小 这里主要用于两个属性:margin和padding,我们以margin为例,padding与之相同. 盒子有上下左右四个方向,每个方向都有个外边距: margin-top:1px; margin-right:2px; margin-bottom:3px; margin-left:4p

(转)SQL server 容易让人误解的问题之 聚集表的物理顺序问题

对于MS SQL server 数据库,有几个容易让人产生误解的问题,对于这几个问题,即使很多 SQL server DBA 都有错误认识或者认识不充分,所以我想撰文几篇,把这些容易理解错误的问题前前后后深入阐述一下,也希望纠正一下网上对这几个问题的讹传(我也可能有认识不对的地方,欢迎批评指正). 第一个问题:聚集表的物理顺序问题.这个问题很有迷惑性,因为很多教科书在讲到聚集索引的时候都会出现“聚集索引是按照聚集键的排序顺序物理地存储数据” 类似的说法,因此我们很容易产生以下几种误解: 误解一:

常被人误解的基础知识(一)C#

对值类型和引用类型的误解(引用类型存储在堆上,值类型存储在栈上) 在学习C#基础篇幅的时候总是逃不掉值类型和引用类型,很多新手包括我以前对它的理解也只是停留在"引用类型存储在堆上,值类型存储在栈上". 这个误区主要归咎于我们根本没有动脑筋,第一句话是正确的,引用类型的实例总是在堆上创建的.但后一句就有问题了.设想假定一个类中有一个int类型的实例变量. (如下代码) 1 public class Person 2 { 3 public int Age { get; set; } 4 }

常让人误解的一道js小题

今天无意中看到一个js笔试题,不由得想起初学js那会被各种题目狂虐的心酸,虽说现在也会被笔试题所虐,但毕竟比之前好了很多,至少对于这道题我还是能正确解答上来的: var x = 1; function printx(){ console.log(x); } function show(f){ var x = 2; (function(){ f(); })() } show(printx); //1 结果后台会打印1,而不是2.这有些不合常理,因为很多人会错误的认为:函数show中的f()在执行时

2015第10周五CSS—2

经常遇到的浏览器兼容性有哪些?如何解决? 1.浏览器默认的margin和padding不同.解决方案是加一个全局的*{margin:0;padding:0;}来统一. 2.IE6双边距bug:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大.解决方案是在float的标签样式控制中加入 display:inline;将其转化为行内属性.测试代码如下: <html> <head> <title>Demo</title> &

必须要知道10个CSS DIV技巧

1.css font的简写规则   当我们写字体样式的时候,我们也许会这样子写 font-size: 1em; line-height: 1.5em; font-weight: bold; font-style: italic; font-variant: small-caps; font-family: verdana,serif 其实,这样写是完全多余的,我可以只用font 来写就OK了. 比如: font: 1em/1.5em bold italic small-caps verdana,