【前端】css笔记（10）

足足一米58

已于 2022-08-08 15:20:33 修改

阅读量222

点赞数 2

分类专栏： css 文章标签：前端 css html

于 2022-08-08 14:55:14 首次发布

本文链接：https://blog.csdn.net/weixin_61731785/article/details/126226106

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

目录：

伪类：

伪元素：

Multiple Pseudo-elements

before伪元素

after伪元素

伪类

用来添加一些选择器的特殊效果（由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和 class 有些类似，但它是基于文档之外的抽象，所以叫伪类）

伪类语法：

selector:pseudo-class {property:value;}

css类-伪类：

selector.class:pseudo-class {property:value;}

anchor 伪类

链接的不同状态：

<style>
a:link {color:#FF0000;}
a:visited {color:#00FF00;}
a:hover {color:#FF00FF;}
a:active {color:#0000FF;}
</style>

ps：

具体应用见上一篇

css类-伪类

伪类可以与 CSS 类配合使用：

a.red:visited {color:#FF0000;}

<a class="red" href="css-syntax.html">CSS Syntax</a>

first - child 伪类

选择元素的第一个子元素：

<style>
p:first-child
{
color:blue;
}
</style>

ps：

选择器匹配作为任何元素的第一个子元素的 <p> 元素

<style>
p > i:first-child
{
color:blue;
}
</style>

ps：

选择相匹配的所有 <p> 元素的第一个 <i> 元素

<style>
p:first-child i
{
color:blue;
}
</style>

ps：

选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素

lang 伪类

为不同的语言定义特殊的规则：

<style>
q:lang(no)
{
quotes: "~" "~";
}
</style>

<body>
<p>一些文字 <q lang="no">段落中的引用</q> 一些文字。</p>
</body>

ps：

lang 类为属性值为 no 的 q 元素定义引号的类型

focus 伪类

设置输入框（选择元素输入后具有焦点）：

<style>
input:focus
{
background-color:yellow;
}
</style>

伪元素

用来添加一些选择器的特殊效果（css伪元素控制的内容和元素是没有差别的，但是它本身只是基于元素的抽象，并不存在于文档中，所以称为伪元素）

伪元素语法：

selector:pseudo-element {property:value;}

css类-伪元素：

selector.class:pseudo-element {property:value;}

first-line伪元素

用于向文本的首行设置特殊样式：

<style>
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
</style>

ps：

"first-line" 伪元素只能用于块级元素
下面的属性可应用于 "first-line" 伪元素：

font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

first-letter伪元素

用于向文本的首字母设置特殊样式：

<style>
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
</style>

ps：

"first-letter" 伪元素只能用于块级元素
下面的属性可应用于 "first-letter" 伪元素：

font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if "float" is "none")
text-transform
line-height
float
clear

css类-伪元素

伪元素可以结合 CSS 类：

<style>
p.article:first-letter {color:#ff0000;}
</style>

Multiple Pseudo-elements

可以结合多个伪元素来使用：

<style>
p:first-letter
{
   color:#ff0000;
   font-size:xx-large;
}
p:first-line
{
   color:#0000ff;
   font-variant:small-caps;
}
</style>

ps：

段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示

before伪元素

在元素的内容前面插入新内容：

<style>
h1:before {content:url(/statics/images/course/smiley.gif);}
</style>

ps：

在每个 <h1>元素前面插入一幅图片

after伪元素

在元素的内容之后插入新内容：

<style>
h1:after {content:url(http://www.w3cschool.cn/statics/images/course/smiley.gif);}
</style>

ps：

在每个 <h1> 元素后面插入一幅图片

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>css整理</title>
</head>
<body>
    <style>
        a:link {
            color: #FF0000;
        }

        a:visited {
            color: #00FF00;
        }

        a:hover {
            color: #FF00FF;
        }

        a:active {
            color: #0000FF;
        }
    </style><!--链接-->

    <style>
        p:first-child {
            color: blue;
        }
    </style><!--首元素-->

    <style>
        p > i:first-child {
            color: blue;
        }
    </style><!--首元素-->

    <style>
        p:first-child i {
            color: blue;
        }
    </style><!--首元素-->

    <style>
        q:lang(no) {
            quotes: "~" "~";
        }
    </style>
    <body>
        <p>一些文字 <q lang="no">段落中的引用</q> 一些文字。</p>
    </body><!--定义lang-->

    <style>
        input:focus {
            background-color: yellow;
        }
    </style><!--输入框-->

    <style>
        p:first-line {
            color: #ff0000;
            font-variant: small-caps;
        }
    </style><!--first-line伪 元素-->

    <style>
        p:first-letter {
            color: #ff0000;
            font-size: xx-large;
        }
    </style><!--first-letter伪 元素-->

    <style>
        p.article:first-letter {
            color: #ff0000;
        }
    </style><!--伪 元素结合CSS类-->

    <style>
        p:first-letter {
            color: #ff0000;
            font-size: xx-large;
        }

        p:first-line {
            color: #0000ff;
            font-variant: small-caps;
        }
    </style><!--多个伪 元素-->

    <style>
        h1:before {
            content: url(/statics/images/course/smiley.gif);
        }
    </style><!--before伪 元素-->

    <style>
        h1:after {
            content: url(http://www.w3cschool.cn/statics/images/course/smiley.gif);
        }
    </style><!--after伪 元素-->

</body>
</html>