CSS 选择器

CSS 选择器

CSS 基本选择器及其扩展

CSS 基本选择器

1. 通配符选择器 *
2. 元素选择器 使用标签的名称
3. 类选择器 使用 . 进行匹配
4. ID 选择器 使用 # 进行匹配
5. 后代选择器 使用空格进行匹配

>代码案例

```html



    

        这是一个 div 块级元素
        
这是一个p标签
    


```

CSS 扩展选择器

1. 直接后代选择器 使用 > 匹配

2. 相邻兄弟选择器 使用 + 匹配

3. 通用兄弟选择器 使用 ~ 匹配

4. 选择器分组 使用 , 分组

   代码案例

   
   
   
       
   
           
   1
           
   p1相邻兄弟
           
   
               div2
               
   div2-1
           
           
   3
           
   p2通用兄弟
           
   4
           
   5
           
   6
           
   7
       
   
   
   

属性选择器

存在和值选择器

1. [attr] 该选择器选择包含 arrt 属性的所有元素，不论 attr 的值如何。

2. [attr=val] 该选择器仅选择 attr 属性被赋值为 val 的所有元素。

3. [attr~=val] 表示带有 attr 命名的属性的元素，并且该属性是一个以空格作为分割的值列表，其中至少包含一个值为 val。

   代码案例

   
   
   
       
   
           
   带name属性的div
           
   测试2的div
       
   
   

子串值属性选择器

1. [attr|=val] 选择 attr 属性值为 val(包含val)，或者val-开头的元素。

2. [attr^=val] 选择 attr 属性值以 val(包含 val) 开头的元素。

3. [attr$=val] 选择 attr 属性值以 val(包含 val) 结尾的元素。

4. [attr*=val] 选择 attr 属性值中包含字符串 val 的元素。

   代码案例

   
   
   
       
   
           
   atguigu
           
   atguigu-1
           
   atguigu-2
           
   atguigu-3
           
   atguigu-4
           
   guigu
           
   guigu1
           
   guigu2
       
   
   

伪类与伪元素选择器

链接伪类

以下三个伪类仅可以作用于 "链接" 上,故叫 “链接伪类”，又叫“锚点伪类”.

1. :link 表示作为超链接,并指向一个未访问地址的所有锚。

2. :visited 表示作为超链接,并指向一个已访问地址的所有锚。

3. :target 表示一个特殊元素，它的 ID 是URI 的片段标识符。

   代码案例

   
   
   
       
   
           Click me.
       
   
   

   target 面试题(用CSS实现选项卡)

   
   
       div1
       div2
       div3
       
   DIV1
       
   DIV2
       
   DIV3
   
   

动态伪类

1. :hover 表示鼠标悬浮到元素上时。

2. :active 表示匹配被用户激活的元素(鼠标按下未抬起时)。

   代码案例

    
   
    
        
   
            Click me.
        
    
   
   

表单伪类

1. :enabled 匹配可编辑的表单

2. :disabled 匹配被禁用的表单

3. :checked 匹配被选中的表单

4. :focus 匹配获取焦点的表单

   代码案例

   自定义单选按钮案例

结构性伪类

注意：

① index 的值从 1 开始计数.

② index 可以为变量 n (只能是 n)

1. :nth-child(idnex) 系列

   :first-child

   :last-child

   nth-last-child(idnex)

   only-child 相当于 :first-child:last-child 或者 :nth-child(index):nth-last-child(index)

   代码案例

   
   
   
       
   
           
   我是 ul 的第一个 p 儿子
           
   1
           
   我是 ul 的第二个 p 儿子
           
   2
           
   3
           
   4
           我是a标签
           
   5
           
   6
           
   7
           
   8
       
   
   

2. :nth-of-type(index) 系列

   :first-of-type

   :last-of-type

   :nth-last-type(index)

   only-of-type

   代码案例

   
   
   
       
   
           
   我就是一个 p1 .
           
   1
           
   2
           
   3
           
   4
           
   5
           
   6
           我是一个 a标签 
           
   7
           
   8
           
   我就是一个 p2 .
       
   
   

3. :not

4. :empty 内容必须是空的，有空格都不行，有 attr 没关系。

伪元素选择器

未完待续.

CSS 声明的优先级