CSS基础 CSS选择符

时间:2021-05-26


示例:

*[lang=fr]{font-size:14px;width:120px;}

*.div{text-decoration:none;}


2.类型选择符
语法:

E{sRules}

说明:
类型选择符。以文档语言对象(Element)类型作为选择符。
示例:

td{font-size:14px;width:120px;}

a{text-decoration:none;}

3.属性选择符
语法:

E[attr]{sRules}

E[attr=value]{sRules}

E[attr~=value]{sRules}

E[attr|=value]{sRules}

说明:
属性选择符。
选择具有attr属性的E
选择具有attr属性且属性值等于value的E
选择具有attr属性且属性值为一用空格分隔的字词列表,其中一个等于value的E。这里的value不能包含空格
选择具有attr属性且属性值为一用连字符分隔的字词列表,由value开始的E
示例:

h[title]{color:blue;}





span[class=demo]{color:red;}



div[speed="fast"][dorun="no"]{color:red;}



a[rel~="copyright"]{color:black;}

4.包含选择符
语法:

E1E2{sRules}


说明:
包含选择符。选择所有被E1包含的E2。即E1.contains(E2)==true。
示例:

tabletd{font-size:14px;}



div.suba{font-size:14px;}

5.子对象选择符
语法:

E1>E2{sRules}

说明:
子对象选择符。选择所有作为E1子对象的E2。
示例:

body>p{font-size:14px;}





divul>lip{font-size:14px;}

6.ID选择符
语法:

#ID{sRules}


说明:
ID选择符。以文档目录树(DOM)中作为对象的唯一标识符的ID作为选择符。
示例:

#note{font-size:14px;width:120px;}

7.类选择符
语法:

E.className{sRules}

说明:
类选择符。在HTML中可以使用此种选择符。其效果等同于E[class~=className]。请参阅属性选择符(AttributeSelectors)。
在IE5+,可以为对象的class属性(特性)指定多于一个值(className),其方法是指定用空格隔开的一组样式表的类名。例如:<divclass="class1class2">。
示例:

div.note{font-size:14px;}





.dream{font-size:14px;}




8.选择符分组
语法:

E1,E2,E3{sRules}

说明:
选择符分组。将同样的定义应用于多个选择符,可以将选择符以逗号分隔的方式并为组。
示例:

.td1,diva,body{font-size:14px;}

td,div,a{font-size:14px;}


9.伪类及伪对象选择符

语法:

E:Pseudo-Classes{sRules}

E:Pseudo-Elements{sRules}

说明:
伪类及伪对象选择符。
伪类选择符。请参阅伪类(Pseudo-Classes)[:link:hover:active:visited:focus:first-child:first:left:right:lang]。
伪对象选择符。请参阅伪对象(Pseudo-Elements)[:first-letter:first-line:before:after]。
示例:

div:first-letter{font-size:14px;}

a.fly:hover{font-size:14px;color:red;}

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章