更多的选择器 更多伪类选择器 颜色选中时写法 被选中的第一行文字 选中第几个元素

目录

• 更多的选择器
• • 更多伪类选择器
  • 1. first-child
  • 2. last-child
  • 3. nth-child
  • 4. nth-of-type
  • 更多的伪元素选择器
  • 1. first-letter
  • 2. first-line
  • 3. selection

更多的选择器

更多伪类选择器

1. first-child

选择第一个子元素
圈住的地方意思是：li 的第一个子元素设置为红色。

first-of-type，选中子元素中第一个指定类型的元素

2. last-child

   必须是a元素，必须是最后一个子元素
 **加粗样式**       a:last-child{
            color: aqua;
        }

last-of-type

     选中的是子元素中的第一个a元素 
        a:last-of-type{
            color:blue;
        }

3. nth-child

• 选中指定的第几个子元素

 a:nth-child(5){
            color: yellow;
        }

如果a元素前面有p标签的内容，那么选中的是第四个a元素，因为要从p标签开始数。

• even：关键字，效果等同于2n

  a:nth-child(even){
            color: bisque;
        }

• odd: 关键字，等同于2n+1

4. nth-of-type

选中指定的子元素中第几个某类型的元素

就像下图会忽视p元素，单看a元素的排列。

更多的伪元素选择器

1. first-letter

选中元素中的第一个字母

2. first-line

选中元素中第一行的文字

3. selection

选中被用户框选的文字