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

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

    我们每个人都意识到了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结构的语义化?

相关推荐 更多

热门文章

  • 要不要学Python?还在犹豫要不要学Python的同学看过来
  • 怎么学编程?学编程黄金4步,太多人卡在了第二步!
  • 作为996社畜,如何自学Python?
  • 什么是Java运算?Java运算:比九九乘法表还简单
  • 编程第一步,怎么选择适合自己的编程语言?
  • 程序员高薪的秘密:编程能力+编程思维
  • 2021年7月全国程序员平均薪资出炉,又涨了!!
  • 软件测试面试题-测试类型
  • Git常用命令清单,速查表
  • 2021年7月编程语言排行榜
  • 查看更多

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

博学谷二维码