有关a标签的颜色、字体继承问题

sixgo 发布于2019-08-29 12:20 / 2879人阅读

摘要：在中嵌套元素和元素，设置样式如下设置字体颜色不会被标签继承，因为标签有默认样式由于的层叠，元素继承自的样式被浏览器的元素的默认样式链接默认颜色为，字体带下划线给覆盖了。

在div中嵌套p元素和a元素，设置样式如下


    this is paragraph
    this is a link

div {
    /*设置字体颜色不会被a标签继承，因为a标签有默认样式*/
    color: red;
    background-color: #ccc;
    font: 20px Verdana,Helvitica,sans-serif;
}

由于CSS的层叠（cascading），a元素继承自div的样式（color:red）被浏览器的a元素的默认样式（链接默认颜色为blue，字体带下划线）给覆盖了。

想要更改链接颜色有两种方式

1.更改a标签的默认样式：

div {
    color: red;
    background-color: #ccc;
    font: 20px Verdana,Helvitica,sans-serif;
}
/*更改a标签的默认样式*/
a {
    color: black;
}

2.将a标签的默认样式更改为继承color: inherit;

a {
    color: inherit;
}

参考资料
CSS 中 a 标签为什么不能继承父类的颜色？
CSS层叠-MDN
《CSS权威指南》第三章

专线服务混合云 html的字体颜色看apue遇到的有关问题 html标签的颜色是 asp改字体颜色

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111823.html

CSS简洁笔记

摘要：层叠性发生的前提样式冲突优先级权重行内引入标签通用把权重相加，值越大越有先权重一样，后面的样式起作用补充知识笔记表单优化写法用户名格式化列表图标表单合并设置表格边框合并，适用于表格格式化上下文默认值。 1.通用属性 name：名称，可以重复，可以一样; class：类名，可以重复，也可以拥有多个，给CSS用的；如; id：唯一标示，不能重复，一般多用在JavaScript中；命名规...

yanbingyun1990 2019-08-02 16:00 评论0 收藏0
CSS简洁笔记

摘要：层叠性发生的前提样式冲突优先级权重行内引入标签通用把权重相加，值越大越有先权重一样，后面的样式起作用补充知识笔记表单优化写法用户名格式化列表图标表单合并设置表格边框合并，适用于表格格式化上下文默认值。 1.通用属性 name：名称，可以重复，可以一样; class：类名，可以重复，也可以拥有多个，给CSS用的；如; id：唯一标示，不能重复，一般多用在JavaScript中；命名规...

FullStackDeveloper 2019-08-29 14:01 评论0 收藏0
CSS学习笔记(四) CSS优先级

摘要：为了解决冲突，确定哪条规则胜出并最终被应用，提供了三种机制继承层叠和特指。整个检查更新过程结束后，再将每个标签以最终设定的样式显示出来。层叠规则四顺序决定权重。规则三设定的样式胜过继承的样式，此时不用考虑特指度即显式设定优先。为了解决冲突，确定哪条规则胜出并最终被应用，CSS提供了三种机制：继承、层叠和特指。 1.继承 CSS 中的祖先元素会向后代传递一样东西：CSS属性...

高胜山 2019-08-28 18:01 评论0 收藏0
前端基础入门二（CSS）

摘要：输入的时候少按一个键浏览器兼容问题比如使用的选择器命名，在是无效的能良好区分变量命名变量命名是用不要纯数字中文等命名，尽量使用英文字母来表示。选择器和类选择器最大的不同在于使用次数上。当需要设置英文字体时，英文字体名必须位于中文字体名之前。回顾上一节HTML 思维导图 showImg(https://segmentfault.com/img/bVbno3O?w=1378&h=1178...

Lorry_Lu 2019-08-30 15:55 评论0 收藏0
CSS超全笔记（适合新手入门）

摘要：选择器和类选择器区别标准规定，在同一个页面内，不允许有相同名字的对象出现，但是允许相同名字的。选择器和类选择器最大的不同在于使用次数上。当需要设置英文字体时，英文字体名必须位于中文字体名之前。CSS CSS初识 CSS(Cascading Style Sheets) 美化样式 CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）...

番茄西红柿 2019-04-23 11:56 评论0 收藏0