CSS3——元素选择器

布满荆棘的人生 2022-07-18 18:30 231阅读 0赞

*   *   *  一 新增属性选择器
            
             *  attval
             *  attval
             *  attval
         *  二 伪类选择器和伪元素选择器
            
             *  伪类选择器
                
                 *  link
                 *  visited
                 *   hover
                 *  active
             *  伪元素选择器
                
                 *  first-line
                 *  first-letter
                 *  before
                 *  after
         *  三 结构性伪类选择器
            
             *  root
             *  not
             *  empty
             *  target
         *  UI元素伪类选择器
            
             *  enabled
             *  disabled
             *  checked

### 一、 新增属性选择器： ###

#### \[att\*=val\] ####

如果元素用att表示的属性的值中包含用val指定的字符相同

#### \[att^=val\] ####

如果元素用att表示的属性的值的开头字符为val指定的字符相同

#### \[att$=val\] ####

如果元素用att表示的属性的值的结尾字符为val指定的字符相同

注意不只是id，任何属性均可使用  
例如：

[align*=center]{
        background: green;
    }

--------------------

### 二、 伪类选择器和伪元素选择器 ###

#### 1.伪类选择器 ####

可以根据动作选择

##### :link #####

鼠标点击前的样式

##### :visited #####

鼠标点击后的样式

##### : hover #####

鼠标悬浮时的样式

##### :active #####

鼠标点击中的样式

例如：

a:link{
        color: black;
    }
    a:visited{
        color: fuchsia;
    }
    a:hover{
        color: green;
    }
    a:active{
        color: #ff6600;
    }

#### 2.伪元素选择器 ####

可用于标签中的内容

##### :first-line #####

选中内容第一行  
例如：

p:first-line{
        color: #ff6600;
    }

##### :first-letter #####

选中内容中的第一个字  
例如：

p:first-letter{
        color: green;
        font-size: 24px;
    }

##### :before #####

在内容前面追加其他内容  
例如：

:before{
        content:".";
        color: aqua;
        /*这里的样式只用于content中的内容*/
    }

##### :after #####