常用样式

常用的伪类选择器

以type结尾的是在相同元素中选择

:first-of-type  第一个子元素

:last-of-type   最后一个子元素

:nth-of-type()    选中第n个元素

选择第几个元素

:nth-of-type(1)    // 选择第一个元素

:first-of-type 

 // 选择第一个span元素

span {
　　text-align: right;

　　&:first-of-type {
　　　　margin-bottom: 8px;
　　}
}

span {
　　text-align: right;

　　&:nth-of-type(1) {
　　　　margin-bottom: 8px;
　　}
}

 

以child结尾的是在所有元素中选择

:first-child   第一个子元素

:last-child    最后一个子元素

:nth-child()   选中第n个元素

 

        n   第n个   n的范围0到正无穷（全选）

        even或2n    选中偶数位的元素

        odd或2n+1   选中奇数位得到元素

 :not()        将符号条件的元素去除

 

 

伪元素选择器

同伪类一样，伪元素也是不存在的元素，表示元素的特殊状态

常见的几个伪元素：

::first-letter 表示第一个字母

::first-line 表示第一行

::selection 表示选中的元素

::before 元素开始的位置前

::after 元素结束的位置后

befor和after必须配合contend一起使用(before,after所写的内容无法选中且永远在最前和最后)

后代选择器 .box p

/* 后代选择器(包含选择器),选择到的是box下面的所有后代p */
    .box p{
      background-color: yellow;
    }

子代选择器 .box>p

/*子选择器选中的是.box下所有的儿子p */
   .box>p{
      background-color: yellow;
    } 

相邻兄弟选择器 .box+p

/* 相邻兄弟,会选择到box后面紧挨着的一个兄弟p */
    .box+p{
      background-color: yellow;
    }

通用兄弟选择器 .box~p

/*通用兄弟选择器,会选择到.box后面所有的兄弟p,那么就是除了内容为'44444'以外的所有p*/
   .box~p{
      background-color: yellow;
    }

/* .box后面的所有的同级兄弟div中，紧挨着这些div的一个同级兄弟p标签 */

.box~div+p{
      background-color: yellow;
  }
 

 

/* 属性选择器的权重是0010	 */
/* 写法1 某某[属性] 选择到a标签且有title属性的变*/
a[title]{
    background: yellow;
}
a[lang][target]{
    background: yellow;
}
/*重点: 写法2: 某某[属性=属性值] 选择到有某某标签有指定属性且属性值必须一摸一样的也有的多一个空格都不行 */
a[lang="zh"]{
    background: yellow;
}
a[title="this is a link"]{
    background: yellow;
}
/* class名字是item的,且有属性lang且属性值必须一模一样是zh-cn的 */
.item[lang="zh-cn"]{
    background: yellow;
}
/* id是last且有title属性且有class属性,属性值只能是links的变 */
#last[title][class="links"]{
    background: yellow;
}

/* 写法3: 某某[属性^=属性值] */
/* a标签有class属性且属性值是li开头的 */
a[class^=" li"]{
    background-color: yellow;
}
a[title^="this"][lang]{
    background-color: yellow;
}
/* 写法4 某某[属性$=属性值] */
/* a标签有class属性且属性值结尾是t的变 */
a[class$="t"]{
    background-color: yellow;
}
a[href$=".pdf"]{
    background-color: yellow;
}
a[href$=".doc"]{
    background-color: red;
}
a[href$=".png"]{
    background-color: green;
}

/* 写法5 某某[属性*=属性值] */
/* 选择到a标签且有href属性且只要有字母b就可以 */
a[href*="b"]{
    background-color: green;
}
/* 写法6 某某[属性~=属性值] */
/* 选择到的是a标签且有class属性,且属性值有完整的itme词的变 */
a[class~="item"]{
    background-color: green;
}
/* 写法7 某某[属性|=属性值] */
/* 这个是选择到有a标签,且有属性title,且属性值只有1个是link的或者属性值有多个但是得是link-开头的变 */
a[title|="link"]{
    background-color: green;
}

 

 

参考： https://blog.csdn.net/weixin_48649246/article/details/127939139