css选择器及权重

一 css基本选择器

1标签选择器

标签选择器就是以标签开头 ，选择你想选择的标签。

// 选择div标签 
div{属性}

 <style>
        div {
            color: rgb(173, 54, 18);
        }
 </style>

<div>
        <p>也就汤姆克鲁斯</p>
        <p>小李子</p>
        <p>约翰尼德普</p>
        <p>也就他们三</p>
        <p>剩下的谁能比我帅</p>
</div>

运行结果：

2id选择器

id选择器是唯一的，一般只给一个元素一个id。
#id名称{属性}

 <style>
       #xlz{
            color: aqua;
        }
 </style>

<div>
        <p>也就汤姆克鲁斯</p>
        <p id="xlz">小李子</p>
        <p>约翰尼德普</p>
        <p>也就他们三</p>
        <p>剩下的谁能比我帅</p>
</div>

运行结果：

3类选择器

类选择器与id选择器不同，几个元素可以命名为同一个类。
.类名称{属性}

 <style>
        .lhy{
            font-size: 20px;
        }
 </style>

<div>
        <p class="lhy">也就汤姆克鲁斯</p>
        <p id="xlz">小李子</p>
        <p>约翰尼德普</p>
        <p class="lhy">也就他们三</p>
        <p>剩下的谁能比我帅</p>
</div>

运行结果：

4通配符选择器

通配符选择器*选择全部的元素 。

 <style>
         *{
            margin: 0;
            padding: 0;
        }
 </style>

<div>
        <p class="lhy">也就汤姆克鲁斯</p>
        <p id="xlz">小李子</p>
        <p>约翰尼德普</p>
        <p class="lhy">也就他们三</p>
        <p>剩下的谁能比我帅</p>
</div>

运行结果：
一般用来清除游览器默认样式。

二css复合选择器

1 交集选择器

选中页面中同时满足过个选择器的标签 紧挨着的.

 <style>
/* 选择p标签并且类名为lhy1 */
        p.lhy1{
            color: pink;
        }
 </style>

<div>
        <p class="lhy">也就汤姆克鲁斯</p>
        <p id="xlz">小李子</p>
        <p>约翰尼德普</p>
        <p class="lhy">也就他们三</p>
        <p>剩下的谁能比我帅</p>
        <p class="lhy1">嘿嘿嘿</p>
</div>

运行结果：

2并集选择器

同时选择多组标签，设置相同的样式.

 <style>
  /* 选择lhy类 和lhy1类的元素 字体颜色红 */
        .lhy,.lhy1{
            color: red;
        }
 </style>

<div>
        <p class="lhy">也就汤姆克鲁斯</p>
        <p id="xlz">小李子</p>
        <p>约翰尼德普</p>
        <p class="lhy">也就他们三</p>
        <p>剩下的谁能比我帅</p>
        <p class="lhy1">嘿嘿嘿</p>
</div>

运行结果：

三 属性选择器

1[属性] 选中含有指定属性的元素

 选中含有指定属性的元素
[title]{
    color: red;
}
  

    <div>
        <p class="lhy" title="ww">也就汤姆克鲁斯</p>
        <p id="xlz" title="ww">小李子</p>
        <p>约翰尼德普</p>
        <p class="lhy">也就他们三</p>
        <p>剩下的谁能比我帅</p>
        <p class="lhy1">嘿嘿嘿</p>
    </div>
  

运行结果：

2 [属性=属性值] 选中含有指定属性和指定属性值的元素

  选中含有指定属性和指定属性值的元素
[title=ww]{
    color: red;
}
  

    <div>
        <p class="lhy" title="ww">也就汤姆克鲁斯</p>
        <p id="xlz" title="w">小李子</p>
        <p>约翰尼德普</p>
        <p class="lhy">也就他们三</p>
        <p>剩下的谁能比我帅</p>
        <p class="lhy1">嘿嘿嘿</p>
    </div>
  

运行结果：

3 [属性^=属性值] 选中含有指定属性和指定属性值的元素开头的元素

  选择含有指定属性及指定属性之开头的元素。
[title^=w]{
    color: red;
}
  

    <div>
        <p class="lhy" title="ww">也就汤姆克鲁斯</p>
        <p id="xlz" title="w">小李子</p>
        <p>约翰尼德普</p>
        <p class="lhy">也就他们三</p>
        <p>剩下的谁能比我帅</p>
        <p class="lhy1">嘿嘿嘿</p>
    </div>
  

运行结果：

4 [属性$=属性值] 选中含有指定属性和指定属性值结尾的元素

[属性$=属性值] 选中含有指定属性和指定属性值结尾的元素
 [title$=w]{
            font-size: 30px;
        }
  

    <div>
        <p class="lhy" title="ww">也就汤姆克鲁斯</p>
        <p id="xlz" title="w">小李子</p>
        <p>约翰尼德普</p>
        <p class="lhy">也就他们三</p>
        <p>剩下的谁能比我帅</p>
        <p class="lhy1">嘿嘿嘿</p>
    </div>
  

运行结果：

5 [属性*=属性值] 选中指定属性名和含有指定属性值的元素

  选择含有指定属性及指定属性之开头的元素。
[title*=w]{
    color: red;
}
  

    <div>
        <p class="lhy" title="ww">也就汤姆克鲁斯</p>
        <p id="xlz" title="waa">小李子</p>
        <p>约翰尼德普</p>
        <p class="lhy">也就他们三</p>
        <p>剩下的谁能比我帅</p>
        <p class="lhy1">嘿嘿嘿</p>
    </div>
  

运行结果：

四 关系选择器

1父亲>儿子 表示 儿子单个选择

只选择自己的亲儿子

.qwe>p{
    color: red;
}
  

    <div class="qwe">
        <div>
            <p>松子</p>
        </div>
        <p class="lhy" title="ww">也就汤姆克鲁斯</p>
        <p id="xlz" title="waa">小李子</p>
        <p>约翰尼德普</p>
        <p class="lhy">也就他们三</p>
        <p>剩下的谁能比我帅</p>
        <p class="lhy1">嘿嘿嘿</p>
    </div>
  

运行结果：

2祖先 后代 表示 后代全部选择

后代全部选择

.qwe p{
    color: red;
}
  

    <div class="qwe">
        <div>
            <p>松子</p>
        </div>
        <p class="lhy" title="ww">也就汤姆克鲁斯</p>
        <p id="xlz" title="waa">小李子</p>
        <p>约翰尼德普</p>
        <p class="lhy">也就他们三</p>
        <p>剩下的谁能比我帅</p>
        <p class="lhy1">嘿嘿嘿</p>
    </div>
  

运行结果：

3 兄+弟 表示 相邻兄弟选择(必须是兄弟且严格相邻)

p+span{
    color: red;
}
    </style>
  

   <p>松子</p>
<span>果子</span>
<h3>hhh</h3>
<span>我不是相邻的  没有被选中</span>
  

运行结果：

4 兄~弟 表示 全部兄弟选择

p~span{
    color: red;
}
  

   <p>松子</p>
<span>果子</span>
<h3>hhh</h3>
<span>我不是相邻的  没有被选中</span>
  

运行结果：

五 伪类选择器

1、元素选择伪类选择器

:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(n) 选中第n个元素
关于:nth-child( )的特殊值
n 第n个 n的范围0到正无穷（全选）
even或2n 选中偶数位的元素
odd或2n+1 选中奇数位得到元素
上面的都是在所有元素中选择
下面都是在相同元素中选择
:first-of-type 第一个子元素
:last-of-type 最后一个子元素
:nth-of-type(n) 选中第n个元素

2、否定伪类选择器

:not( ) 将符号条件的元素去除

3、特殊应用的伪类

:link 表示未访问过的a标签
:visited 表示访问过的a标签
以上两个伪类是超链接所独有的
由于隐私的问题，所以visited这个伪类只能修改链接的颜色
以下两个伪类是所有标签都可以使用
:hover 鼠标移入后元素的状态
:active 鼠标点击后，元素的状态

六 伪元素选择器

常见的几个伪元素：
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的元素
::before 元素开始的位置前
::after 元素结束的位置后
befor和after必须配合contend一起使用(before,after所写的内容无法选中且永远在最前和最后)

七css权重

1、css优先级的6大分类

通常可以将css的优先级由高到低分为6组：

第一优先级：属性后面使用！important。它会覆盖页面内其他位置定义的元素样式。

第二优先级：在html中给元素标签加style，即内联样式/行内样式。（style=“…”）

第三优先级：由一个或多个id选择器来定义。 (#box{…})

第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义。 (.classname{…})

第五优先级：由一个或多个类型选择器定义。 （div{…}）

第六优先级：通配选择器。 (*{…})

2、权重的4个等级定义

我们把特殊性分为4个等级，每一个等级代表一类选择器，每个等级的值相加得出选择器的权重。

4个等级的定义如下：

第一等级：代表内联样式，如style=“…”，权值为 1000

第二等级：代表id选择器，如#box{…}，权值为100

第三等级：代表类，伪类和属性选择器，如.classname{…}，权值为10

第四等级：代表标签选择器和伪元素选择器，如div{…}，权值为1

注意：
``1、!important 的权重是无穷大，无条件优先。
2、继承 与 通配选择器的权重是0。

3、优先顺序

！important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通用选择器