前端入门篇(十八)伪元素选择器

伪元素:我们写的元素都会带上两个隐藏的伪元素,一个在开始,称为"before",一个在结束,称为"after"
伪元素位置如下注释的地方:

<body>
    <p>
        
        p1
        
    p>
body>

css文件:

p::before {
    content: "before";
    color: black;
    font-size: 10px;
}
p::after {
    content: "after";
    color: black;
    font-size: 10px;
}
p {
    color: red;
    background-color: greenyellow;
    font-size: 30px;
}

效果:两个伪元素相当于是p标签的子标签,会继承p关于文字的样式,此处对伪元素做了单独的设定,
在这里插入图片描述
块元素除了这两个伪元素,还有其他的,如:
first-letter第一个字(母),first-line第一行

first-letter第一个字(母):
css文件:

p::first-letter{
    color: red;
    background-color: greenyellow;
    font-size: 30px;
}

html文件:
前端入门篇(十八)伪元素选择器_第1张图片

效果:
前端入门篇(十八)伪元素选择器_第2张图片
first-line第一行:
css文件:

p::first-line{
    color: red;
    background-color: greenyellow;
    font-size: 30px;
}

html文件:
前端入门篇(十八)伪元素选择器_第3张图片

效果:
在这里插入图片描述
与伪元素选择器语法相似的选择器:伪类选择器,同一元素,不同状态下样式不同,如a标签,点击时状态改变,对应样式不同

你可能感兴趣的:(前端入门,css)