CSS学习笔记第4天

网站建设 · 2020-10-23
1.3.6 子选择器jECIT米工网
子选择器格式jECIT米工网
div>span{font-size:12px;}jECIT米工网
前后两个元素是父子关系,不能跨越父子关系。jECIT米工网
jECIT米工网
1.3.7 相邻选择器jECIT米工网
相邻选择器格式jECIT米工网
div+span{font-size:12px;}jECIT米工网
相邻选择器与子选择器格式类似,都是有两个选择符(例如div、span)中间包含一个标识符(>或+),前后两个选择符是同级关系jECIT米工网
例如:jECIT米工网
    jECIT米工网
1.3.8 属性选择器jECIT米工网
属性选择器格式:div[id="header"]{font-size:18px;}jECIT米工网
属性选择器使用中括号来进行标识,中括号内包含属性名或属性值或其它表达式,属性选择器功能非常强大,与伪类选择器成为构成CSS选择器的两大利剑。jECIT米工网
属性选择器有多种形式:jECIT米工网
第1种,匹配属性名,例如:a[href]{color:bule;}jECIT米工网
第2种,匹配属性值,例如:a[href="http://www.baidu.com/"][title="css"]{font-size:12px;}表示既符合第一个[]的内容,还要符合和2个[]的内容。jECIT米工网
第3种,前缀匹配,例如:a[href"="http://"] {font-size:12px;}jECIT米工网
第4种,后缀匹配,例如:a[href$=".jpg"] {font-size:12px;}jECIT米工网
第5种,模糊匹配,例如:a[href*="baidu"] {font-size:12px;}jECIT米工网
1.3.9 通用选择器jECIT米工网
例:*{padding:0; margin:0;}