您的位置：首页 > Web前端 > CSS

CSS样式(CSS全称,CSS选择器,CSS选择器的解析方式和性能,CSS选择器的分类,CSS权重)

2019-06-05 10:41 375 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS基础</title>
</head>
<body>
<header>
<h1>CSS基础</h1>
</header>
<article>
<h2>CSS基础</h2>
<ul>
<li>CSS全称:Cascading Style Sheet(层叠样式表)</li>
</ul>
</article>
<article>
<h2>CSS选择器</h2>
<ul>
<li>
CSS选择器的结构:
选择器{
属性1:值;
属性2:值
}
备注:在CSS中;是分隔符,分割两个属性的值,因此上面表达式中的写法是合法的
但是为了利于维护属性值后面都需要加上封号
CSS选择器的结构:
选择器{
属性1:值;
属性2:值;
}
</li>
<li>
CSS选择器的作用:
(1)用于匹配HTML标签
(2)选择不同的匹配规则(元素选择器<类选择器<id选择器)
(3)多个选择器可以叠加
</li>
</ul>
</article>
<article>
<h2>CSS选择器的解析方式和性能</h2>
<ul>
<li>
游览器解析CSS选择器的方式是从右往左解析,依次验证,
处于考虑游览器的性能和解析速度,
使得游览器高效和精确的找到目标位置
</li>
</ul>
</article>
<article>
<h2>CSS选择器的分类</h2>
<ul>
<li>
(1)元素选择器如ul{};li{}
</li>
<li>
(2)伪元素选择器如
::before{};::after{}
伪类元素不会出现在HTML中或者dom树中
但是是真实存在的元素,可以显示内容,
也可以设置样式
伪元素在早期的时候是使用单冒号(:),
因此在兼容比较低版本的游览器比如IE的时候,
需要使用单冒号取代双冒号
</li>
<li class="hello">
(3)类选择器:如.hello{}
</li>
<li>
(4)属性选择器: 如[type=radio]{}
</li>
<li>
(5)伪类选择器:如:hover{}
伪类选择器:伪类选择器是一个中状态,
在某种状态下会被触发
</li>
<li>
ID选择器:如#id{};
ID在页面中必须是唯一的,
所以必须选择的是某一个特定的区域,
或者特定的元素,
不能使用ID选择一堆的元素这样做是不合法的

</li>
<li>
组合选择器: 如:
[type=checkbox]+label{}
结构A+B
A和B都是兄弟元素
</li>
<li>
否定选择器:
:not(.link){}
只要没有.link都触发这个选择器
</li>
<li>
通用选择器:*{};
通用选择器可以配备所有的选择器;
这个比较浪费游览器的性能不推荐使用
</li>
</ul>
</article>
<article>
<h2>CSS权重</h2>
<ul>
<li>
ID选择器具 > 类;属性;伪类>元素;伪元素>其他选择器
</li>
<li>
优先级高的样式覆盖优先级低的样式
</li>
<li>
!important 优先级最高
</li>
<li>
相同优先级,后写的会覆盖先写的
</li>
</ul>
</article>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航