第一章入门篇伪类伪对象

Posted 2021-01-17 lidaying5

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第一章入门篇伪类伪对象相关的知识，希望对你有一定的参考价值。

1.伪类

伪类用来指定HTML元素某个状态下的样式，格式选择符：伪类{属性：属性值}

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>伪类</title>
    <style type ="text/css" >
        a:link{ text-decoration:none;font-size:50px;/*链接默认状态下的样式*/ }
        a:visited{ color:Red;/*链接访问过后的样式*/}
        a:hover{ text-decoration:underline; color:Silver;/*鼠标放在链接上时的样式*/}
        a:active{ color:Maroon;/*点击链接时的样式*/}
        /*设置a伪类的顺序必须按照上面的顺序书写，否则可能无效*/
        
        
        input:hover{ background-color:#F00;/*鼠标放在输入框时改变背景色*/}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <a href="#">伪类</a>可以用来指定选择符在某种状态下的样式,用来增加交互效果而不必使用过多的javascript！
        <br />
        <input type ="text" />
    </div>
    </form>
</body>
</html>

View Code

2.伪对象

伪对象是在在指定的HTML元素之外加上额外的信息，格式：选择符：伪对象{属性：属性值}

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>伪对象</title>
    <style type ="text/css" >
    p:before{ content:"双十一";  font-weight:bold; }
    p:after{ content:"，准备好剁手了吗？"; color:Red;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <b>伪对象可在HTML元素的前面或后面加上额外的信息！</b>
        <p>快到了</p>
    </div>
    </form>
</body>
</html>

View Code

以上是关于第一章入门篇伪类伪对象的主要内容，如果未能解决你的问题，请参考以下文章

css3 伪类

第一章对象入门

伪类（伪类选择器）

Thinking in Java（第四版）—— 第一章对象入门

Arduino入门教程第一章｜C语言入门

css 中的伪类 first-child 和nth-child的区别