如何更好的使用css选择器充分发挥其性能

如何更好的使用css选择器充分发挥其性能,第1张

选择器的种类可以分为:标签选择器、类选择器和ID选择器、后代选择器、群组选择器。
语法如下:
◆标签名选择器,如:p{},即直接使用HTML标签作为选择器。
◆类选择器,如polaris{}。
◆ID选择器,如#polaris{}。
◆后代选择器,如polaris
span
img{},后代选贼器实际上是使用多个选择器加上中间的空格来找到具体的要控制标签。
◆群组选择器,如div,span,img{},群组选择器实际上是对CSS的一种简化写法,只不过把有相同定义的不同选择器放在一起,省了很多代码。
然后是优先级的选择。
一般而言,选择器越特殊,它的优先级越高。也就是选择器指向的越准确,它的优先级就越高。通常我们用1表示标签名选择器的优先级,用10表示类选择器的优先级,用100标示ID选择器的优先级。比如
polaris
span
{color:red;}的选择器优先级是
10
+
1
也就是11;而
polaris
的优先级是10;浏览器自然会显示红色的字。理解了这个道理之后下面的优先级计算自是易如反掌:
望采纳

标签选择器又叫元素选择器:文档的元素就是最基本的选择器。

下面是简单例子的代码与效果演示,供参考:

完整代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试标签选择器</title>
<style>
/标签选择器/
span {
color: red;
background-color: greenyellow;
font-size: 50px;
}
</style>
</head>
<body>
<span>HelloWord</span>
</body>
</html>

效果展示:

首先,:first-child这个伪类的作用是匹配这个标签的第一个元素。但是事实上,有的浏览器并没有这样的解释这个伪类。所以为了准确不出错,我们需要另外一个选择器>:first-child。比如,p>i:first-child这个选择器
可以匹配选择器样式
正常显示
正常显示


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/12816066.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-28
下一篇 2023-05-28

发表评论

登录后才能评论

评论列表(0条)

保存