选择器

基础选择器

1、全局选择器

*{}
选中页面所有元素

2、元素选择器

div{}
a{}
img{}
选中所有指定的元素

3、类选择器

.className{}
类名可以重复，一个class可以起多个名字，用空格隔开

4、ID选择器

#IdName{}
ID名字唯一

优先级：

行内样式 >ID选择器>类选择器>元素选择器>全局选择器
  权重：    1000    100       10        1

5、合并选择器

选择器1,选择器2,..{}

6、交集选择器

元素选择器.className{}

命名规则

1. 可以包含数字、字母、下划线、横杠
2. 不要以数字开头

HTML四个通用属性

除br外，其他元素都有的属性

    tible  鼠标悬停给予提示
    class  类选择器
    id     ID选择器
    style  行内样式

关系选择器

1、后代选择器

选择器1 选择器2{}
选中所有后代

2、子代选择器

选择器1>选择器2{}
选中所有直接子代

3、相邻兄弟选择器

选择器1+选择器2{}
平级 挨着 后面的一个兄弟

4、通用兄弟选择器

选择器1~选择器2{}
平级 后面  的所有兄弟

伪对象选择器

1.在元素前面或者后面插入内容

*::beforel / *:beforel{
                        content:"";
                       } //元素内容在最前面

---

*::after / *:after{
                        content:"";
                       } //元素内部的最后面

2.插入图片

*::beforel{
            content:url("");
           }

---

*::after{
            content:url("");
           }

3.自定义插入内容

*::beforel{
           content:"";
           内容
           }

---

*::after{
           content:"";
           内容
           }

伪类选择器

表示元素的一个状态，用冒号连接

:link      点击之前（只适用于a）
:visited   点击之后（只适用于a）
:hover     鼠标悬停（适用所有元素）
:active    鼠标按下（适用所有元素）
先爱后恨的顺序

css3新增

:first-child   第一个子元素是···
:last-child   最后一个子元素是···
:nth-child(number|even|odd|倍数)   第几个子元素是···
                   偶   奇

---

:first-of-type   第一个子元素
:last-of-type   最后一个子元素
:nth-of-type(number|even|odd|倍数)   第几个子元素
                     偶   奇

了解

:only-child 唯一一个子元素是···
:nth-last-child() 倒数第几个子元素是···
:nth-last-of-type() 倒数第一个子元素

---

:empty   空的子元素是...
:not(选择器)  否定

---

:focus 获取焦点时的样式
:checked 被选中的样式 配合单选按钮和多选按钮

---

:selection 被选中时的样式，一般配合背景颜色和字体颜色等属性
           选中文本的样式
           应用少数css属性  //color,background,cursor,outline

cursor:pointer; 把光标变成小手

属性选择器

    [属性]
    [属性=属性值]
    元素[属性 = "属性值"]
    元素[属性 ^= "值"]  以什么开头
    元素[属性 &= "值"]  以什么结尾
    元素[属性 *= "值"]  包含