一、各类选择器概述
1、继承选择器
如下面这段html代码:
<div>
<p>我是一段文字哦</p>
</div>
对应css代码:
div {
color: brown;
}
定义的时候是针对div元素的颜色变更,但由于p是div的孩子,会继承div的颜色属性。效果预览:
通过DevTools开发者工具(Edge浏览器下按F12可以打开)能够看到:
2、通配选择器
概述(建议结合其他选择器理解)
(引用自MDN----https://developer.mozilla.org/zh-CN/docs/Web/CSS/Universal_selectors)
示例
*[lang^=en]{color:green;}
/*效果等同于类选择器*/
*.warning {color:red;}
/*效果等同于ID选择器*/
*#maincontent {border: 1px solid blue;}
3、元素选择器
直接针对元素的修饰:
(针对超链接元素a,进行的直接修饰)
a {
color: #fff;
display: inline-block;
height: 50px;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 50px;
}
对应的html代码:
<div>
<a id="bg1" href="">五彩导航</a>
<a id="bg2" href="">五彩导航</a>
<a id="bg3" href="">五彩导航</a>
<a id="bg4" href="">五彩导航</a>
<a id="bg5" href="">五彩导航</a>
</div>
预览效果图:
4、类选择器
对定义了类名的元素进行批量修饰:
css代码:
.Test1 {
color:aqua;
}
.not {
color: blueviolet;
}
html代码:
<div>
<p class="Test1">我是一段文字</p>
<p class="Test1">我是一段文字</p>
<p class="not">我是一段文字</p>
<p class="Test1">我是一段文字</p>
</div>
预览效果:
5、伪类选择器
常用于对链接元素a进行的修饰:
a : link /选择所有未被访问的链接/
a : visited /选择所有已被访问的链接/
a : hover /选择鼠标指针位于其上的链接/
a : active /选择活动链接〔鼠标按下未弹起的链接)/
css代码:
a {
/* 这里将行内元素a定义为了块元素,方便查看效果 */
display: block;
height: 50px;
width: 100px;
background-color: aquamarine;
}
a:hover {
background-color: blueviolet;
}
html代码:
<a href="">
我是一个链接
</a>
预览效果:
鼠标放上去前:
放上去后:
6、ID选择器
对设置了id的元素进行针对修饰:
css代码:
#Test2 {
height: 100px;
width: 200px;
/* 取消链接文字自带的下划线 */
text-decoration: none;
}
html代码:
<div>
<a id="Test2" href="">我是一个链接</a>
</div>
预览效果:
7、行内设置样式style:
还是用上面id选择器示例代码,但是在html代码中加入style设置。
css代码:
#Test2 {
height: 100px;
width: 200px;
/* 取消链接文字自带的下划线 */
text-decoration: none;
}
html代码:
<div>
<a id="Test2" href="" style="height: 200px;width: 200px;">我是一个链接</a>
</div>
效果预览:
注意!我们在这可以看到,ID选择器和行内选择器在height和width的设置上发生了冲突,但是生效的却是行内选择器,这里就体现了不同权重带来的优先级效果。
8、为元素修饰设置important
继续使用行内样式style示例代码,对css部分修改(为块高度height加入important声明):
css代码:
#Test2 {
height: 100px!important;
width: 200px;
/* 取消链接文字自带的下划线 */
text-decoration: none;
}
html代码:
<div>
<a id="Test2" href="" style="height: 200px;width: 200px;">我是一个链接</a>
</div>
这里我们容易发现块的高度又变成了100px,能看出important的声明能使得修饰的优先级达到最高
二、各类选择器权重表以及案例讲解
**
需要注意,权重值不能进位只能叠加。
例如下面css代码:
body ul li {
color: blue;
}
三个全是元素选择器,权重叠加后是0,0,0,3,如果在其下面有代码:
li {
color: red;
}
那么下面这个权重是0,0,0,1,小于上面的权重,故最后元素li中的文字显示为蓝色。如下图
html代码为:
<ul>
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
</ul>
建议自己动手试试,加深印象
如果给ul元素设置一个类选择器如下:
html代码:
<ul class="table">
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
</ul>
css代码:
body ul li {
color: blue;
}
li {
color: red;
}
.table li {
color: green;
}
那么我们容易算出,第一段css选择器权重叠加后为0,0,0,3;第二段0,0,0,1;第三段0,0,1,1;通俗可以看作3,1,11,明显11这个数字最大,那么最后元素li中的字体颜色会成为第三段的颜色:
如果父父子子嵌套很多很多层,最后累计10层呢?如果只使用元素选择器,那么其权重为0,0,0,10,不存在进位。