css選擇符大雜燴

最新推荐文章于 2024-08-15 17:17:02 发布

lipeijs3

最新推荐文章于 2024-08-15 17:17:02 发布

阅读量371

点赞数

分类专栏：技术分享--原创文章标签： css styles 浏览器 ie html class

本文链接：https://blog.csdn.net/lipeijs3/article/details/5325698

版权

技术分享--原创专栏收录该内容

29 篇文章 0 订阅

订阅专栏

类型选择符：单指元素的名字，而没有大于号和小于号

类选择符：选择所有赋有相同类的元素一个点号后面跟类名，类选择符要跟着类名的后面。可以把加在通配符*的后面来选择文档中所有赋予该类的元素，

Id 选择符

群组选择符：多个选择符用逗号连起来

后代选择符：多个选择符用空白连起来

子选择符：多个选择符用大于号连起来

首子选择符：把:first-child加在任何选择符后。

兄弟选择符：多个选择符用加号连接起来

属性存在选择符：帮你选择含有某个属性的元素，用中括号包围的属性的名字。SELECTOR[title]

属性词汇选择符：帮你选择属性中包含了某个具体词汇的元素 SELECTOR[title = “WORD”]

属性值选择符：帮你选择属性值中包含了某个具体值的元素 SELECTOR[ title =”EXACT_MATCH_OF_ENTIRE_VALUE”]

Ie6不支持，ie7支持较好

僞类元素选择符：

ELEMENT:first-letter {STYLES}

*.CLASS:first-letter {STYLES}

#ID:first-letter {STYLES}

ELEMENT:first-line {STYLES}

*.CLASS:first- line {STYLES}

#ID:first- line {STYLES}

注意：first-element, first-line只对终端块状元素相搭配，对内联元素或结构化块状元素不起作用。

局限：Ie6不支持，除非是选择符链中的最后一个选择符。Ie7中修正了。

First-letter 与font，text属性搭配很好。浏览器不能定位僞类元素，对他们的排列也存为问题，也就是说：postion，left，right，top，bottom僞类元素不起作用。同样vertical-align对僞类的处理也不一致。

浏览器也会有一些例外的情况，如他们不能选择第一个字母或者选择不止第一个字母，例如当图片或对象放在第一个字母前，所有主流浏览器都不能选择第一个字母，比如opera 9 不会选择单元格的第一个字母，ie6则把列表选项中的第一个字母和列表标识都一起选择。最后，僞类元素还会触发浏览器报错，所有一定要在所有主流浏览器中仔细检查你所使用的僞类元素

当僞类选择符位于群组选择符中，ie6将不能识别他们。必须声明 DOCTYPE，这样 :first-child 才能在 IE 中生效。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

僞類選擇符：

a:link , a:visited , a:hover, a:active , a:focus

僞類選擇符只適用於<a>

Ie6只支持超鏈接上的hover僞類，ie7和其他主流瀏覽器支持所有hover

Css2.1 定義兩個額外的僞類：first-child， lang ， ie7支持first-child, 不支持lang

子類選擇符：

HTML:

CSS

*.class {SHARED_BASE_STYLES}

*.class.subclass.etc {SUBCLASS_STYLES}

繼承：

模式：繼承一類內建於CSS語言的選擇符，為了應用繼承，你不用做任何事情，當瀏覽器遇到一個可繼承的元素，自動把後代元素選中，並給他們付上自己的規則。當你為元素附了一個屬性後，它會覆蓋所有繼承的值

（1）可繼承的屬性：

¡ 可被所有元素繼承：visibility, cursor

¡ 被內聯元素繼承：letter-spacing , word-spacing , white-space , line-height , color , font ,font-family , font-size , font –style , font-variant, font-weight , text-decoration , text-transform ,direction

¡ 被終端塊狀元素繼承： text-indent , text-align

¡ 被列表元素繼承：list-style , list-style-type , list-style-position, list-style-image

¡ 被表格元素繼承：border-collapse

不可繼承的屬性：

display , margin , border ,padding ,background , height , min-height, max-height, width , min-width, max-width , overflow , position , left, right ,top , bottom, z-index ,float , clear , table-layout, vertical-align, page-break-after , page-break-before, Unicode-bidi

局限：css提供一個常量值inherited , 可以把它賦給任何屬性，當屬性被附上inherited 後，該屬性會從他的父親繼承值，這就允許你强制繼承，ie7及早期的版本都不支持inherit,

如何為屬性模擬繼承：首先用任何選擇符選中一個起始元素，然後在選擇符後放一個空格和一個通配符，如SELECTER *