7复合选择器
- 对基础选择器进行组合
7.1后代选择器(重要)
- 可以选择父元素里面的任意子元素
- 例:将ol中的li标签改为粉色
ol li { color: pink; }
- 注意:第二个元素只要是第一个元素的后代元素即可,即孙子元素也可以。
- 例:将ol标签中的li标签中的a标签改为红色
- 方法一:
ol li a { color: red; }
- 方法二:
ol a { color: red; }
- 注意:元素可以是任意的基础选择器
- 例:将引用了nav类的ul标签中的li标签中的a标签改为黄色
.nav li a { color: yellow; }
7.2子选择器(重要)
- 只能选择某元素的最近一级子元素
- 语法:元素1(父元素) > 元素 2(亲儿子元素){}
- 例:将
中的文字“椅子”改为红色:<div class="hot"> <a href="#">椅子</a> <ul> <li><a href="#">桌子</a><li> </ul> </div>
.hot>a { color: red; }
7.3并集选择器
- 可以选择多组标签
- 例:将
中的“テレビ”“ラジオ”同时改为红色:<div>テレビ</div> <p>ラジオ</p>
div, p { color: red; }
- 元素可以是任意选择器
- 例:
div, p, .pig li { color: red; }
7.4伪类选择器
- 向某些选择器添加特殊的效果,以:开头
7.4.1 链接伪类选择器
- a:link
- 选择所有未被访问的链接
- 例:将未访问过的链接选出并设置为黑色、无下划线
a:link { color: #333; text-decoration: none; }
- a:visited
- 选择所有已被访问的链接
- 例:访问过后该链接就会变成橙色
a:visited { color: orange; }
- a:hover
- 选择鼠标指针位于其上的链接
- 例:光标指针悬停在链接上时就会变为天蓝色
a:hover { color: skyblue; }
- a:active
- 选择活动链接(鼠标按下未弹起的链接)
- 例:鼠标按下链接且未弹起时链接变为绿色
a:active { color: green; }
- 注意:css声明要按照LVHA的顺序进行书写(即按前面四个例子的顺序),否则可能会失效
- 注意:要给链接单独指定样式。即如果指定了body标签的样式,即使a标签在body内,body的样式也无法作用于a标签。
- 一般开发中的用法:
a { color: gray; text-decoration: none; } a:hover { color: #369; text-decoration: underline; }
7.4.2:focus伪类选择器
- 用于选取获得焦点的表单元素
- 例:当input元素获得光标时的背景颜色变为黄色,文字变成红色(若输入完成光标离开时,变回原本的样子)
input:focus { background-color: yellow; color: red; }