css通配选择符用什么表示,css的选择符

0?wx_fmt=gif元素选择符 Element Selectors*

E

E#id

E.class

关系选择符 Relationship SelectorsE F

E>F

E+F

E~F属性选择符 Attribute SelectorsE[att]

E[att="val"]

E[att~="val"]

E[att^="val"]

E[att$="val"]

E[att*="val"]

E[att|="val"]伪类选择符 Pseudo-Classes SelectorsE:link

E:visited

E:hover

E:active

E:focus

E:lang(fr)

E:not(s)

E:root

E:first-child

E:last-child

E:only-child

E:nth-child(n)

E:nth-last-child(n)

E:first-of-type

E:last-of-type

E:only-of-type

E:nth-of-type(n)

E:nth-last-of-type(n)

E:empty

E:checked

E:enabled

E:disabled

E:target

@page:first

@page:left

@page:right伪对象选择符 Pseudo-Element SelectorsE:first-letter/E::first-letter

E:first-line/E::first-line

E:before/E::before

E:after/E::after

E::placeholder

E::selection

元素选择符 Element Selectors选择符名称版本描述*通配选择符(Universal Selector)CSS2所有元素对象。

E类型选择符(Type Selector)CSS1以文档语言对象类型作为选择符。

E#myidid选择符(ID Selector)CSS1以唯一标识符id属性等于myid的E对象作为选择符。

E.myclassclass选择符(Class Selector)CSS1以class属性包含myclass的E对象作为选择符。语法:

* { sRules }

说明:

选定所有对象。通配选择符(Universal Selector)

通常不建议使用通配选择符,因为它会遍历并命中文档中所有的元素,出于性能考虑,需酌情使用兼容性:浅绿 = 支持

红色 = 不支持

粉色 = 部分支持IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome6.0 #12.0+4.0+3.1+3.5+3.2+2.1+18.0+

7.0+

语法:

E { sRules }

说明:

以文档语言对象类型作为选择符。类型选择符(Type Selector)兼容性:浅绿 = 支持

红色 = 不支持

粉色 = 部分支持IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome6.0+2.0+4.0+3.1+3.5+3.2+2.1+18.0+

语法:

E#myid { sRules }

说明:

以唯一标识符id属性等于myid的E对象作为选择符。ID选择符(ID Selector)兼容性:浅绿 = 支持

红色 = 不支持

粉色 = 部分支持IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome6.0+2.0+4.0+3.1+3.5+3.2+2.1+18.0+

语法:

E.myclass { sRules }

说明:

以class属性包含myclass的E对象作为选择符。类选择符(Class Selector)

不同于ID选择符的唯一性,类选择符可以同时定义多个,如:

定义多个类:

注意,id选择符不能在同个元素上定义多个,比如id="a b"就是错误的写法

类选择符高级用法:多类选择符

此例命中同时拥有.a和.b两个类的元素。需要注意的是IE6并不支持多类选择符,如:.a.b{}将会被视为:.b{}兼容性:浅绿 = 支持

红色 = 不支持

粉色 = 部分支持IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome6.0 #12.0+4.0+3.1+3.5+3.2+2.1+18.0+

7.0+

关系选择符 Relationship Selectors选择符名称版本描述E F包含选择符(Descendant combinator)CSS1选择所有被E元素包含的F元素。

E>F子选择符(Child combinator)CSS2选择所有作为E元素的子元素F。

E+F相邻选择符(Adjacent sibling combinator)CSS2选择紧贴在E元素之后F元素。

E~F兄弟选择符(General sibling combinator)CSS3选择E元素所有兄弟元素F。语法:

E F { sRules }

说明:

选择所有被E元素包含的F元素。与子选择符不同的是,包含选择符将会命中所有符合条件的后代,包括儿子,孙子,孙子的孙子...

E F VS. E>F:

此例,如果使用.demo div,那么 0, 1, 2, 3 都有有边框;如果使用 .demo > div,那么只有 0 有边框,即只有子元素会被命中;兼容性:浅绿 = 支持

红色 = 不支持

粉色 = 部分支持IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome6.0+2.0+4.0+3.1+3.5+3.2+2.1+18.0+

语法:

E>F { sRules }

说明:

选择所有作为E元素的子元素F。与包含选择符不同的是,子选择符只能命中子元素,而不能命中孙辈。

示例:

此例只有 .a 会被命中,因为它是 .demo 的子元素;兼容性:浅绿 = 支持

红色 = 不支持

粉色 = 部分支持IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome6.02.0+4.0+3.1+3.5+3.2+2.1+18.0+

7.0+

语法:

E+F { sRules }

说明:

选择紧贴在E元素之后F元素。与兄弟选择符不同的是,相邻选择符只会命中符合条件的相邻的兄弟元素。

E~F VS. E+F:

此例,如果使用p + p{color:#f00;},那么p2, p5将会变成红色;如果使用p ~ p{color:#f00;},那么p2,p3,p4,p5将会变成红色;兼容性:浅绿 = 支持

红色 = 不支持

粉色 = 部分支持IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome6.02.0+4.0+3.1+3.5+3.2+2.1+18.0+

7.0+

语法:

E~F { sRules }

说明:

选择E元素后面的所有兄弟元素F。与相邻选择符不同的是,兄弟选择符会命中所有符合条件的兄弟元素,而不强制是紧邻的元素。

E~F VS. E+F:

此例,如果使用p + p{color:#f00;},那么p2, p5将会变成红色;如果使用p ~ p{color:#f00;},那么p2,p3,p4,p5将会变成红色;兼容性:浅绿 = 支持

红色 = 不支持

粉色 = 部分支持IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome6.02.0+4.0+3.1+3.5+3.2+2.1+ #118.0+

7.0+

属性选择符 Attribute Selectors选择符版本描述E[att]CSS2选择具有att属性的E元素。

E[att="val"]CSS2选择具有att属性且属性值等于val的E元素。

E[att~="val"]CSS2选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素。

E[att^="val"]CSS3选择具有att属性且属性值为以val开头的字符串的E元素。

E[att$="val"]CSS3选择具有att属性且属性值为以val结尾的字符串的E元素。

E[att*="val"]CSS3选择具有att属性且属性值为包含val的字符串的E元素。

E[att|="val"]CSS2选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素,如果属性值仅为val,也将被选择。语法:

E[att] { sRules }

说明:

选择具有att属性的E元素。

例如:

此例,将会命中第一张图片,因为匹配到了alt属性兼容性:浅绿 = 支持

红色 = 不支持

粉色 = 部分支持IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome6.02.0+4.0+3.1+3.5+3.2+2.1+18.0+

7.0+

语法:

E[att="val"] { sRules }

说明:

选择具有att属性且属性值等于val的E元素。

例如:

此例,将会命中第一张input,因为匹配到了alt属性,并且属性值为text兼容性:浅绿 = 支持

红色 = 不支持

粉色 = 部分支持IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome6.02.0+4.0+3.1+3.5+3.2+2.1+18.0+

7.0+

语法:

E[att~="val"] { sRules }

说明:

选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素(包含只有一个值且该值等于val的情况)。

例如:

此例,将会命中1, 3两个div,因为匹配到了class属性,且属性值中有一个值为a兼容性:浅绿 = 支持

红色 = 不支持

粉色 = 部分支持IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome6.02.0+4.0+3.1+3.5+3.2+2.1+18.0+

7.0+

语法:

E[att^="val"] { sRules }

说明:

选择具有att属性且属性值为以val开头的字符串的E元素。

例如:

此例,将会命中1, 2两个div,因为匹配到了class属性,且属性值以a开头兼容性:浅绿 = 支持

红色 = 不支持

粉色 = 部分支持IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome6.02.0+4.0+3.1+3.5+3.2+2.1+18.0+

7.0+

语法:

E[att$="val"] { sRules }

说明:

选择具有att属性且属性值为以val结尾的字符串的E元素。

例如:

此例,将会命中1, 3两个div,因为匹配到了class属性,且属性值以c结尾兼容性:浅绿 = 支持

红色 = 不支持

粉色 = 部分支持IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome6.02.0+4.0+3.1+3.5+3.2+2.1+18.0+

7.0+

语法:

E[att*="val"] { sRules }

说明:

选择具有att属性且属性值为包含val的字符串的E元素。

例如:

此例,将会命中所有div,因为匹配到了class属性,且属性值中都包含了b兼容性:浅绿 = 支持

红色 = 不支持

粉色 = 部分支持IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome6.02.0+4.0+3.1+3.5+3.2+2.1+18.0+

7.0+

语法:

E[att|="val"] { sRules }

说明:

选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素,如果属性值仅为val,也将被选择。

例如:

此例,将会命中第一个div,因为匹配到了class属性,且属性值以紧跟着"-"的a开头兼容性:浅绿 = 支持

红色 = 不支持

粉色 = 部分支持IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome6.02.0+4.0+3.1+3.5+3.2+2.1+18.0+

7.0+

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值