伪类选择符+样式的继承

最新推荐文章于 2023-01-01 18:10:49 发布

honeyws

最新推荐文章于 2023-01-01 18:10:49 发布

阅读量271

点赞数

分类专栏： Web前端基础文章标签：伪类选择符+样式的继承

本文链接：https://blog.csdn.net/weixin_44802155/article/details/102908039

版权

Web前端基础专栏收录该内容

17 篇文章 0 订阅

订阅专栏

伪类选择符
在css中可通过链接伪类选择符可以实现不同的链接状态。伪类选择符用于像某些HTML标签添加特殊的效果。伪类选择符包含的内容很多，在css基础部分先学习link hove active和visited四个伪类选择符，其中的link visited这两个伪类选择符只能用在标签上，hove active这两个伪类选择符则可以用在所有的标签上。伪类选择符通过(:)的方式来设置。
Link伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择符</title>
    <style>
    .alink{ color: cyan;}
    .alink:link{    color: darkcyan;}
    </style>
</head>
<body>
    <a href="#" class="alink">第一个链接</a>
    <a href="#">第二个链接</a>
</body>
</html>

Hove伪类
用来标记鼠标划过的时的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hover伪类符</title>
    <style>
        a:hover{color: hotpink;}
        p:hover{ color: lightskyblue;}
    </style>
</head>
<body>
    <a href="#">这是一个链接</a>
    <p>这是一个p标签</p>
</body>
</html>

Active标签
时用来设置鼠标按下时的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>active伪类符</title>
    <style>
        a:active{   color: magenta;}
        p:active{   color: mediumvioletred;}
    </style>
</head>
<body>
<a href="#">这是一个a标签</a>
<p>这是一个p标签</p>
</body>
</html>

Visited伪类符
是用来设置标签访问过后的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>visited</title>
    <style>
        .alink{ color: mediumvioletred;}
        .alink:visited{ color: orange;}
    </style>
</head>
<body>
    <a href="#" class="alink">第一个a链接</a>
    <a href="#">第二个a链接</a>
</body>

样式的继承
可以理解为子类的样式从父标签中继承过来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式的继承</title>
    <style>
        div{    color: red;}
    </style>
</head>
<body>
    <div>
        <p>这是一个标签</p>
    </div>
</body>
</html>

从这写代码可以看出，

标签显示的字体为红色，但代码中只是为

标签设置啦演示。
并未为

标签设置任何样式，因此

标签的样式继承自他的父标签

，但并非所有CSS属性均可继承。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式的继承</title>
    <style>
        div{    font-size: 30px; color: turquoise;
         border: 1px #00f solid;}
    </style>
</head>
<body>
    <div>
        <p>这是一个标签</p>
    </div>
</body>
</html>

标签添加边框样式时，并没有被p标签继承，这里总结下，与元素外观(文字颜色，字体等)相关的样式会被继承，与元素在网页上的布局相关的样式不会被继承。在样式中使用inherit这个特别设立的值可以强行继承明确指示浏览器在该属性上使用父元素样式的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式的继承</title>
    <style>
        div{    font-size: 30px; color: #000 ;border: 1px #0f0 solid;}
        p{border: inherit;}
    </style>
</head>
<body>
    <div>
        <p>这是一个标签</p>
    </div>
</body>
</html>