css 继承性、伪类

最新推荐文章于 2022-11-21 19:28:22 发布

^果然好^

最新推荐文章于 2022-11-21 19:28:22 发布

阅读量647

点赞数

分类专栏： # div+css+js

本文链接：https://blog.csdn.net/allensandy/article/details/90401119

版权

div+css+js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

继承
给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性。
注意点:

并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承
在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承
继承性中的特殊性
a标签的文字颜色和下划线是不能继承的
h标签的文字大小是不能继承的
继承性一般用于设置网页上的公共信息，例如网页文字颜色、字体以及大小等。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        span {
            color: blue;
            border: 1px solid black;
        }

        .extra span {
            color: inherit;
        }
    </style>
</head>

<body>

    <div>
        这里是一个蓝色的 <span>span 元素</span>，正如 span 元素所设置的。
    </div>

    <div class="extra" style="color:green">
        这里是一个绿色的 <span>span 元素</span>，因为它继承了父元素。
    </div>

    <div style="color:red">
        这里是一个蓝色的 <span>span 元素</span>，正如 span 元素所设置的。
    </div>

</body>

</html>

不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align垂直文本对齐（它只对拥有valign特性的元素才生效）、page-break-after、 page-bread-before和unicode-bidi

所有元素可继承的：visibility,cursor

内联元素可继承：letter-spacing字间距、word-spacing词间距控制英文单词词距、white-space、line-height、color、font-family、font-size、font-style、font-weight、text- decoration文本修饰、text-transform设置文本中的大小写（none无转换/capitalize首字母大写/uppercase全都大写/lowercase全都

写）

块状元素可继承：text-indent首行缩进（只对第一行起作用，可以取负值，只能用于隐藏文本）和text-align水平对齐方式（left/right/center/justify）。

列表元素可继承：list-style、list-style-type：disc(实心圆)/circle（空心圆）/square(实心方块 )none(去掉列表符号)、list-style-position（:outside/inside）、list-style-image（url）。

表格元素可继承：border-collapse。

伪类

<style>
a:active
{
	background-color:yellow;
}
</style>

<a href="//www.runoob.com/">runoob.com</a>
<a href="//www.wikipedia.org">wikipedia.org</a>

-----------------------------------------------------------------------------------
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

效果：

^果然好^

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 继承性、伪类

继承给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性。注意点:并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承继承性中的特殊性 a标签的文字颜色和下划线是不能继承的 h标签的文字大小是不能继承的继承性一般用于设置网页上的公共信息，例如网页文字颜...
复制链接

扫一扫