CSS3选择器

最新推荐文章于 2023-06-22 15:09:42 发布

抹茶香蕉和牛奶

最新推荐文章于 2023-06-22 15:09:42 发布

阅读量91

点赞数

本文链接：https://blog.csdn.net/qq_39114788/article/details/105162455

版权

在这里插入图片描述

div[class^='icon']/* 以icon开头的 */
{
    color:red;
}

在这里插入图片描述

   <style>
  ul li:first-child{
      background-color: pink;
  }
  ul li:last-child{/*最后一个孩子*/
      background-color: deeppink;
  }
  ul li:nth-child(8)/*第八个孩子*/
  {
      background-color: blueviolet;
  }
  ul li:nth-child(even)/*偶数*/
  {
      background-color: chartreuse;
  }
  ul li:nth-child(odd)/*奇数*/
  {
      background-color:darkgoldenrod;
  }
    </style>

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200328160218631.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE0Nzg4,size_16,col or_FFFFFF,t_70)
注意：nth-child(n) 选择父元素里面的第n个孩子，不管里面的好孩子是否同一类型

div span:nth-child(1)/*没有，既是span也的是第一个孩子*/
{
    background-color: gold;
}
div span:first-of-type{/*div里面span类型的第一个孩子*/
    background-color: fuchsia;
}
div span:last-of-type{
    background-color:lightslategray;
}
div span:nth-of-type(2){
    background-color:magenta;
}

在这里插入图片描述

div::before
{
    content:"我";
}
div::after{
    content:"小猪佩奇";
}
    </style>
</head>
<body>
<div>是</div>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

抹茶香蕉和牛奶

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3选择器

div[class^='icon']/* 以icon开头的 */{ color:red;} <style> ul li:first-child{ background-color: pink; } ul li:last-child{/*最后一个孩子*/ background-color: deeppink; } ul ...
复制链接

扫一扫