• 在线客服

  • 扫描二维码
    下载博学谷APP

  • 扫描二维码
    关注博学谷微信公众号

  • 意见反馈

原创 css有哪些基本选择器和高级选择器?

发布时间:2019-07-08 14:09:14 浏览 6658 来源:博学谷资讯 作者:照照

    我们每个人都意识到了CSS的重要性,但是还有很多人不知道css有哪些基本选择器和高级选择器?下面我们来总结一下。

     

     

    css有哪些基本选择器和高级选择器?

     

     

    ID选择器>类选择器>标签选择器

     

    行内样式>内部样式>外部样式

     

    *结构伪类选择器 一旦设置 不管在行内还是在后面重新设置,都没办法改变

     

    *结构伪类选择器设置奇偶行以及从第三行开始变色如何实现

     

    nth-cild(2N+3)表示从第三行开始的奇数行

     

    同理 nth-child(2N+4)表示从第四行开始的偶数行

     

    nth-cild(2N+5)表示从第五行开始的奇数行

     

    *设置前三个:

     

    p:nth-child(-n+3){

     

    background-color: #b3d4fc;

     

    }

     

    *使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点

     

    E F:nth-child(n)在父级里从一个元素开始查找,不分类型

     

    E F:nth-of-type(n)在父级里先看类型,再看位置

     

    注意

     

    child 跟子选择器没有关系,可以是子选择,也可以是后代选择 由层次选择器 (如table tr)来控制

     

    1.层次选择器

     

    table td 后代选择器 td包含在table里

     

    div>p子选择器 p是div的子元素

     

    p1+p p1后面一个兄弟p变化 是对p进行处理 p1不变 而且只是下面相邻的变化 上面相邻不变化

     

    p1~p p1后面所有兄弟p变化 p1不变

     

    2.结构伪类选择器

     

    P:first-child 作为父元素的第一个子元素得元素 p

     

    P:last-child 作为父元素的最后一个子元素得元素 p

     

    P a :nth-child(n) p中第n个a元素 (even)(odd)

     

    p:first-of-type 必须是p元素 不是子元素也行

     

    p a:nth-of-type(n)

     

    必须是a元素 不是a的子元素也行

     

    3.属性选择器

     

    a[id] a标签中含有id的

     

    a[id=111] a标签中的id=111的

     

    a[href*=http] a标签中包含href属性 且都包含http

     

    a[href&=png] a标签中包含href属性 且最后以png结尾

     

    a[href^=http://] a标签中包含href属性且以http://开头

     

     

    申请免费试学名额    

在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!

上一篇: 渐进增强与优雅降级之间的不同 下一篇: 如何理解HTML结构的语义化?

相关推荐 更多

热门文章

  • 前端是什么
  • 前端开发的工作职责
  • 前端开发需要会什么?先掌握这三大核心关键技术
  • 前端开发的工作方向有哪些?
  • 简历加分-4步写出HR想要的简历
  • 程序员如何突击面试?两大招带你拿下面试官
  • 程序员面试技巧
  • 架构师的厉害之处竟然是这……
  • 架构师书籍推荐
  • 懂了这些,才能成为架构师
  • 查看更多

扫描二维码,了解更多信息

博学谷二维码