CSS学习（3）——复合选择器

沐木木木木L

已于 2022-01-23 14:27:14 修改

阅读量244

点赞数

文章标签： css 前端 html

于 2022-01-22 14:37:42 首次发布

本文链接：https://blog.csdn.net/m0_59069386/article/details/122608356

版权

可以选择父元素里面的子元素。将外部标签卸载前面，内部标签卸载后面，中间用空格分隔。

孙子也可，只需要在后面叠加。

语法：

元素1 元素2 { 样式声明 }

元素1、2可以为任意的基础选择器。

只能选择作为某元素最近一级子元素，即亲儿子。

语法：

元素1 > 元素2{ 样式声明 }

可以同时选择多组标签，同时为他们定义相同的样式。通常用于集体声明。

语法：

元素1，元素2{ 样式声明 }

元素可以为任意形式，可以和后代选择器一起使用。

用于向某些选择器添加特殊的效果，比如给链接添加特殊效果（如鼠标移上去变色），或选择第1个。第n个元素。

语法：

a:link 选择所有未被访问的链接

a:visited 选择所有已被访问的链接

a:hover 选择鼠标指针位于其上的链接

a:active 选择活动链接（鼠标按下未弹起的链接）

顺序要按照LVHA书写，即link，visited，hover，active

例：

a:link{
    color: black;        /* 所有未被访问过的链接的颜色为黑色 */
}

a:visited{
    color: blue;        /* 所有被访问过的链接为蓝色 */
}

用于选取获得焦点的表单元素。焦点即是光标，且该选择器主要针对的是表单元素即<inout>类。

语法：

input: focus{ 样式声明 }

例：

input:focus{
    background-color: red;
    color: blue;
}

/* 鼠标选中表单后表单背景变为红色，字体颜色变为蓝色。 */

关注