first-line 与first-letter 文字伪类元素选择器 用于选择元素的局部
E:first-line | 表示E元素中的第一行 |
---|---|
first-letter | 表示E元素中的第一个字符 |
案例1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
border: 1px solid red;
font-size: 24px;
}
div:first-line{
background-color: red;
}
div:first-letter{
font-size: 48px;
}
</style>
</head>
<body>
<div>
又发博客了 大家开来看啊
你们快来看~
又发博客了 ,大家开来看啊~
你们不要走~
<mark>加wx wzq85006194</mark>
你们不要走~
又发博客了 大家开来看啊
你们不要走~
</div>
</body>
</html>
案例2
E::selection表示E元素在用户选中文字时
E::before 生成内容在E元素前
E::after 生成内容在E元素后
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
border: 1px solid red;
font-size: 24px;
}
div::selection{
background-color: #eb7350;
color: #fff;
}
div::after{
content: "这是after插入的内容";
background-color: pink;
display: block;
}
div::before{
content: "这是before插入的内容";
background-color: pink;
display: block;
}
</style>
<!--
E::selection表示E元素在用户选中文字时
E::before 生成内容在E元素前
E::after 生成内容在E元素后
: 伪类
给某个元素添加特殊的效果
:: 伪元素
不在静态文件中真实存在
-->
</head>
<body>
<div>
又发博客了 大家开来看啊
你们快来看~
又发博客了 ,大家开来看啊~
你们不要走~
<mark>又发博客了 大家开来看啊。 加wx wzq85006194</mark>
你们不要走~
又发博客了 大家开来看啊
你们不要走~
</div>
</body>
</html>