阿哥论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 193|回复: 0

CSS选择器学习总结

[复制链接]

升级  39%

举人

Rank: 3Rank: 3

积分
317
 楼主| 发表于 2020-4-7 22:59:01 | 显示全部楼层 |阅读模式
CSS选择器学习总结

CSS 选择器学习简单选择器
  •   
  •    
  •    
  •     CSS选择器
  •    
  •   
  •   
  •    
  •       1
  •       2
  •       3
  •       4
  •       5
  •       6
  •       7
  •       8
  •       9
  •    
  •     CSS选择器学习
  •     2020年4月7号
  •   


  • 显示效果


  • style里面添加下面样式
    •    /* 父子选择器 */
    •     body > div {
    •       border: 3px solid white;
    •     }
  • 显示效果


  • style里面添加下面样式
    •     /* 同级相邻选择器(后面一个) */
    •     .item#center + .item {
    •       background-color: lightgreen;
    •     }
  • 显示效果


  • style里面添加下面样式
    •    /* 同级相邻选择器(后面全部) */
    •     .item#center ~ .item {
    •       background-color: violet;
    •     }
  • 显示效果


伪类选择器不分组匹配
  • style里面添加下面样式
    •    /* 伪类选择器(不分组匹配) */
    •     /* 匹配第一个子元素 */
    •     .container > :first-child {
    •       background-color: lime;
    •     }
  • 显示效果


  • style里面添加下面样式
    •      /* 匹配最后一个子元素 */
    •     .container > :last-child {
    •       background-colorlivedrab;
    •     }
  • 显示效果


  • style里面添加下面样式
    •    /* 匹配任何一个子元素 */
    •     .container > :nth-child(4) {
    •       background-color: mediumblue;
    •     }
  • 显示效果


  • style里面添加下面样式
    •   /* 匹配倒数任何一个子元素 */
    •     .container > :nth-last-child(4) {
    •       background-color: midnightblue;
    •     }
  • 显示效果


  • style里面添加下面样式
    •     /* 匹配倒数偶数元素 */
    •     .container > :nth-child(even) {
    •       background-color:tomato;
    •     }
  • 显示效果


  • style里面添加下面样式
    •     /* 将ID选择器样式注释掉,因为权重大于类选择器 */
    •     /* #center {
    •       background-color: slateblue;
    •     } */
    •     /* 匹配倒数奇数元素 */
    •     .container > :nth-child(odd) {
    •       background-color: yellowgreen;
    •     }
  • 显示效果


  • style里面添加下面样式
    •     /* 匹配前四个元素 */
    •     .container > :nth-child(-n + 4) {
    •       background-color: red;
    •     }
  • 显示效果


  • style里面添加下面样式

    •    /* 从第6个开始,选择剩下的所有元素 */
    •           .container > :nth-child(n +6) {
    •       background-color:seagreen;
    •     }
  • 显示效果


伪类选择器分组匹配
HTML源码
  •   
  •    
  •    
  •     CSS选择器
  •    
  •   
  •   
  •    
  •       1
  •       2
  •       3
  •       4
  •       5
  •       6
  •       7
  •       8
  •       9
  •    
  •     CSS选择器学习
  •     2020年4月7号
  •   


  • style里面添加下面样式
    •     /* 伪类选择器(分组匹配) */
    •     /* 匹配span第一个子元素 */
    •     .container > span:first-of-type{
    •         background-color: orangered;
    •     }
  • 显示效果


  • style里面添加下面样式
    •       /* 匹配span最后一个子元素 */
    •     .container > span:last-of-type{
    •         background-color:sienna;
    •     }
  • 显示效果


  • style里面添加下面样式
    •     /* span分组第三个 */
    •     .container > span:nth-of-type(3) {
    •       background-color: springgreen;
    •     }
  • 显示效果


  • style里面添加下面样式
    •     /* span分组前三个 */
    •     .container > span:nth-child(-n + 3){
    •         background-color: springgreen;
    •     }
  • 显示效果

IT论坛伪类
html源码
  •   
  •    
  •    
  •     CSS选择器
  •    
  •   
  •   
  •    
  •       1
  •       2
  •       3
  •       4
  •       5
  •       6
  •       7
  •       8
  •       9
  •    
  •   

  • 初步预览效果


  • :root伪类
  • style里面添加下面样式
    •     /* :root伪类 */
    •     :root {
    •       background-color: yellow;
    •     }
  • 显示效果


  • a:hover伪类
    •     6
  • 上面源码修改成下面源码
    •    
    •       php官网
    •    
    -在style里面添加下面样式
    •     /* a:hover伪类 */
    •     a:hover {
    •       background-color: red;
    •     }
  • 显示效果


学习总结1.伪类学习感觉很重要,对学习帮助很大,希望以后可以常用2.经过老师讲解后感觉伪类很好理解3.似乎还是对display属性掌握不好,需要加深对display理解

摘自:https://www.php.cn/blog/detail/20397.html

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册 新浪微博账号登陆

x
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则


快速回复 返回顶部 返回列表