前端知识（4）

来源：互联网发布：java新闻发布系统源码编辑：程序博客网时间：2024/06/11 13:39

选择器的分类与应用

（1）选择器的分类

1.ID选择器

ID选择器已经在前面的应用中做出了简单的介绍，很明显，在标签中不允许出现相同的ID。但是在实际应用中，不同的标签可能具有相同的样式，所以在书写代码时就有可能变得累赘，需要引用一种新的选择器......

2.类选择器
class选择器可以定位到多个元素，书写样式时通过在<head></head>中添加<style>“●类名”{}</style>(这里仅仅介绍内联样式)。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>class选择器</title><style type="text/css">.d1{width:100px;height:100px;background: red;}#s1{width:100px;height:100px;background: green;}</style></head><body><div class="d1"></div><div id="s1"></div><div class="d1"></div></body></html>
效果图：
3.元素选择器
直接通过标签名锁定想要的样式。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>元素选择器</title><style type="text/css" >body{background: pink;}div{width:100px;height:100px;background:red;}</style></head><body><div></div><p>元素选择器</p><div></div></body></html>
效果图：

（2）选择器的应用

在实际应用中，单独使用每一个选择器的时候很少，更多的时候是使用后代选择器、组合选择器。

1.后代选择器

就如同人的基因传递似得，在标签中有时会存在标签嵌套的情况，那么，子标签就会继承父标签的某些特性。（>表示之间关系的亲属，空格表示所有的后代）

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>后代选择器</title><style type="text/css">#a1{height:300px;width:300px;background: yellow;}#a2{font-size: 40px;}#a3{font-family: "楷体";}</style></head><body><div id="a1"><div id="a2"><div id="a3">后代选择器</div></div></div></body></html>

效果图：

很明显可以看出来，a3继承了a1的宽高和背景色，继承了a2的字体大小，同时还保持了自己的特性---字体样式。

2.组合选择器

组合选择器之间通过，进行隔开。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>组合选择器</title><style type="text/css">body{background: pink;}h1,h2,h3,h4,h5,h6{color:red;}</style></head><body><h1>大家好</h1><h2>大家好</h2><h3>大家好</h3><h4>大家好</h4><h5>大家好</h5><h6>大家好</h6></body></html>

效果图：

3.选择器的优先级问题

当不同的选择器锁定到同一个元素上时，才涉及到优先级的问题。ID选择器的优先级>class选择器的优先级>元素选择器。（组合选择器不涉及到优先级的选择问题）

0 0