伪类（一）：链接、文本、文本框

一、链接

<style>
    a:link
    {
       color: #0086b3;
        font-size: 33px;
    }
</style>
<body>
<a href="//www.baidu.com/">runoob.com</a>
</body>

:link：对未访问的链接添加样式

:visited：对已访问的链接添加样式

:active：当点击链接时添加样式

:hover ：当鼠标移到该文本上时添加样式

二、文本框样式

<style>
input:focus
{
    background-color:yellow;
}
</style>
<body>
<form>
First name: <label><input type="text" name="firstname" /></label>
Last name: <label><input type="text" name="lastname" /></label>
</form>
</body>
<!--语法结构是：带有焦点的标签名:focus，比如textarea: focus-->
<!--带有焦点，即可以输入文本-->

三、文本样式

:first-letter

<style>
p:first-letter
{
    font-size:200%;
    color:red;
}
</style>
</head>
<body>
<p>My name is Donald.</p>
</body>
<!--:first-letter是指对应标签内的文本的第一个字母-->

:first-line

用于向对应标签的文本首行设置特殊样式(这里的首行，是指在当前屏幕尺寸下，能显示的字符长度并将其渲染)

3.E:first-child(last-child同理)

用于指定其父标签的第一个子级，且该标签是E标签，才应用这个样式。

<style>
    p:first-child {
        background-color: yellow;
    }
</style>
<body>
<p>This paragraph is the first child of its parent (body).</p><!--这个p是body的第一个子标签，会被渲染-->
<h1>Welcome to My Homepage</h1>
<p>This paragraph is not the first child of its parent.</p><!--不是第一个子标签，不会被渲染-->
<div>
    <div></div>
    <p>This paragraph is the first child of its parent</p><!--不是第一个子标签，不会被渲染-->
    <p>This paragraph is not the first child of its parent.</p><!--不是第一个子标签，不会被渲染-->
</div>
</body>

4.:nth-child(n)

用于指定只有当该标签是其父标签的第n个子级时，才应用这个样式，从1开始计数。值是even时，选取子级为偶数的应用样式；odd则选取奇数。里面可以跟公式，但字母只能是n，且此时n从0开始。

5.:nth-last-child(n)

用于指定只有当该标签是其父标签的倒数第n个子级时，才应用这个样式，从1开始计数。里面可以跟公式，但字母只能是n，且此时n从0开始。

6.E:nth-of-type(n)

只在父元素的同类型(E)子元素范围中，匹配第n个

7.:nth-child(n)和:nth-of-type(n)区别

nth-child(n)是从父标签下的第一个子标签开始数;nth-of-type(n)是从父标签下符合的类型开始数

四、标签文本悬停

<!--div也可以替换成任意class或Id-->
<style>
<!--中间无空格-->
    div:hover{
    color:red;
    }
</style>
</head>
<body>
<p id="demo">这是一个段落</p>
<div>
    <p>
        <span>1</span>
    </p>
</div>
</body>

五、CSS3过渡属性--transition

一般同hover一起使用，谁做过渡给谁添加
5.1）transition

 transition: width 2s ease 1s;
<!--width表示过渡到多长，2s表示过渡动画完成需要的时间，ease为过渡效果，1s为延迟开始时间-->
<!--可以用all代替过渡动画完成所需要的时间，以外的其他属性；也可以直接写过渡动画完成需要的时间，其余属性值均不写->

5.2）transition-property

transition-property: width;
<!--width表示过渡到多长-->

5.3）transition-duration

transition-duration: 2s;
<!--2s表示过渡动画完成需要的时间-->

5.4）transition-timing-function

transition-timing-function:ease
<!--修饰过度效果，默认是 "ease"函数-->

5.5）transition-delay

<!--2s表示过渡动画等待2S后开始-->

最后编辑于：2021.11.23 16:48:07