一 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选择器 > 类选择器 > 标签选择器 > 通用选择器