伪元素
能使用伪元素来选择元素中的一些特殊位置
一、给段落定义样式
- :first-letter 首字母（只能用于块元素）
- :first-line 第一行
1、为p元素中的第一个字符设置颜色为黄色，字体为30px
p:first-letter{color:yellow;font-size:30px;}
<p>这是一个段落</p>
2、为p中的第一行设置背景颜色为绿色(多写点)
p:first-line{background-color:green;}
二、元素前后部分
- :before 表示元素最前面的部分（紧随着开始标签的后面）
- :after 表示元素最后面的部分（紧挨着结束标签的前面）
一般before和after都要结合content这个样式一起使用，通过content向before或after的位置添加一些内容。
所添加的内容因为是通过css添加的所以无法选中这部分内容。
1、在p元素后面添加文字内容
p:after{content:"会出现在元素的最后面";color:blue;}
2、在p元素前面添加文字（使用伪类元素插入的内容“会出现在元素的最前面”这部分内容不可选中）
p:before{content:"会出现元素的最前面";color:orange;}
属性选择器
按属性选择元素，可以对具有给定属性或属性值的元素进行格式化，按属性选择要设置的 元素
语法结构：
No1、首先是选择器（要考察其属性的元素的选择器）
No2、接着输入属性的名称（元素要考察的属性的名称）
方括号[ ],包围目标属性和目标值。
No3、选择相应的属性选择器，属性选择器有：
- [属性名] 匹配具体的属性，不问具体属性值是什么
- [属性名="value"] 属性值符合条件的元素将被选中
- [属性名~="value"] 属性值包含这里的value的元素将被选中（属性值还可以包含其他内容，不同的属性值之间空隔分开）必须匹配完整的单词，而不是单词的一部分。
- [属性名|="value"] (前面是管道符号|，不是1或字母L)，表示属性值等于这里的value或是以value-开头的元素将会被选中。不用输入连字符
- [属性名^="value"] 表示属性值以这里的value开头(作为完整的单词，或单词的一部分)的元素将被选中
- [属性名$="value"] 表示属性值这里以value结尾（作为完整的单词，或单词的一部分）的元素将被选中
- [属性名*="value"] 表示属性值至少包含这里的value一次的元素将被选中，value不必是属性值中的完整单词
实例：
1.选择所有具有class属性的段落p，设置其前景色为红色
p[class]{color:red}
<p class="b1">第一个段落</p>
<p class="b2">第二个段落</p>
<p>第三个段落</p>
2.选择任何lang属性值等于en（必须完全匹配）的p元素，设置前景色为红色
p[lang="en"] {color:red}
<p lang="en">第一个段落</p>
<p>第二个段落</p>
<p>第三个段落</p>
3、~=可以测试单词的部分匹配，即匹配以空格相邻的多个单词中的一个(完整单词)。选择class属性中属性值中有boxone的article元素，并设置其背景颜色为黄色。
article[class~="boxone"] {background-color:yellow}
<article class="boxone content">article</article>
<article class="boxoone">center</article>
(1) *=选择器可以匹配部分字符串（不需要完整的单词）
article[class*="box"] {background-color:yellow} √
(2) 当写成如下形式的时候，这个选择器将无法匹配，因为box不是空格分隔的单词列表中某个完整的单词。
article[class~="box"] {background-color:yellow} ×
4、|=选择任何带有lang属性且属性值是以es开头的h2，设置前景颜色为蓝色。
h2[lang|="es"] {color:blue}
<h2 lang="es">第一个二级标题</h2>
<h2 lang="zh">第二个二级标题</h2>
5、可以通过联合使用多种选择器，选择既有href属性，又有任意属性值包含单词box的class属性的a元素，设置背景颜色为橙色。
a[href][class~="box"] {background-color:orange}
<a href="http://www.baidu.com">百度</a>
<a href="#" class="box link">未链接</a>
<a href="http://www.baidu.com" id="box">其他进入方式</a>
6、*=选择器选择所有既有href属性，又有任意属性包含are（作为完整单词或单词的一部分，如hare、dare。无论are出现在属性值的什么位置）的title属性的a元素。
a[href][title*="are"] {font-size:30px}
<a href="#" title="百度are">百度</a>
<a href="#" title="sinlangsre">新浪</a>
<a href="#" title="wangyi">网易</a>
7、^=选择器匹配任何href属性以http://开头(作为完整的单词，或单词的一部分)的a元素。
a[href^="http://"] {background-color:red}
<a href="http://www.baidu.com">百度</a>
<a href="#">新浪</a>
8、匹配任何src属性完全等于logo.png的img元素。
img[src="wj1.png"] {border:1px solid green}
<img src="wj.png">
9、选择器的精确度比前一个低，匹配任何src属性值以。png结尾的img元素。
img[src$=".png"] {border:1px solid green}
<img src="wj.png">
<img src="1.jpg">