css的选择器及权重详解

css的选择器

   css的选择器复杂众多，能熟练的使用这些选择器可以对css的理解更上一层楼。今天就带大家来聊聊css的众多选择器。

css的经典选择器

1.类型选择器
标签名{
属性：属性值；
}

//例子`
body{
   color:red;
}

2.群组选择器
多个标签名{
属性：属性值；
}

//例子
h1,h2,h3{
   font-size:16px;
}

3.包含选择器
包含选择器又叫子类选择器
父元素 子元素{
属性：属性值；
}

//例子
div span{
  color: red;//父元素div的子元素span为红色
}

4.class选择器
在HTML标签里面添加class=“class选择器的名字”，css格式里写：
.class选择器的名字{
属性：属性值；
}

//例子
//html中的
<div class="husband">我是帅哥</div>

//css中的
.husband{
font-size:16px;
color:blue;
}

5.id选择器
id选择器的使用有唯一性，使用时需稍加注意。
在HTML标签里面添加id=“id选择器的名字”，css格式里写：
#id选择器的名字{
属性：属性值；
}

//例子
//html中的
<div id="husband">我是帅哥</div>

//css中的
#husband{
font-size:16px;
color:blue;
}

6.组合选择器
顾名思义，组合选择器就是将多种选择器杂糅在一起使用。举个例子：

//例子
//html中的
<div class="tabsbox" id="tab">
            <nav class="fisrstnav">
                <ul>
                    <li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>
                    <li><span>测试2</span><span class="iconfont icon-guanbi"></span></li>
                    <li><span>测试3</span><span class="iconfont icon-guanbi"></span></li>
                </ul>
                <div class="tabadd">
                    <span>+</span>
                </div>
            </nav>
            <div class="tabscon">
                <section class="conactive">测试1</section>
                <section>测试2</section>
                <section>测试3</section>
            </div>
        </div>

//css中的
nav ul li {//设置的是上面的选相栏的选项卡
    float: left;
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-right: 1px solid #ccc;
    position: relative;
}

nav ul li.liactive {//覆盖掉有class的选项卡的下边框
    border-bottom: 2px solid #fff;
    z-index: 9;
}

7.伪类选择器
伪类选择器也有多种，最常见的就是超链接的相关伪类选择器，总结如下：

```css
a:link{//超链接为进行访问是的颜色为黑色
color:black;
}
a:hover{//鼠标经过超链接是的颜色为蓝色
color:blur;
}
a:visited{//超链接被访问之后的颜色变成灰色
color:grey;
}
a:active{//点击超链接但是为弹起鼠标是的颜色为红色
color:red;
}

8.通配符
通配符就是一个""，而且可以将所有的标签全部选择出来。

* {
    margin: 0;
    padding: 0;
}

9.各类选择器的交叉混用
简而言之，就是将选择器多重使用，起到准确找到相应元素的作用。

h1.p1,#content h1{//class为p1的<h1>和id为content的<h1>
}
h1#content h2{//id为content的<h1>下的h2
}

css3选择器

以下所述的选择器虽然好用，但有兼容性问题，通常在IE9+以上才可使用。索性，如今时代发展，浏览器慢慢升级，兼容性问题也就小了很多。
以下说明均在代码中体现。
1.属性选择器

input[value]{//包含value属性的<input>
color:red;
}
input[type="text"]{//包含type="text"的<input>
color:red;
}
input[class^="icon1"]{//选择出以"icon1"开头的class的<div>
color:red;
}
input[class$="icon2"]{//选择出以"icon2"结尾的class的<div>
color:red;
}
input[class*="icon3"]{//选择出中间含有"icon3"的class的<div>
color:red;
}

2.结构伪类选择器
结构伪类选择器可以理解为用来选择第几个孩子的选择器。

<1>E. -child类

 E.frist-child{}//选择父元素中第一个子元素E
 E.last-child{}//选择父元素中最后一个子元素E
 E.nth-child(n){}//选择父元素中第n个子元素E
 //n 可以为数字，关键字，公式

n为关键字是有：odd(奇数) even(偶数)
n为公式是有：
2n ---------- 偶数
2n+1 ------ 奇数
5n ---------- 5的倍数
n+5 -------- 从第5个数开始
-n+5 ------- 前5个数

<2>E. -of-type

  E.frist-of-type{}//选择父元素中第一个子元素E
  E.last-of-type{}//选择父元素中最后一个子元素E
  E.nth-of-type(n){}//选择父元素中第n个子元素E

<3>两种选择器的区别
E. -child =>先看第一个元素，在判断是否为想选择的元素
E. -of-type====>先选择指定元素，再找第几个元素

3.伪类选择器
伪类选择器是在父元素中创建新元素，这个元素的权重为1.
又可以理解为又css创建一个新元素。

//伪元素选择器
div::before,div::after{//在div元素的前面后面各加一个伪元素，高宽已设定
height:100px;
width:300px;
}

选择器 的优先级

选择器	权重
继承或*	0000
元素选择器	0001
类，伪类选择器	0010
id选择器	0100
行内样式 style=“”	1000
!important	无穷大