CSS伪元素选择器和属性选择器

伪元素

能使用伪元素来选择元素中的一些特殊位置

一、给段落定义样式

• :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">