CSS的高级选择器:
- 层次选择器
- 结构伪类选择器
- 属性选择器
- 层次选择器:
示例:
body p{ background: red; }
body>p{ background: pink; }
.active+p { background: green; }
.active~p{ background: yellow; }
- 结构伪类选择器:
示例:
ul li:first-child{ background: red;}
ul li:last-child{ background: green;}
p:nth-child(1){ background: yellow;}选择子类里面的第几个
p:nth-of-type(2){ background: blue;}根据类型选择第几个
使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点:
- E F:nth-child(n)在父级里从一个元素开始查找,不分类型
- E F:nth-of-type(n)在父级里先看类型,再看位置
- 属性选择器:
示例:
a[id] { background: yellow; }
a[id=first] { background: red; }
a[id=first] { background: red; }E[attr=val]属性选择器中,属性和属性值必须完全匹配才能被选中
a[class*=links] { background: red; }
a[href^=http] { background: red; }
a[href$=png] { background: red; }