为了账号安全,请及时绑定邮箱和手机立即绑定

CSS3基础与选择器

难度入门
时长 2小时27分
学习人数
综合评分10.00
0人评价 查看评价
10.0 内容实用
10.0 简洁易懂
10.0 逻辑清晰
  • 结构性伪类选择器


    :first-child ul>li:first-child,ul下的第一个li元素(如果ul下第一个元素不是li,则匹配不到任何元素)


    :last-child


    :first-of-type div>p:first-of-type,div下的p标签中的第一个


    :last-of-type


    :only-of-type div>p:only-of-type,匹配div下唯一的一个p元素


    :nth-child(n) ul>li:nth-child(1),ul下第一个li元素(序号从1开始)


    :nth-child(odd) ul>li:nth-child(odd),ul下的第奇数个li


    :nth-child(even) ul下的第偶数个li


    :not(selector) :not(div),不选中div标签




    伪元素选择器(不是匹配真实存在的html元素)


    ::first-letter p::first-letter,选择p标签中的第一行的第一个字母,并且文字所处的行之前不能有其他内容(注意只能用于块级元素)


    ::first-line 在块级元素的第一行应用样式。第一行的长度取决于很多因素,包括元素宽度,文档宽度和文本的文字大小。和其他所有的伪元素一样,::first-line 不能匹配任何真实存在的 html 元素。


    ::before 在.box下的p元素内部的前面添加内容,通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。


    .box>p::before {


    content: "H";


    display: inline-block;

    }


    ::after




    UI元素状态伪类选择器


    :enabled


    :disabled


    :active


    :visited


    :hover


    :focus


    :read-only


    :checked

    查看全部
  • * 通配符选择器,匹配html页面中所有可见标签


    div 标签选择器,匹配所有同名标签


    # id选择器


    .  类选择器




    层级选择器


    .content p 祖先后代选择器,匹配class = content下的所有p标签


    div>p 父子选择器,匹配div标签下的直属p标签


    .num + span 相邻兄弟选择器,匹配class = num标签后面紧跟着的span标签


    .num ~ span 后续兄弟选择器,匹配class = num标签后面所有的span标签


    .num span, .menu p 分组选择器,匹配class = num下的所有span标签及class=  menu下的所有p标签




    属性选择器


    [class] ,匹配具有class属性的所有元素


    https://img1.sycdn.imooc.com/6554638e0001216204250177.jpg

    查看全部
  • 6466a7120001335c12000675.jpg人rrrrrrrrrrrrrr
    查看全部


  • 6466a541000112be12000675.jpgdeve高呵,突突突
    查看全部
  • nomnom在我们哦哦哦哦哦

    查看全部
  • 图记录6666年26666666月

    查看全部

举报

0/150
提交
取消
课程须知
1、0基础可学 2、对前端感兴趣的人群
老师告诉你能学到什么?
1、掌握css层叠样式表 2、掌握css的几种引用方式 3、掌握常用选择器及应用

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!