首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【CSS选择符】后代选择符

在学习后代选择符之前,首先要了解一下组成一个网页的HTML家谱,每个HTML标签标示其中一个家庭成员。网页中的第一个HTML标签(标签),相当于所有其他标签的始祖。...子代:直接被另一个标签保卫的标签是外层标签的子代。和 是标签是标签的子代,而标签不是。标签直接包含在 标签里,所以是 标签的子代。 同辈:父辈相同的标签叫同辈标签,相当于兄弟姐妹。...后代选择符可以由2个以上元素组成,例如: ul li a body li a html li a html body ul li a 以上四个选择符的作用相同,因此表明,无需指明目标标签的所有直系。...一般来说,应该使用能达到目的的最简短的后代选择符。所有标签都在和标签里,因此没要在后代选择符中指定和。 后代选择符里的选择符数量会影响冲突样式的处理方式,这种冲突处理机制成为特指度。...同样的,后代选择符也不局限于只能使用类型选择符。 可以使用不同类型的选择符构建复杂的后代选择符

72550

选择符和ID选择符

首先给选择符起一个名字,然后把这个名字指定给想装饰的HTML标签。例如上一个例子中,我就给第一个div命名为“one”。 类选择符还能精确控制某个元素的外观,而不管元素使用的是哪个标签。...这时就可以用类选择符选取要装饰的词。 需要注意的是,使用类选择符选取某个标签里的部分单词时,需要借助标签。 类选择符的用法: 在CSS中,类选择符的名称必须以点号开头。...这样Web浏览器才能在样式表中找到类选择符。 类选择符的名称中只能包含字母、数字、连字符和下划线。 选择符的名称必须以字母开头。 类选择符区分大小写。 在HTML中,标签设置class属性。 。...ID选择符 CSS使用ID选择符选取网页中的特定部分,例如横幅、导航栏或者主内容区域。 在HTML中设置ID的方法与设置类的方法差不多,不过使用的属性不同。...如果有个按字母表顺序排列的术语表,可以使用ID选择符链接到以各个字母开头的部分。 Web设计圈有个趋势,尽量不在CSS中使用ID选择符

79570
您找到你想要的搜索结果了吗?
是的
没有找到

前台开发从头说起:谈谈CSS选择符

于是,css选择符的地位在这个前提下就空前的提高了。所以,在开始学习盒模型、浮动、定位之前,有必要回顾一下选择符。...一般稍微接触过css的网页设计人员,都会很快地学会三种css选择符: 元素选择符(例如:body 、a 、li ) ID选择符(例如:#head、#body、#foot) 类选择符(例如:.red、....item、.content) 更进一步之后,开始了解到一些进阶的选择符: 后代选择符(例如 #head .menu、#foot #copyright) 伪类选择符(例如 a:hover、a:link...) 以及由这些选择符组合起来形成的综合选择符。...实际上css还支持一些更丰富的选择符。但是能够被浏览器广泛支持的其实主要就是上面这几种,其它的选择符在css中往往用来区别处理不同的浏览器,或者用在jQuery一类的框架中。本文就不提了。

1K70

CSS选择器详解

后代所有的 p 为红色 */ div p {   color: red; }   我是段落1        我是段落2    子代选择器...E>F { sRules } 选定文档元素 E 所有的子代元素 F,不包含孙代元素 /* 设置 div 子代的 p 为红色,但孙代的 p 不为红色 */ div>p {   color: red; }...乘法因子(n) 来作为换算方式,比如我们想选中所有的偶数子元素 E,那么选择符可以写成:E:nth-child(2n),也可以使用一些关键字,比如:odd, even。...(n)来作为换算方式,比如我们想选中倒数第一个子元素E,那么选择符可以写成:E:nth-last-child(1) 匹配父元素的倒数第n个子元素E,假设该子元素不是E,则选择符无效 ...--我是一个空节点p,请注意我与其它非空节点p的外观有什么不一样--> 结构性伪类选择符 E:empty :checked CSS3 E:checked {

2.8K40

用属性选择符来解决IE跟FF的兼容性问题

用属性选择符来解决IE跟FF的兼容性问题 由 Ghostzhang 发表于 2006-04-24 11:39 从之前写过的《属性选择符的使用》中发现了一个可以用来解决IE跟FF兼容性的问题,因为IE...不支持CSS的属性选择符。...important声明提高样式的优先级不就完了吗,用属性选择符来为FF写样式意义不大。使用!important声明的确是比较方便,但IE6也认识这个声明,也就是说如果你给FF写了!...使用属性选择符就不会有这样的问题,而且可以将多个定义写到一起,是不是比较方便呢?看看下面的样式: /* 使用声明 */ div.try{ width:200px !...在《CSS样式的优先级补遗2》及《属性选择符的优先级》中我们了解到,ID选择符的特性值为100,而属性选择符的特性值为11,即不能达到将样式定义分开的目的。

31720

C1 能力认证——Web基础

line-height属性 用于设置行间距,可设置的值如下 数字:行间距为当前字体大小乘此数字 固定值:设置固定的行间距,如20px 百分比:行间距为当前字体大小乘百分比 ''' 基础选择器 想要选择ol元素的子代...见习能力认证 C4专项能力认证 CSDN nth-of-type 伪元素选择器 为了便于区分伪类选与伪元素,使用双冒号【::】作为伪元素选择符...选择器的优先级来判断元素到底应该显示那个属性值 CSS的优先级如下 【内联样式】 > 【ID选择器】 > 【类选择器、属性选择器、伪类选择器】 > 【标签选择器 、伪元素选择器】 通配符选择器【*】和关系选择符...【+(相邻选择符)、>(子代选择符)、~(兄弟选择符)、" "(后代选择符)等】对优先级没有影响 在选择器使用较多的情况下,使用CSS优先级判断元素的属性值显示很容易出错且不利于排错,可以通过给选择器添加权重的概念来帮助我们更好的理解...CSS选择器的优先级 选择器 权重 内联样式 1000 ID选择器 100 类选择器、属性选择器、伪类选择器 10 标签选择器、伪元素选择器 1 相邻选择符子代选择符、兄弟选择符、后代选择符 0 权重相同时

3.2K40
领券