1
1 <!-- 属性选择器--> 2 <!DOCTYPE html> 3 <html> 4 <head> 5 <meta charset="UTF-8"> 6 <title>属性选择器</title> 7 <style type="text/css"> 8 /** 9 *属性选择器 ，根于元素中的属性或属性值选择指定的元素 10 * title标签，当鼠标移动到元素上的时候，元素中title属性的值将作为文字提示 11 * 1，标签:[title]{ } 12 * 2，标签：[title=" "]{ } 13 * 3,标签：[title^=" "]{ }选择以指定内容开头的 14 * 4，标签：[title$=" "]{ }选择以指定内容结尾的 15 * 5，标签:[title*=" "]{ }选择含有某内容的，不限位置 16 */ 17 18 /* 1 p[title]{ 19 background-color: indianred; 20 }*/ 21 22 p[title^="123"]{ 23 color: burlywood; 24 } 25 26 p[title$="c"]{ 27 color: #DEB887; 28 } 29 30 p[title*="r"]{ 31 color: aqua; 32 } 33 34 </style> 35 </head> 36 <body> 37 <p>悯农</p> 38 <p title="123">锄禾日当午</p> 39 <p title="abc">汗滴禾下土</p> 40 <p title="abbcc">谁知盘中餐</p> 41 <p title="bcdde">粒粒皆辛苦</p> 42 <p title="grd">这是一首流传了很久很久的诗</p> 43 <p title="vvrf">但是还是会浪费很多粮食</p> 44 </body> 45 </html>
<!--伪元素 -->
<!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>伪元素</title> 6 <style type="text/css"> 7 /* 8 * 伪元素负责表示一些特殊位置 9 * 1.first-letter表示第一个字母 10 * 2：first-line表示第一行 11 * 3：before 表示向一段前添加元素,通常和content一起使用 12 * 4：after 表示向一段后添加元素 13 */ 14 15 p:first-letter{ 16 color: aqua; 17 font-size:20px ; 18 } 19 20 p:first-line{ 21 background-color: yellow; 22 } 23 24 p:before{ 25 content: "向最前面添加一句话,"; 26 background-color: brown; 27 } 28 29 p:after{ 30 content: "这是最后一句话"; 31 background-color: blueviolet; 32 } 33 </style> 34 </head> 35 <body> 36 <p>长妈妈，已经说过，是一个一向带领着我的女工，说得阔气一点，就是我的保姆。我的 母亲和许多别的人都这样称呼她，似乎略带些客气的意思。只有祖母叫她阿长。我平时叫她 “阿妈”，连“长”字也不带；但到憎恶她的时候，——例如知道了谋死我那隐鼠的却是她的时候，就叫她阿长。</p> 37 </body> 38 </html>
