css选择器及权重
一 css基本选择器1标签选择器2id选择器3类选择器4通配符选择器 二css复合选择器1 交集选择器2并集选择器 三 属性选择器1[属性] 选中含有指定属性的元素2 [属性=属性值] 选中含有指定属性和指定属性值的元素3 [属性^=属性值] 选中含有指定属性和指定属性值的元素开头的元素4 [属性$=属性值] 选中含有指定属性和指定属性值结尾的元素5 [属性*=属性值] 选中指定属性名和含有指定属性值的元素 四 关系选择器1父亲>儿子 表示 儿子单个选择2祖先 后代 表示 后代全部选择3 兄+弟 表示 相邻兄弟选择(必须是兄弟且严格相邻)4 兄~弟 表示 全部兄弟选择 五 伪类选择器1、元素选择伪类选择器2、否定伪类选择器3、特殊应用的伪类 六 伪元素选择器七css权重1、css优先级的6大分类2、权重的4个等级定义3、优先顺序一 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选择器 > 类选择器 > 标签选择器 > 通用选择器
