class选择器第一个_CSS选择器笔记整理

以下是我在刚刚接触前端的时候记下的笔记,希望对大家有用,欢迎关注三连!

一、常用选择器

1】通配符选择器

*{
    color:blue;
}

2】元素选择器

p{
    color:blue;
}
myElement{
    color:red;
}

3】类选择器

<p class="warning"></p>
<p><span class="warning"></span></p>
*.warning{
    font-weight:bold;
}
.warning{
    font-weight:bold;
}

4】ID选择器

<p id="lead"></p>
<p><span></span></p>
*#lead{
    font-weight:bold;
}
#lead{
    font-weight:bold;
}

二、属性选择器

1】简单属性选择器

<h1 class="hoopla"></h1>
<h1></h1>
<h1 class="fancy"></h1>
h1[class]{
    color:blue;
}
/*这里就只能选择第一个和第三个标签*/

2】准确属性值选择器

<planet>水星</planet>
<planet moons="1">地球</planet>
<planet moons="2">火星</planet>
planet[moons='1']{
    color:blue;
}

3】部分属性值选择器

15f2cef80a3e217a33f2a42e1a8685e9.png

三、文档结构选择器

1】后代选择器、子选择器

a67576b60416368c8c66d9be95dd13ed.png

2】兄弟选择器

22c22f90f2546590b799e993021ac8af.png

四、伪类选择器

1】E:root

文档的根元素

2】E:nth-child(n)

第n个子元素

bb957058605b8249e68a7d15c98fe9ef.png

3】E:nth-of-type(n)

同类型的第n个子元素

c5040c324829bdab54ca8e0fa64aabb8.png

4】E:link

没有访问过的状态

5】E:active

链接正在被点击(正在被点击的E元素)

6】E:focus

选中状态(选中状态的E元素)

7】E:enable/disable

元素enable/disable状态

8】E:visited

点击过这个链接之后的状态(点过链接的E元素)

9】E:hover

鼠标指针正悬停的位置(鼠标悬停的E元素)

10】E:checked

选中的元素(选中的E元素)

11】E:not(s)

反向选择(不是s元素的E元素)

五、伪元素选择器

1】E::first-line

E元素的第一行

2】E::first-letter

E元素的第一个字符

3】E::before

在E元素之前生成一个内容

4】E::after

在E元素之后生成一个内容

六、BILIBILI链接

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值