属性选择器

属性选择器 [ ]
写在 开始标签 里面的东西 都是标签的属性
选择 指定标签 的 指定属性
标签名[属性名]{}
选择 指定标签 的 指定属性 的 指定值
标签名[属性名='属性值']{}
选择 所有拥有 指定属性的标签
[属性名]{}
选择 所有拥有 指定属性且有指定值的标签
[属性名='属性值']{}

选择具有href属性的a标签

  ...
    a[href]{
        display: inline-block;
        width: 200px;
        height: 200px;
        background-color: red;
    }
  ...

伪类选择器

:empty
选择所有的 没有子元素或内容 的标签
:first-child
选择所有的 第一个子元素为目标元素 标签
例:
.box div:first-child{}
选择.box的第一个子元素且子元素必须是div
:last-child
选择 最后一个子元素且必须是目标元素
例:
.box div:last-child{}
选择.box的最后一个子元素 且 子元素必须是div
:first-of-type
选择子元素中 第一个 目标元素
例:
.box div:first-of-type{}
选择.box的子元素中 第一个div
这个div可以不是第一个子元素
:last-of-type
选择子元素中 最后一个 目标元素
例:
.box div:last-of-type{}
:nth-child(n)
选择第n个子元素 子元素必须是目标元素
例：
.box div:nth-child(2){}
选择.box第二个子元素 且子元素必须是div
:nth-last-child(n)
选择 倒数第n个子元素 子元素必须是目标元素
例：
.box div:nth-last-child(2){}
选择.box倒数第二个子元素 且子元素必须是div
:nth-of-type(n)
选择 第n个目标元素
例：
.box div:nth-of-type(2){}
选择.box中第二个div
:nth-last-of-type(n)
选择 倒数第n个目标元素
例：
.box div:nth-last-of-type(2){}
选择.box中倒数第二个div

新增伪元素选择器

::first-letter
选中 目标元素的第一个字符

...
   p::first-letter{
        font-size: 30px;
        color: red;
    }
...

::first-line
选中 目标元素的第一行文本

...
    p::first-line{
        background-color: yellow;
    }
...

::selection
不需要指定元素 作用于整个页面
修改用户选中文字后的文字颜色和背景色

...
   ::selection{
        background-color: aqua;
    }
...