第2章 CSS3选择器-4

2.9 否定伪类选择器

否定伪类选择器":not()"是CSS3的新选择器，类似jQuery中的":not()"选择器，主要是用来定位不匹配该选择器的元素。

2.9.1 否定伪类选择器语法

选择器	功能描述
E:not(F)	匹配所有除元素F外的E元素

2.9.2 浏览器兼容性

IE9及以上浏览器支持，主流浏览器支持。

2.9.3 实战体验：改变图片效果

    
    
    
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 690px;
            margin: 20px auto;
            letter-spacing: -4px;
            word-spacing: -4px;
            font-size: 0;
        }
        li{
            font-size: 16px;
            letter-spacing: normal;
            word-spacing: normal;
            display: inline-block;
            *display: inline;
            zoom: 1;
            list-style: none outside none;
            margin: 5px;
        }
        img{
            width: 128px;
            height: 128px;
        }
        .gallery li:nth-child(2){
            -webkit-filter:grayscale(1);
        }
        .gallery li:nth-child(3){
            -webkit-filter:sepia(1);
        }
        .gallery li:nth-child(4){
            -webkit-filter:saturate(0.5);
        }
        .gallery li:nth-child(5){
            -webkit-filter:hue-rotate(90deg);
        }
        .gallery li:nth-child(6){
            -webkit-filter:invert(1);
        }
        .gallery li:nth-child(7){
            -webkit-filter:opacity(0.2);
        }
        .gallery li:nth-child(8){
            -webkit-filter:blur(3px);
        }
        .gallery li:nth-child(9){
            -webkit-filter:drop-shadow(5px 5px 5px #ccc);
        }
        .gallery li:nth-child(10){
            -webkit-filter:saturate(6) hue-rotate(361deg) brightness(0.09);
        }
        .gallery:hover li:not(:hover){
            -webkit-filter:blur(2px) grayscale(1);
            opacity: 0.7;
        }    
    
        
![](http://upload-images.jianshu.io/upload_images/1875545-aaf7a3416a22a5d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        
![](http://upload-images.jianshu.io/upload_images/1875545-aaf7a3416a22a5d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        
![](http://upload-images.jianshu.io/upload_images/1875545-aaf7a3416a22a5d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        
![](http://upload-images.jianshu.io/upload_images/1875545-aaf7a3416a22a5d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        
![](http://upload-images.jianshu.io/upload_images/1875545-aaf7a3416a22a5d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        
![](http://upload-images.jianshu.io/upload_images/1875545-aaf7a3416a22a5d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        
![](http://upload-images.jianshu.io/upload_images/1875545-aaf7a3416a22a5d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        
![](http://upload-images.jianshu.io/upload_images/1875545-aaf7a3416a22a5d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        
![](http://upload-images.jianshu.io/upload_images/1875545-aaf7a3416a22a5d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        
![](http://upload-images.jianshu.io/upload_images/1875545-aaf7a3416a22a5d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    

:not 选择器效果

:not 选择器效果

2.10 伪元素

除了伪类，CSS3还支持访问伪元素。伪元素可用于定位文档中包含的文本，但无法再文档树中定位。伪类一般反映无法再CSS中轻松或可靠地检测到的某个元素属性或状态；另一方面，伪元素表示DOM外部的某种文档结构。

2.10.1 伪元素:first-letter

“:first-letter”用来选择文本块的第一个字母，除非在同一行中包含一些其他元素。“:first-letter”通常用来给文本元素添加排版细节。

China’s annual salary guide, divided into upper, middle and lower levels, sets the rate at which enterprises must raise employee salaries.

p:first-letter{    float: left;    color: red;    padding: 4px 8px 0 3px;    font: 75px/60px Georgia;
}

:first-letter效果

2.10.3 伪元素::before和::after

通常配合content属性一起使用。

2.10.4 伪元素::selection

“::selection”是用来匹配突出显示的文本。浏览器默认情况下，选择网站文本是深蓝色背景，白色字体。（IE9及以上浏览器支持）如下所示：

选择文字默认效果

::selection{    background: red;    color: #fff;
}::-moz-selection{    background: red;    color: #fff;
}

::selection效果

2.11 属性选择器

在HTML中，通过各种各样的属性可以给元素增加很多附加的信息。例如，通过id属性可以将不同DIV元素进行区分。CSS2中引入了一些属性选择器，这些选择器可基于元素的属性来匹配元素，而CSS3在CSS2的基础上扩展了这些属性选择器，支持基于模式匹配来定位元素。

2.11.1 属性选择器语法

选择器	功能描述
E[attr]	选择匹配具有属性attr的E元素。其中E可以省略，表示选择定义了attr属性的任意类型元素
E[attr=val]	选择匹配具有属性attr的E元素，并且attr的属性值为val（其中val区分大小写），同样它的元素省略时标识选择顶一个attr属性值伪val的任意类型元素
E[attr|=val]	选择匹配E元素，且E元素定义了属性attr,attr属性值时一个具有val或者以val开始的属性值。
E[attr~=val]	选择匹配E元素，且E元素定义了属性attr,attr属性值具有多个空格分割的值，其中一个值等于val。
E[attr*=val]	选择匹配元素E，且E元素定义了属性attr,其属性值任意位置包含了val。
E[attr^=val]	选择匹配元素E，且E元素定义了属性attr,其属性值以val开头的任何字符串。
E[attr$=val]	选择匹配元素E，且E元素定义了属性attr，其属性值以val结尾的任何字符串。

CSS3中常见的通配符

通配符	功能描述	示例
^	匹配起始符	span[class^=span]表示选择以类名以“span”开头的所有span元素
$	匹配终止符	a[href$=pdf]表示选择以“pdf”结尾的href属性的所有a元素
*	匹配任意字符	a[title*=site]匹配a元素，而且a元素的title属性值中任意位置有“site”字符的任何字符串。

2.11.2 浏览器兼容性

主流浏览器全部支持，IE7及以上浏览器支持。

2.11.3 属性选择器的使用方法详解

    
    
    
        .demo{            width: 300px;            border: 1px solid #ccc;            padding: 10px;            overflow: hidden;            margin: 20px auto;
        }        .demo a{            float: left;            display: block;            height: 50px;            width: 50px;            border-radius: 10px;            text-align: center;            background: #aac;            color: blue;            font: bold 20px/50px Arial;            margin-right: 5px;            text-decoration: none;            margin: 5px;
        }    
    
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
    

CSS3属性选择器使用默认效果

1. E[attr]属性选择器

a[id]{background-color: yellow;}

E[attr]属性选择器的效果

2. E[attr=val]属性选择器

a[id=first]{background-color: red;}

E[attr=val]属性选择器的效果

3. E[attr|=val]属性选择器

a[lang|=zh]{background-color: yellow;}

E[attr|=val]属性选择器的效果

4. E[attr~=val]属性选择器

a[title~=website]{background-color: yellow;}

E[attr~=val]属性选择器的效果

5. E[attr*=val]属性选择器

a[calss*=links]{background-color: yellow;}

E[attr*=val]属性选择器的效果

6. E[attr^=val]属性选择器

a[href^=http]{background-color: yellow;}

E[attr^=val]属性选择器的效果

7. E[attr$=val]属性选择器

 a[href$=png]{background-color: yellow;}

E[attr$=val]属性选择器的效果

2.11.4 实战体验：创建个性化链接样式

略（p81-p84）  太长了/(ㄒoㄒ)/~~

2.12 本章小结

本章主要向大家介绍了CSS3核心部分中的选择器。首先介绍CSS3选择器的优势，然后分别详细介绍了基本选择器、层次选择器、伪类选择器、属性选择器。

作者：白小虫
链接：https://www.jianshu.com/p/be95a01f8ae5