2017/7/22 学习心得 css3

本文详细介绍了CSS中的选择器,包括基本的选择器如div+p、div~p等,属性选择器如E[title],伪类选择器如:hover、:first-child,伪元素选择器如::first-letter等。同时讲解了如何利用这些选择器实现更精确的样式控制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、选择器

以前学过的:

div+p:选中div后面的第一个p

div~p:选中div后面所有的p

属性选择器[] 通过标签属性来选择器:

E[title] :选中页面的E元素,并且E需要带有title属性

E[title="123"] 带有title属性并且值为123

属性以aa开头:

E[title^="aa"]

属性以aa结尾:

E[title$="aa"]

属性包含aa:

E[title*="aa"]

2、伪类选择器

:hover 鼠标经过

:link 正常状态

:active 点击

:viaited 点击之后的状态

li:first-child 第一个子元素

li:last-child 最后一个子元素  

li:nth-child(n) 第n个,如果只是n,那就表示全部,0以上所有整数

li:nth-child(odd)  奇数

li:nth-child(even)  偶数

li:nth-child(-n+5)  前五个

li:nth-last-child(-n+5)  后五个

以上,所选到的类型必须是选到的制定类型li,否则无效

3、empty伪类

如果div是空的就会被选中(没有内容)

div:empty

4、target伪类

要配合锚点使用,表示被激活的状态

h2:target

<a href="#title">  <h2 id="title"> href对于

点击a连接时 h2对应的h2:target状态被激活,点击下一个,当前状态消失

5、伪元素

顾名思义:假的标签

标志性符号 双冒号 ::

通过css模拟出html效果

span::after  在之后添加

span::before 在之前添加

必须有content属性

6、伪元素选择器

li::first-letter 选中第一个字母

div::first-line  选中第一行

p::selection 选择区域样式,一般设置背景颜色和字体颜色


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值