伪类（一）：链接、文本、文本框
2021-11-23 本文已影响0人
Caesar_emperor
一、链接
<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后开始-->
