02selector2

goer ... 2022-01-05 Css
  • Css
大约 2 分钟

CSS选择符

[toc]

# css选择符:

# (8)属性选择符

根据标签属性进行选择 (拓展知识)

# (9)伪对象选择符

使用两个冒号的 和伪类选择符的一个冒号区分开 (挺重要的)

# 1.first-latter

设置第一个字符的样式

<p>我大范德萨富士达我的大范德萨发大水佛但是 </p>
p::first-latter{
	font-size:20px;
	color:red;
}
1
2
3
4
5
# (2).first-line

设置第一行的样式 和第一个差不多

# (3). before

在选择符之前设置内容

<p>
    dafsdofjdsafdslkafodsaf
</p>
<style>
  	p::before{
		content:"随便输入的"
	}
</style>
1
2
3
4
5
6
7
8
# (4).after

在选择符之后设置内容 和上个兄弟一样

# (5).placeholder

给placeholder提示的文本设置样式

我们还记得input的placeholder属性么,提示信息,这个选择符就可以给他设置样式
<input type="text" name="" placeholder="用户名">

<style>
    input::placeholder{
        color:red;
        font-size:20px;
    }
</style>
1
2
3
4
5
6
7
8
9
# (6).selection

给选中的文本设置样式 -- 鼠标选中的文字

<p>
    dasfdsafdsf选择复制我 
</p>
<style>
    p::selection{
        /* 鼠标选中的文字会有的样式 */
        background-color:blue;
        color:green;
    }
</style>
1
2
3
4
5
6
7
8
9
10