首先给选择符起一个名字,然后把这个名字指定给想装饰的HTML标签。例如上一个例子中,我就给第一个div命名为“one”。 类选择符还能精确控制某个元素的外观,而不管元素使用的是哪个标签。...这时就可以用类选择符选取要装饰的词。 需要注意的是,使用类选择符选取某个标签里的部分单词时,需要借助标签。 类选择符的用法: 在CSS中,类选择符的名称必须以点号开头。...这样Web浏览器才能在样式表中找到类选择符。 类选择符的名称中只能包含字母、数字、连字符和下划线。 选择符的名称必须以字母开头。 类选择符区分大小写。 在HTML中,标签设置class属性。 。...ID选择符 CSS使用ID选择符选取网页中的特定部分,例如横幅、导航栏或者主内容区域。 在HTML中设置ID的方法与设置类的方法差不多,不过使用的属性不同。...如果有个按字母表顺序排列的术语表,可以使用ID选择符链接到以各个字母开头的部分。 Web设计圈有个趋势,尽量不在CSS中使用ID选择符。
在学习后代选择符之前,首先要了解一下组成一个网页的HTML家谱,每个HTML标签标示其中一个家庭成员。网页中的第一个HTML标签(标签),相当于所有其他标签的始祖。...子代:直接被另一个标签保卫的标签是外层标签的子代。和 是标签是标签的子代,而标签不是。标签直接包含在 标签里,所以是 标签的子代。 同辈:父辈相同的标签叫同辈标签,相当于兄弟姐妹。...后代选择符可以由2个以上元素组成,例如: ul li a body li a html li a html body ul li a 以上四个选择符的作用相同,因此表明,无需指明目标标签的所有直系。...一般来说,应该使用能达到目的的最简短的后代选择符。所有标签都在和标签里,因此没要在后代选择符中指定和。 后代选择符里的选择符数量会影响冲突样式的处理方式,这种冲突处理机制成为特指度。...同样的,后代选择符也不局限于只能使用类型选择符。 可以使用不同类型的选择符构建复杂的后代选择符。
什么是组合选择符? 组合选择符说明了两个选择器直接的关系。 CSS组合选择符有几种,都是什么?
属性选择符的使用 由 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吧,以方便表示。
此时后代选择符派上用场。...兼容性 IE7+、Firefox、Chrome、Safari、Opera 子代选择器 基本语法 X > Y #h5course > p { color: red; } HTML5学堂的一些提醒: X Y...和X > Y之间的不同点是后者只选择直接子代。...选择符#h5course > p将只选择id为h5course的元素的直接子代p。它不匹配更深层的p元素。...+ div)仅选择前一个选择符后面的第一个元素比起来,兄弟选择符更宽泛。
一本正经的胡写代码,不至于用来陷害队友,更重要的是防止队友耍(装)帅(逼)滑自己。
于是,css选择符的地位在这个前提下就空前的提高了。所以,在开始学习盒模型、浮动、定位之前,有必要回顾一下选择符。...一般稍微接触过css的网页设计人员,都会很快地学会三种css选择符: 元素选择符(例如:body 、a 、li ) ID选择符(例如:#head、#body、#foot) 类选择符(例如:.red、....item、.content) 更进一步之后,开始了解到一些进阶的选择符: 后代选择符(例如 #head .menu、#foot #copyright) 伪类选择符(例如 a:hover、a:link...) 以及由这些选择符组合起来形成的综合选择符。...实际上css还支持一些更丰富的选择符。但是能够被浏览器广泛支持的其实主要就是上面这几种,其它的选择符在css中往往用来区别处理不同的浏览器,或者用在jQuery一类的框架中。本文就不提了。
名称 用法 描述 子代选择器 $(“ul>li”) 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素 后代选择器 $(“ul li”) 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等...script> $(function () { //$("s1,s2")// 并集选择器 //$("s1 s2")// 后代选择器 //$("s1>s2")// 子代选择器
用属性选择符来解决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,即不能达到将样式定义分开的目的。
后代所有的 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 {
组合选择器 后代选择器 /*li内部的a标签设置字体颜色*/ li a { color: green; } 子代选择器 /*选择所有父级是 元素的 元素*/ div>p...样式表中的特殊性描述了不同规则的相对权重,它的基本规则是: 1 内联样式表的权值最高 style=””------------1000; 2 统计选择符中的ID属性个数。...#id --------------100 3 统计选择符中的CLASS属性个数。 .class -------------10 4 统计选择符中的HTML标签名个数。...5、由继承而得到的样式没有specificity的计算,它低于一切其它规则(比如全局选择符*定义的规则)。
但据不完全统计,即使在 pip 如此流行的今天,包安装问题依然困扰着大部分的 Python 新手,本人也经常帮一些工作经验三四年的 Python 开发同事解决包...
没错,是所使用的工具,俗话说,"工欲善其事必先利其器", 拥有正确的工作工具可以让开发人员的生活变得更加轻松,甚至想写一辈子代码。
很多程序员喜欢称自己是码农,也就是写代码的农民,然而我从来不这么称呼我自己,一方面我觉得我还没有农民伯伯们辛苦,另一方面,我觉得我做的事情更像是一个设计师。
CSS 类选择器的选择符是 “.”。 选择符是 “#”。 任何元素都可以使用 id 属性设置唯一的 id 名称。这是选择单个元素的最有效的方式。id 选择器具有唯一性。...strong>测试 测试 注:从上述两个例子中我们可以看出,子代选择器只选择指定标签的第一代子元素或者理解为它的直接后代...通用兄弟元素选择器(E~F): E 和 F 属于同一父元素之内,并且 F 在 E 之后,通用兄弟选择器会选择符合这样排列的所有的 F 元素。 <!
内部样式 写在HTML文档的style标签中,style通常放置于头部: /*这里写css代码*/ 选择符{ 样式名:样式; } 子代选择器(Child Selector): 使用>符号连接两个选择器,仅选择作为某元素直接子元素的元素,如 div > p 会选择所有直接嵌套在 div 下的 p 元素。...通配选择符 eg:*,选中页面中所有元素 选择器权重 CSS选择器的权重,也称为Specificity,是一个衡量不同选择器优先级的数值系统,它决定了当有多个规则应用到同一个元素上时,哪个规则会最终生效...important > 行内 > id > class > 标签 > 通配符|兄弟|相邻兄弟|子代 > 继承 先比较级别,级别一样比较各级别选择器出现的次数 当两个选择器权重一样时,以最后出现的为准 基础知识介绍
line-height属性 用于设置行间距,可设置的值如下 数字:行间距为当前字体大小乘此数字 固定值:设置固定的行间距,如20px 百分比:行间距为当前字体大小乘百分比 ''' 基础选择器 想要选择ol元素的子代...见习能力认证 C4专项能力认证 CSDN nth-of-type 伪元素选择器 为了便于区分伪类选与伪元素,使用双冒号【::】作为伪元素选择符...选择器的优先级来判断元素到底应该显示那个属性值 CSS的优先级如下 【内联样式】 > 【ID选择器】 > 【类选择器、属性选择器、伪类选择器】 > 【标签选择器 、伪元素选择器】 通配符选择器【*】和关系选择符...【+(相邻选择符)、>(子代选择符)、~(兄弟选择符)、" "(后代选择符)等】对优先级没有影响 在选择器使用较多的情况下,使用CSS优先级判断元素的属性值显示很容易出错且不利于排错,可以通过给选择器添加权重的概念来帮助我们更好的理解...CSS选择器的优先级 选择器 权重 内联样式 1000 ID选择器 100 类选择器、属性选择器、伪类选择器 10 标签选择器、伪元素选择器 1 相邻选择符、子代选择符、兄弟选择符、后代选择符 0 权重相同时
通配选择符 * 所有标签都具有属性 *{ property:value; } 类的后代才具有属性 .myclass *{ property:value; } 类型选择符 HTML选择符 HTML...标签设置对应属性 p{ property:value; } a{ property:value; } ID选择符 指定id设置对应属性 #my_ID{ property:value; } 类选择符...指定类设置对应属性 .classname{ property:value; } 类型选择符.classname{ property:value; } CSS3关系选择符 包含选择符 只有存在包含关系...(包括子类)对应的标签才设置属性 p em{ property:value; } 包含选择符 子选择符 > E>F中F仅仅是E的子元素,其他的子代不包含这内 p>em...{ property:value; } 子选择符 相邻选择符 + 只有+相邻的标签设置属性 h1+p{ property:value; } h1
领取专属 10元无门槛券
手把手带您无忧上云