偽元素選擇器

同偽類一樣，偽元素也是不存在的元素，表示元素的特殊狀態(tài)

常見的幾個偽元素：

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

::first-line 表示第一行

::selection 表示選中的元素

::before 元素開始的位置前

::after 元素結(jié)束的位置后

befor和after必須配合contend一起使用(before,after所寫的內(nèi)容無法選中且永遠(yuǎn)在最前和最后)

后代選擇器 .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,那么就是除了內(nèi)容為'44444'以外的所有p*/
   .box~p{
      background-color: yellow;
    }

/* .box后面的所有的同級兄弟div中，緊挨著這些div的一個同級兄弟p標(biāo)簽 */

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

/* 屬性選擇器的權(quán)重是0010	 */
/* 寫法1 某某[屬性] 選擇到a標(biāo)簽且有title屬性的變*/
a[title]{
    background: yellow;
}
a[lang][target]{
    background: yellow;
}
/*重點: 寫法2: 某某[屬性=屬性值] 選擇到有某某標(biāo)簽有指定屬性且屬性值必須一摸一樣的也有的多一個空格都不行 */
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標(biāo)簽有class屬性且屬性值是li開頭的 */
a[class^=" li"]{
    background-color: yellow;
}
a[title^="this"][lang]{
    background-color: yellow;
}
/* 寫法4 某某[屬性$=屬性值] */
/* a標(biāo)簽有class屬性且屬性值結(jié)尾是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標(biāo)簽且有href屬性且只要有字母b就可以 */
a[href*="b"]{
    background-color: green;
}
/* 寫法6 某某[屬性~=屬性值] */
/* 選擇到的是a標(biāo)簽且有class屬性,且屬性值有完整的itme詞的變 */
a[class~="item"]{
    background-color: green;
}
/* 寫法7 某某[屬性|=屬性值] */
/* 這個是選擇到有a標(biāo)簽,且有屬性title,且屬性值只有1個是link的或者屬性值有多個但是得是link-開頭的變 */
a[title|="link"]{
    background-color: green;
}

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