css的属性选择器、伪元素及伪类选择器

1. 属性选择器

• 1.基本元素[属性]

例：  <p title:"qiuqiu">p1</p>
          p[title]

• 2.基本元素[属性 = 值] （属性只有一个值）

例：  <p title:"qiuqiu1">p1</p>
        <p title:"qiuqiu2">p1</p>
         p[title = qiuqiu2]

• 3.基本元素[属性 ~= 值] （属性有多个值，空格隔开）

例： <p title:"qiuqiu1 abc">p1</p>
       <p title:"qiuqiu2">p1</p>
        p[title ~= qiuqiu1 abc]

• 4.基本元素[属性 ^= 值] （属性以特定值开始）
  例： <p title:“test1”>p1
  <p title:“test2”>p1
  p[title ^= test]
• 5.基本元素[属性 $= 值] （属性以特定值结束）
  例： <p title:“test1 abc”>p1
  <p title:“test2 acb”>p1
  p[title $= bc]

2. 伪类选择器

• 1.irst-child

      [例：p:first-child]  选择器用于选取属于其父元素[p]的首个子元素的指定选择器

• 2.last-child

    [例：p:last-child]   选择器用于选取属于其父元素[p]的最后个子元素的指定选择器  

• 3.nth-child(n)

    [例：p:nth-child(n)] 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。

• 4.nth-of-type(n)

   [例：p:nth-of-type(n)]  选择器匹配同类型中的第n个同级兄弟元素。n可以是一个数字，一个关键字，或者一个公式。

• 补充：a元素

  a:link {color: #FF0000}       //未访问的链接
  a:visited {color: #00FF00}   // 已访问的链接
  a:hover {color: #FF00FF}    // 当有鼠标悬停在链接上
  a:active {color: #0000FF}    // 被选择的链接鼠标按下
  

3.伪元素选择器

• 1.before

     [例：P:before]   在子元素的最前面, 添加一个伪元素, 伪元素内容通过 content 控制,可以在content属性中写入文本内容，
       但是通常为空字符串

• 2.after

 [例：P:after] 在子元素的最后面, 添加一个伪元素, 伪元素内容通过 content 控制,可以在content属性中写入文本内容，
     但是通常为空字符串

• 3.first-letter

 [例：P:first-letter] 伪元素向文本的第一个字母添加特殊样式

• 4.first-line

[例：P:first-line]    伪元素向文本的第一行文本添加特殊样式

• 5.selection

[例：p::selection]  ::selection选择器匹配元素中被用户选中或处于高亮状态的文本部分。