在学习后代选择符之前,首先要了解一下组成一个网页的HTML家谱,每个HTML标签标示其中一个家庭成员。网页中的第一个HTML标签(标签),相当于所有其他标签的始祖。...在CSS中,后代选择器的写法是: 祖辈 后代 { 样式 ; } 首先,先找到祖辈,然后中间有一个空格,空格后面跟着后代。...后代选择符可以由2个以上元素组成,例如: ul li a body li a html li a html body ul li a 以上四个选择符的作用相同,因此表明,无需指明目标标签的所有直系。...一般来说,应该使用能达到目的的最简短的后代选择符。所有标签都在和标签里,因此没要在后代选择符中指定和。 后代选择符里的选择符数量会影响冲突样式的处理方式,这种冲突处理机制成为特指度。...同样的,后代选择符也不局限于只能使用类型选择符。 可以使用不同类型的选择符构建复杂的后代选择符。
什么是组合选择符? 组合选择符说明了两个选择器直接的关系。 CSS组合选择符有几种,都是什么?...在 CSS3 中包含了四种组合方式: 后代选择器(以空格分隔) 子元素选择器(以大于号分隔) 相邻兄弟选择器(以加号分隔) 普通兄弟选择器(以波浪号分隔) 后代选择器 后代选择器用于选取某元素的后代元素
发出一声反派的笑声(破音) 作死 先来看一段HTML代码 有部分 HTML 和 CSS 的书或者网上有些文章会说,元素上的 id 和 class 是不能以数字开头的...有部分文章也会说,HTML 可以支持 id 和 class 以数字开头,但 css 不支持。 我呸!...请看下面的 CSS 代码 /* 注意:.\31 后面有一个空格 */ .\31 -d { width: 100px; height...详解 简写 CSS 类名选择器 和 ID选择器 并不是不能以数字开头,而是不能直接写数字,需要将数字转义一下才能使用。...之所以出现这么奇怪的表示方式(数字“1” 用 “\31 + 空格” 表示),是因为 \31 外加空格 是 CSS 字符 “1” 的十六进制转码。而 31 就是字符串 1 的 Unicode 值。
于是,css选择符的地位在这个前提下就空前的提高了。所以,在开始学习盒模型、浮动、定位之前,有必要回顾一下选择符。...一般稍微接触过css的网页设计人员,都会很快地学会三种css选择符: 元素选择符(例如:body 、a 、li ) ID选择符(例如:#head、#body、#foot) 类选择符(例如:.red、...实际上css还支持一些更丰富的选择符。但是能够被浏览器广泛支持的其实主要就是上面这几种,其它的选择符在css中往往用来区别处理不同的浏览器,或者用在jQuery一类的框架中。本文就不提了。...第三、css选择符的优先级不清楚。css是支持继承和覆盖的,什么时候继承,什么时候覆盖。两条规则都对相同元素做出了样式规定而且样式规定重复的情况下,哪一条规则会被应用呢?...由于css3的选择符目前还没被广泛支持,而结构又没有差异,不借助javascript有困难了。
类选择符 HTML代码: CSS代码: div { width: 200px; height: 200px; border: 1px solid #000; margin: 20px; } .one{...这时就可以用类选择符选取要装饰的词。 需要注意的是,使用类选择符选取某个标签里的部分单词时,需要借助标签。 类选择符的用法: 在CSS中,类选择符的名称必须以点号开头。...ID选择符 CSS使用ID选择符选取网页中的特定部分,例如横幅、导航栏或者主内容区域。 在HTML中设置ID的方法与设置类的方法差不多,不过使用的属性不同。...在CSS中,用 # 井号开头,后面跟着id名。 正确地使用ID HTML的id属性有些作用是class属性实现不了的。这些优势与CSS没关系,因此完全可以不适用ID选择符。...如果有个按字母表顺序排列的术语表,可以使用ID选择符链接到以各个字母开头的部分。 Web设计圈有个趋势,尽量不在CSS中使用ID选择符。
属性选择符的使用 由 Ghostzhang 发表于 2006-04-17 16:15 在CSS的选择符中,除了常用的“类型选择符(E)、通配选择符(*)、包含选择符(E1 E2)、ID选择符(#ID...)、选择符分组(E1,E2,E3)、类选择符(E.class)、伪类及伪对象选择符(E:P)”外还有“属性选择符(E[attr])”和“相邻选择符(E1+E2)”,试了一下属性选择符,感觉很不错,如果使用到页面中的话...,会让CSS的定义更加的强大,可惜现在IE并不支持这一选择符。...属性选择符可分为下面几种: Attribute Selectors E[attr] 属性选择符。 选择具有attr属性的E。...Attribute Selectors E[attr=value] 属性选择符。 选择具有attr属性且属性值等于value的E。
属性选择符的优先级 由 Ghostzhang 发表于 2006-04-24 10:59 大家都知道样式定义存在优先级的问题,像“ID选择符”的优先级就比“样式选择符”要高等等。...在写完《属性选择符的使用》和《CSS样式的优先级补遗2》后才发现,原来属性选择符的优先级是比较特殊的,看看下面的例子: /*IE*/ div{float:left;color:Orange;} /* 特性值为...所以不难得出,属性选择符的特性值是在10到12之间,姑且写为11吧,以方便表示。
这是CSS设计指南的读书笔记,用于加深学习效果。 最近想做一个小程序,前端是必修课,那就从css开始吧。 css 工作原理 每个html元素都有一组样式属性,可以通过css来设定。...相应的ID选择符就这样写: #specialtext {css样式} 选择元素方式其余和class 一致。 ID属性和类属性的区别 ID可以用于页面导航链接中。...类的目的是为了标识一组具有相同特征的元素,以便我们为这些元素应用相同的css样式。 属性选择符 属性名选择符 格式如下: 标签名[属性名] 选择任何带有属性名的标签名。...伪类 伪类分两种: UI伪类会在HTML元素处于某个状态时,为该元素应用CSS样式。 结构化伪类会在标记中存在某种结构上的关系时,为相应元素应用CSS样式。 伪类使用:(冒号)作为选择符。...以上CSS选择符已经介绍完了,接下来讨论在一个大的样式表中,规则选择的问题。 CSS提供了三种机制来决定那条规则会胜出: 继承 层叠 特指 继承 CSS属性的值会向下传递。
③@import只有在IE5以上才能识别,link所有都可以 ④js控制dom修改样式只能使用link标签 ⑤@import可以在css中再次引入其它的样式表 ---- 8. css选择符(w3school...): ⑴标签选择符: p { font-size : 18 px; color:#000; } ⑵类选择符: .red { background-color:#C00; } ⑶id选择符: #firstColunm...color:#C00; font-weight:bold; } ⑹通配选择符: * { padding:0; margin:0 } ⑺属性选择符: a[href] { color:#C00; } ⑻伪类选择符...优先级由四个级别和各级别的出现次数决定 ①每个规则对应一个初始四位数: 0、0、0、0 ②若是行内选择符,则加 1、0、0、0 ③若是id选择符,则加 0、1、0、0 ④若是类选择符/属性选择符/...伪类选择符,则加 0、0、1、0 ⑤若是元素选择符/伪元素选择符,则加 0、0、0、1 将每个规则所得到的四位数从左到右进行比较,大的优先级越高。
要讲CSS选择器的优先级,我们首先要知道CSS选择器有哪些?具体可以参考CSS 选择器参考手册,同时我们还需要知道CSS选择器的解析原则。请阅读为什么CSS选择器是从右往左解析。...另外一种理解方式: CSS优先级:是由四个级别和各级别的出现次数决定的。 四个级别分别为:行内选择符、ID选择符、类别选择符、元素选择符。...优先级的算法: 每个规则对应一个初始"四位数":0、0、0、0 若是 行内选择符,则加1、0、0、0 若是 ID选择符,则加0、1、0、0 若是 类选择符/属性选择符/伪类选择符,则分别加0、0...、1、0 若是 元素选择符/伪元素选择符,则分别加0、0、0、1 算法:将每条规则中,选择符对应的数相加后得到的”四位数“,从左到右进行比较,大的优先级越高。...--适用第5、6条CSS规则,第6条CSS优先级高--> 注意: !
将通用选择符放到后代选择符中,性能非常糟糕。...// 糟糕 $('.container > *'); // 建议 $('.container').children(); 避免隐式通用选择符 通用选择符有时是隐式的,不容易发现。...// 糟糕 $('.someclass :radio'); // 建议 $('.someclass input:radio'); 优化选择符 例如,Id选择符应该是唯一的,所以没有必要添加额外的选择符...,ID 选择符应该是唯一的,不需要添加额外的选择符,更不需要多个后代ID选择符。...css动画?还是选择符引擎?或许javascript微型框架或jQuery的定制版是更好的选择。
二、CSS选择符 1.CSS选择符就是要控制的对象,要想对某一元素进行控制,有两种方式。 1).使用id选择器,要求id在网页中必须具有唯一性。...2.CSS选择符控制页面所有的html元素(包括哪些本身有默认值的元素),使用通配符"*",但效率较低,不建议使用。 语法:*{属性:值} 3.选择符的嵌套(包含/派生)使用。...语法:父元素 子元素{属性:值},如:table td{color:blue;} 4.选择符分组(集体控制):将同样的样式定义用于多个选择符,选择符之间用逗号隔开。 ...语法:选择符1,选择符2,选择符3....{属性:值} 如:p,div,h1,table{属性:值}。 5.标签指定式选择符:如果既想使用id或class,也想同时使用标签选择符。 ...6.组合选择符:将以上选择符进行组合使用,如:h1.waring,h2#contect{属性:值}。 三、CSS优先权 就近原则:作用范围越小,优先级越高,离修饰目标越近,优先级越高。
选择符优先级 常见的选择器种类: 内联样式(Inline Style),如...; ID选择符(ID selectors),如#id; Class选择符(Class),如 .class {...}...选择符:1,0 Tag选择符:1 来源优先级顺序,如图所示 样式系统从最右边的选择符开始向左进行匹配规则。...只要当前选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和规则匹配的元素,或者因为不匹配而退出。...; 继承的CSS 样式不如后来指定的CSS 样式; 在同一组属性设置中标有“!...避免使用*规则 选择器尽可能短 ID选择符前面不要再加限定符 没必要用Tag选择符限定Class选择符 关注我们
CSS优先级 当样式表比较复杂时,很容易出现多个样式对作用于一个标签的情况,这时就需要注意CSS优先级来决定哪些样式会被作用于该标签,哪些会被覆盖。...选择符是由基本选择器组成,基本分为 后代选择符: #i1 .c1 .c2 子选择符:#i1 > .c1 > .c2 相邻选择符:.c1 + .c2 计算选择符中 ID选择器的个数a,计算选择符中类选择器...a:1 b:0 c:1 第二个选择符 a:0 b:1 c:1 第三个选择符 a:0 b:0 c:2 第四个选择符 a:0 b:1 c:0 第五个选择符 a:0 b:0 c:1 优先级顺序依次为: 1...错误的原因是:权重的进制是并不是十进制,CSS 权重进制在 IE6 为 256,后来扩大到了 65536,现代浏览器则采用更大的数量。还是拿刚刚的例子说明。...DOCTYPE html> CSS样式优先级 #i1 {
CSS语法由两部分组成:选择符、声明。...声明包括:属性和属性值 选择符 {属性: 属性值 ;属性:属性值} 选择符说明:CSS选择符(选择器) 选择符表示要定义样式的对象(标签名字),可以是元素本身,也可以是一类元素或者指定名称的元素,简单来说就是给对应的元素起个名称...1)每个CSS样式由两部分组成,即选择符和声明,声明又分为属性和属性值; 2)属性必须放在花括号中,属性与属性值用冒号连接。 3)每条声明用分号结束。
当和其他的选择符一起使用时,通用选择符非常的慢。...// bad $('.container > *'); // better $('.container').children(); 避免使用隐式通用选择符 当你漏下了选择符,通用选择符(*)仍然起作用...// bad $('.someclass :radio'); // better $('.someclass input:radio'); 优化选择符 例如,Id选择符应该是唯一的,所以没有必要添加额外的选择符...再次强调ID 选择符应该是唯一的,不需要添加额外的选择符,更不需要多个后代ID选择符。...css动画?还是选择符引擎?有时候,javascript微型框架或jQuery的需求定制版同样是值得考虑的。
; ID选择符(ID selectors),如#id; Class选择符(Class),如 .class {...}...选择符:1,0 Tag选择符:1 来源优先级顺序,如图所示 样式系统从最右边的选择符开始向左进行匹配规则。...只要当前选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和规则匹配的元素,或者因为不匹配而退出。...; 继承的CSS 样式不如后来指定的CSS 样式; 在同一组属性设置中标有“!...避免使用*规则 选择器尽可能短 ID选择符前面不要再加限定符 没必要用Tag选择符限定Class选择符
css选择器是什么意思 1、选择器表示要定义样式的对象,可以是元素本身,也可以是一类元素或者制定名称的元素。 2、常用的选择器有十种左右类型选择符,id选择器,class选择器,通配符等。...元素选择符/类型选择符/标签选择符(element选择器) 语法: 元素名称{属性:属性值;} 类型选择符是根据html语言中的标记来直接定义 以上就是css选择器的介绍,希望对大家有所帮助。更多css学习指路:css教程 本文教程操作环境:windows7系统、css3版,DELL G3电脑。
其中选择器也叫选择符 CSS 中注释:/* ... */ 二、在 HTML 中如何使用 css 样式(html 中嵌入 css 的方式) 1....三、**css2 的选择符 1. html 选择符(标签选择器) 就是把html标签作为选择符使用 如 p{....} ...选择符的优先级:从大到小 [ID选择符]->[class选择符]->[html选择符]->[html属性] 4....关联选择符(包含选择符) 格式: 选择符1 选择符2 选择符3 ...{样式....} 例如: table a{....}...组合选择符(选择符组) 格式: 选择符1,选择符2,选择符3 ...{样式....}
2.2、避免多个ID选择符 Id选择符应该是唯一的,所以没有必要添加额外的选择符。...// 糟糕$('div#myid');$('div#footer a.myLink');// 建议$('#myid');$('#footer .myLink'); 在此强调,ID 选择符应该是唯一的,不需要添加额外的选择符...,更不需要多个后代ID选择符。...// 糟糕$('#outer #inner');// 建议$('#inner'); 2.3、避免隐式通用选择符 通用选择符有时是隐式的,不容易发现。...// 糟糕$('.someclass :radio');// 建议$('.someclass input:radio'); 2.4、避免通用选择符 将通用选择符放到后代选择符中,性能非常糟糕。
领取专属 10元无门槛券
手把手带您无忧上云