伪元素

一、伪元素：使用伪元素来表示元素中一些特殊的位置
1.first-letter第一个字符
为p中的第一个字符来设置一个特殊的样式
p:first-letter{
color:red;
font-size: 60px;;
}
2.first-line第一行
为p中的第一行来设置一个背景颜色为黄色
p:first-line{
background-color: yellow;

3. before表示元素最前面的部分
   一般before都需要结合content这个样式一起使用
   通过content可以向before或after的位置添加一些内容*/
   p:before{
   content:“我会出现在整个段落的最前面”;
   color:pink;
   }
4. after表示元素最后面的部分
   p:after{
   content:“我会出现在段落的最后面”;
   color:red;
   }
   二、属性选择器
5. 属性
   title属性，这个属性可以给任何标签指定
   当鼠标移入到元素上时，元素中title属性的值将会作为提示文字显示

<p title="我是title中的文字" >我是一个段落</p>

2. 属性选择器
   为所有具有title属性的p元素，设置一个背景颜色为黄色
   属性选择器：作用，可以根据元素中的属性或属性值来选取指定元素
   1)语法：[属性名]选取含有指定属性的元素
   p[title]{
   background-color: yellow;
   }
   
   

2)语法：[属性名=“属性值”]选取含有指定属性值的元素
为title属性值为apple的元素来设置一个背景颜色为绿色
p[title=“apple”]{
background-color:green;
}

3)语法：[属性名^=”属性值”] 选取属性值以指定内容开头的元素

4）语法：[属性名$=“属性值”]选取属性值指定内容结尾的元素

5）[属性名*=“属性值”]选取 属性值以包含指定内容的元素

兄弟元素选择器

1. 为span后的一个p元素设置一个背景颜色为黄色
   后一个兄弟元素选择器
   作用：可以选择一个元素后紧挨着的指定的兄弟
   语法：前一个+后一个{}

2. ~表示选中后面的所有兄弟元素
   语法：
   前一个~后面所有