选择器的使用

1.属性选择器

作用：是为了选中属性符合要求的元素

语法：

（1）[属性名]：具有某个属性的元素

（2）[属性名="值"]：具有某个属性名且等于指定值的元素

（3）[属性名="^"]：具有某个属性名且开头指定值的元素

（4）[属性名="$"]：具有某个属性名且结尾指定值的元素

（5）[属性名="*"]：具有某个属性名且包括有值的元素（语文不太好，尽自己最大努力来表达了 ）

例：

div[title]{color: red;}//表示具有title属性名的元素

div[title="a1"]{color: red;}//表示具有title属性值为a1的元素

div[title^="a1"]{color: red;}//表示具有title属性值为a1开头的元素

div[title$="a1"]{color: red;}//表示具有title属性值为a1结尾的元素

div[title*="a1"]{color: red;}//表示具有title属性值为包含a1的元素

2.伪类选择器

选中特殊状态下的元素。

何为伪类，就是指的虚假的元素。

一、动态伪类

         1. :link  表示的是超链接未被使用时的状态

         2. :visited  表示的是超链接被使用过的状态

         3. :hover  表示的是鼠标悬浮在超链接时的状态

         4. :active  表示的是超链接正在被使用时的状态

         5. :focus  表示的是获取焦点时候的状态，多用于表单元素（鼠标点击时或者是Tab键时）

二、结构伪类

      :first-child  表示的是兄弟元素中的第一个元素

      :last-child  表示的是兄弟元素中的最后一个元素

      :nth-child(n)  表示的是所有兄弟元素中的第n个元素

      :first-of-type   表示的是所有同类型兄弟元素中的第一个元素

      :last-of-type   表示的是所有同类型兄弟元素中的最后一个元素

      :nth-of-type(n)  表示的是所有同类型兄弟元素中的第n个元素

关于n的取值：

1. 0 或不写：什么都选不中 —— 几乎不用。
2. n ：选中所有子元素 —— 几乎不用。
3. 1~正无穷的整数 ：选中对应序号的子元素。
4. 2n 或 even ：选中序号为偶数的子元素。
5. 2n+1 或 odd ：选中序号为奇数的子元素。
6. -n+3 ：选中的是前3 个。

了解：

1.:nth-last-child(n) 表示兄弟元素中的倒数第几个。

2.:nth-last-of-type(n)  所有同类型兄弟元素中的倒数第几个。

3.:only-child 选择没有兄弟的元素（相当于是独生子女）

4:only-of-type 选择没有同类型兄弟的元素。

5. :root 根元素。

6. :empty 内容为空元素（空格也算内容）。

三、否定伪类

:not(选择器)  排除括号中的元素

四：UI伪类（多用于表单控件）

1、:checked 用于表单的单选和复选按钮。

2、:enable 可用的表单元素（没有disable属性）。

3、:disable 不可用的表单元素（有disable属性）。

五:目标伪类（了解即可）

:target 选中锚点只想的元素

六、语言伪类（了解即可）
:lang() 根据指定的语言选择元素（本质是看lang 属性的值）。

伪元素选择器

作用：选中元素中的一些比较特殊的位置

如下：

::first-letter 选中元素中的第一个汉字

::first-line  选中元素中的第一行文字

::selection 鼠标选中的内容

::placeholder 用于表单控件中输入框的提示文字的效果

::before 在元素最开始的地方，创建一个子元素(需要配合content使用)。

::after  同before一样，after在后面（before和after在网页显示效果是不可选中的）。

所有写的东西，都是在看了尚硅谷张天禹老师的课程写的，主要是为了加深自己的印象和进一步去记忆这些东西。才写的，可以去看看哦，在b站上面哦网址在这：001_教程简介_哔哩哔哩_bilibili