css之选择器及性能优化

css之选择器及性能优化
　　选择器：选择一个元素（标签）的方法。CSS选择器的解析是从右向左解析的,若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。

　　一、选择器的类型

　　1、id选择器

　　　　　　定义：通过id选择元素（选择到的是一个元素）。id在页面上具有唯一性。

　　　　　　语法：#id名称{要添加的样式}

　　2、class选择器

　　　　　　定义：通过class选择元素（选择到的是一组元素）

　　　　　　定义：.class名称{要添加的样式}

　　　　　　注意：页面中的class是可以重名的，一个元素可以有多个class，每个用逗号隔开，如果后面class的样式与前面有重复的，那后面会覆盖前面的样式。

　　3、标签选择器

　　　　　　定义：通过标签名字选择元素（选择到的是一组元素）

　　　　　　语法：标签名{要添加的样式}

　　　　　　注意：标签选择器会给所有的标签都添加上相同的样式，会影响其它的标签

　　4、群组选择器

　　　　　　定义：通过逗号的方式选择元素（选择到的是一组元素）

　　　　　　语法：#id名称，.class名称，标签名{要添加的样式}

　　5、包含选择器

　　　　　　定义：通过范围选择元素（选择到的有可能是一个也又可能是多个元素）

　　　　　　语法：父级目标元素{要添加的样式}

　　　　　　注意：父级与目标元素都可以是任意一种选择器选择到的元素

　　6、通配符选择器

　　　　　　*　　　　通配符：用来获取页面中的所有元素。

　　二、选择器的优先级

　　优先级关系到代码执行的顺序：选择器优先级一致的情况下，谁在后面谁的优先级高，但当选择器优先级不一致的情况下，会选择优先级高的。

　　一般来说：

　　　　1、!important>行间样式>id选择器>class选择器>标签选择器>通配符选择器(*)

　　　　2、包含选择器的优先级是一种累加的关系，加起来的值越大优先级越高，值越小，优先级越低。

　　　　　　　　行间样式：1000

　　　　　　　　id选择器：100

　　　　　　　　类选择器：10

　　　　　　　　标签选择器：1

　　　　3、群组选择器的优先级取决于位置，哪个靠后哪个的优先级就高，会把前面的样式给覆盖。

　　三、css3选择器

　　我们还可以通过属性选择器来选择到相应的标签。要注意的是：类选择器，属性选择器，伪类选择器的权重为10.

　　　　E[attr] : 选择具有attr属性的E元素

　　　　E[attr="val"] : 选择具有attr属性且属性值为val的E元素

　　　　E[attr^="val"] : 匹配具有attr属性，且值以attr开头的E元素

　　　　E[attr$="val"] : 匹配具有attr属性，且值以val结尾的E元素

　　　　E[attr*="val"] : 匹配具有attr属性，且值中含有val的E元素

　　html:
```
    
    <button>按钮</button>
    <button disabled="disable">按钮</button>

    <input type="text" value="文本框">
    <input type="text" value="文本框">
    <input type="search" value="搜索框">
    <input type="search" value="搜索框">

    <div class="icon1">icon1</div>
    <div class="ico">ico</div>
    <div class="small_ico">small_ico</div>
```
　　css:
```
    <style>
        button {
            cursor: pointer;
        }

        /* 1.直接写属性 */
        button[disabled] {
            cursor: default;
        }

        /* 2.属性等于值 */
        input[type=search] {
            background-color: pink;
        }

        /* 3.属性以某个值开头 */
        div[class^=ico] {
            background-color: lightblue;
        }

        /* 4、属性以某个值结尾 */
        div[class$=ico] {
            background-color: lightgreen;
        }

        div[class*=ico] {
            background-color: lightgray;
        }
    </style>
```
　　2、伪类选择器

　　E:nth-child(n):从E标签的父级中去找第n个标签（正着找）且这个标签必需是E.

　　E:nth-last-child(n):从E标签的父级中去找第n个标签（倒着找）且这个标签必需是E.

　　E:nth-of-type(n):从E标签的父级中去正着找第n个E标签.

　　E:nth-last-of-type(n):从E标签的父级中倒着找，找到第n个E标签

　　注意：E:first-child==E:nth-child(1)；E:last-child==E:nth-last-child(1);

　　　　　E:first-of-type==E:nth-of-type(1)；E:last-of-type==E:nth-last-of-type(1)

　　　　　nth-child(n)中，n可以为odd或者是even表示奇数行偶数行，n不能为0，最小就是1。

　　示例：

　　html:
```
    <div>
        <p>red</p>
        <span>green</span>
        <p>blue</p>
        <span>yellow</span>
        <p>pink</p>
        <span>puper</span>
        <p>black</p>
    </div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
```
　　css:
```
   <style>
        span:nth-child(2) {
            background-color: green;
        }

        span:nth-last-child(6) {
            background-color: lightgreen;
        }

        p:nth-last-of-type(2) {
            background-color: blue;
        }

        li:nth-child(odd) {
            background-color: lightgrey;
        }
　　　　　　//也可以用2n+1来表达奇数行
        li:nth-child(2n+1) { 
            background-color: lightseagreen;
        }

        li:nth-child(even) {
            background-color: lightpink;
        }
　　　　　　//也可以用2n来表达偶数行
        li:nth-child(2n) {
            background-color: lightblue;
        }
    </style>
```
　　 target伪类

　　　　E:target 修改锚点，E是锚点对应的元素。

　　html:
```
<body>
    <a href="#div1">div1</a>
    <a href="#div2">div2</a>
    <a href="#div3">div3</a>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
</body>
```
　　css:
```
    <style>
        div {
             100px;
            height: 100px;
            background-color: lightblue;
            display: none;
        }

        div:target {
            display: block;
        }
    </style>
```
　　 checked伪类

　　　　E:checked E代表checkbox或者是radio元素，checked表示的是选中的状态。我们可以通过E:checked配合其它的标签元素来实现单选/复选按钮的自定义样式。

　　html:
```
<body>
    <input type="radio">
    <input type="checkbox">
</body>
```
　　css:
```
    <style>
        input[type="checkbox"]:checked {
             100px;
            height: 100px;
            background-color: lightblue;
        }

        input[type="radio"]:checked {
             50px;
            height: 50px;
            background-color: lightcoral;
        }
    </style>
```
　　not伪类

　　　　E:not否定选择器，可以选择除某个元素以外的所有元素。
```
<style>
    li:not(.pink){
        background-color: lightcoral;
    }
</style>
<body>
    <ul>
        <li class="green">green</li>
        <li class="pink">pink</li>
        <li class="yellow">yellow</li>
    </ul>
</body>
```
　　文本伪类

　　　　E::first-line　　　　E标签里第一行文字的状态

　　　　E::first-letter　　　 E标签里第一个文字的状态

　　　　E::selection　　 E标签里文字被选中的状态

　　　　E::before　　　　 E标签的最前面添加内容

　　　　E::after　　　　　 E标签的最后面添加内容

　　示例：

　　html:
```
    <p>
        重帏深下莫愁堂，卧后清宵细细长。神女生涯原是梦，小姑居处本无郎。<br />风波不信菱枝弱，月露谁教桂叶香。直道相思了无益，未妨惆怅是清狂。
    </p>
```
　　css:
```
    <style>
        p {
            border: 1px solid black
        }

        p::first-line {
            color: lightcoral;
        }

        p::first-letter {
            font-size: 28px;
        }

        p::selection {
            color: lightcyan
        }

        /* p::before {
            content: '无题·重帏深下莫愁堂';
            display: block;
            border: 1px solid lightgray
        }

        p::after {
            content: '-----李商隐 ';
            display: block;
            border: 1px solid lightgreen;
        } */
    </style>
```
　　伪元素选择器

　　　　::before 在元素内部的前面插入内容

　　　　::after 在元素内部的后面插入内容

　　　注意：虽然这二者常用于清除浮动，但还有其它的用处。需要注意的是：before和after必须有content属性；before在内容的前面，after在内容的后面；before和after创建一个元素，但是属于行内元素；它不存在于dom之中，存在于页画中，所以我们称之为伪元素。在代码顺序上，::after生成的内容比::before生成的内容靠后。如果按堆栈视角，::after生成的内容会在::before生成的内容之上。

　　　单冒号(:)是css3中的伪类，双冒号(::)用于css3的伪元素。在 CSS 中伪类一直用 : 表示，如 :hover, :active 等伪元素在CSS1中已存在，当时语法是用 : 表示，如 :before 和 :after后来在CSS3中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类，由于低版本IE对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老语法表示伪元素。

　css:
```
    <style>
        div{
            height: 100px; 100px; background-color: lightgreen;
        }
        div::after{
            display: inline-block;
            content: '我';
             100px;
        }
        div::before{
            content: 'davina';
        }
    </style>
```
　　html:
```
   <div>是</div>
```
示例：伪元素字体图标

　　css:
```
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?6l11je');
            src: url('fonts/icomoon.eot?6l11je#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?6l11je') format('truetype'),
                url('fonts/icomoon.woff?6l11je') format('woff'),
                url('fonts/icomoon.svg?6l11je#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        div,p {
            position: relative;
             150px;
            height: 20px;
            border: 1px solid #6666;
        }

        span {
            position: absolute;
            right: 5px;
            font-family: 'icomoon';
        }
        p::after{
            position: absolute;
            right: 5px;
            content: 'ea52';
            font-family: 'icomoon';
        }
    </style>
```
　　css:
```
<body>
    <div>
        <span></span>
    </div>

    <p></p>
</body>
```
　　四、css性能优能

　　　　1、css压缩:将写好的css进行打包压缩，可以减少很多的体积;
　　　　2、减少使用@import,而建议使用link,因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载;

　　　　3、减少css嵌套，最好不要套三层以上，合理使用cssSprite，合成所有icon图片；
　　　　4、合理设计CSS布局，注意复用样式，减少渲染上花的时间。class和ID的选择，少用*这种全局匹配，提高复用，巧妙运用css的继承机制；

　　　　5、首推的是合并css文件。但有时也可拆分出公共css文件，对于比较大的项目我们可以将大部分页面的公共结构的样式提取出来放到单独css文件里，将css文件放在最上面；

　　　　6、慎重使用高性能属性:浮动、定位;2、尽量减少页面重排、重绘;

　　　　7、标准化各种浏览器前缀:带浏览器前缀的在前。标准属性在后。
相关阅读:
博客园页面设置（转载）
正则表达式30分钟入门教程（转载）
如何写出优雅的代码
 centos7 nginx+php5.6+mysql安装与配置
 git 进阶
 js 异步解决方案
 行动派
 unicode 与 utf-8
bower command not found--windows
click事件细节
原文地址：https://www.cnblogs.com/davina123/p/12013195.html