css的高级选择器
后代:
div a{
color:orange;
}
div中的a标签
子代
div>a{
color:orange;
}
>
这个表示子代,后代是说不管是儿子孙子都算,但是子代只是自己的下一代,如果例子中的a标签为div的孙子,那这个样式就无法作用在a的身上
组合
多个标签或类设置共同的样式
div,a{
color:orange;
}
伪类
例子:a标签的选择状态
/* 没有访问时 */
a:link{
color:orange;
}
/* 访问后 */
a:visited{
color: grey;
}
/* 鼠标悬浮 */
a:hover{
color: black;
}
/* 鼠标按住时 */
a:active{
color: purple;
}
hover所有标签都可以使用,其他的只有a可以使用
css中的左右伪类
选择器 | 示例 | 示例说明 |
---|---|---|
:link | a:link | 选择所有未访问链接 |
:visited | a:visited | 选择所有访问过的链接 |
:active | a:active | 选择正在活动链接 |
:hover | a:hover | 把鼠标放在链接上的状态 |
:focus | input:focus | 选择元素输入后具有焦点 |
:first-letter | p:first-letter | 选择每个 元素的第一个字母 |
:first-line | p:first-line | 选择每个 元素的第一行 |
:first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 元素 |
:before | p:before | 在每个 元素之前插入内容 |
:after | p:after | 在每个 元素之后插入内容 |
:lang(language) | p:lang(it) | 为 元素的lang属性选择一个开始值 |
选择器权重:
元素选择器:1<类选择器:10<id选择器:100<内联样式:1000