CSS笔记
CSS
伪元素
-
伪元素,表示页面中一些特殊的并不真实的存在的元素
-
伪元素使用 “::” 开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容(比如复制之后用鼠标选中的内容)
::before 元素的前面
::after 元素的后面
(注:before和after必须结合content属性来使用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
font-size: 20px;
}
p::first-letter{
font-size: 50px;
}
p::first-line{
background-color: yellow;
}
p::selection{
background-color: tomato;
}
div::before{
content:'swhq';
color: tomato;
}
div::after{
content:'hdgy21gha';
color: tomato;
}
</style>
</head>
<body>
<div>你好啊哈哈哈哈哈</div>
<p>hw d2gu1d8g82 dvwuqcxbeudyg1y3du99guavwh2gsvg2 dv2y8d1suws1ydyie831d shwvu1y</p>
</body>
</html>
样式的继承
样式的继承,一个元素的样式也会应用到它的后代元素上
注:并不是所有的样式都会被继承,比如背景相关的,边框相关的,定位相关的样式就不会被继承。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
color: aqua;
}
</style>
</head>
<body>
<div>
我是p元素
<br>
<span>我是P的后代</span>
</div>
</body>
</html>