作者信息

长期闲置

长风破浪会有时,直挂云帆济沧海。

最近文章
内存条有什么用933
es模块能在node中执行吗599
nodelist是什么意思623
视频教程分类
推荐视频教程
  • php程序员小白到大牛三个月集训php程序员小白到大牛三个月集训
  • Laravel 9 学习正当时—保姆级教程,想学不会都难!Laravel 9 学习正当时—保姆级教程,想学不会都难!
  • 千万级数据并发解决方案(理论+实战)千万级数据并发解决方案(理论+实战)
  • Laravel基础与实战(模块化)Laravel基础与实战(模块化)
  • 首页 >web前端 >前端问答 > 正文

    类名选择器是css3新增才有的吗

    原创2022-06-20 15:48:46557 关注公众号:每天精选资源文章推送

    类名选择器不是css3新增才有的,类名选择器用于选取带有指定类的元素,语法为“.class{css代码;}”;类名选择器是在css3之前就已经开始使用了,并不是css3新增的,css3新增的选择器有属性选择器、结构伪类选择器等。

    本教程操作环境:windows10系统、CSS3&&HTML5版本、Dell G3电脑。

    类名选择器

    类选择器

    用class属性调用class类

    举例:

     <p class="one">类选择器</p>
     .one {
           color: yellow;
            }

    这里的p标签类名叫做one,css给他添加样式的时候用的.+one(他的类名)选择的他,这种就是类选择器。

    扩展知识:css3新增选择器

    属性选择器

    • input[value] { }(input并且具有value属性)

    • input[type=text] {} {input的属性的值为text的需要更改}

    • div[class^=icon] { } (选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 )

    • section[class$=data] {} ( 选择类名以data结尾的 )

    结构伪类选择器

    • ul li:first-child { } (选择ul里面的第一个孩子 小li)

    • ul li:last-child { } (选择ul里面的最后一个孩子 小li)

    • ul li:nth-child(2) { } (选择ul里面的第二个孩子 小li)

    • ul li:nth-child(6) { } (选择ul里面的第六个孩子 小li)

    • ul li:nth-child(even/2n) { } (把所有的偶数 even的孩子选出来 )

    • ul li:nth-child(odd/2n+1) { } (把所有的奇数 odd的孩子选出来)

    • ol li:nth-child(n) { } (从0开始 每次加1 往后面计算 必须是n 不能是其他的字母 选择了所有的孩子

    • ul li:nth-child(n+5) { } (选择从第五个孩子开始)

    • ul li:nth-child(-n+5) { } (选择从第五个孩子开始往前数)

    • ul li:first-of-type { } (第一个孩子)

    • ul li:last-of-type { } (最后一个孩子)

    • ul li:nth-of-type(even) { } (偶数孩子)

    • section div:nth-child(1) { } (nth-child 会把所有的盒子都排列序号执行的时候首先看 :nth-child(1) 之后回去看 前面 div )

    • section div:nth-of-type(1) { } (nth-of-type 会把指定元素的盒子排列序号;执行的时候首先看 div指定的元素 之后回去看 :nth-of-type(1) 第几个孩子 )

    伪元素选择器(页面中找不到的,常用于字体标签)[和标签选择器一样,权重为1]

    • ::before在元素的前面插入内容(父盒子的内部的前面)

    • ::after在元素的后面插入内容(父盒子的内部的后面)

    • 必须有content属性

    • div::after { content: '我';}

    • .tudou:hover::before { } (当我们鼠标经过了 土豆这个盒子,就让里面before遮罩层显示出来)

    • 伪元素清除浮动

    (学习视频分享:css视频教程html视频教程

    以上就是类名选择器是css3新增才有的吗的详细内容,更多请关注php中文网其它相关文章!

    20期PHP线上班

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

  • 相关标签:css
  • 推荐:PHP从基础到实战教程视频

    相关文章

    相关视频


    专题推荐