<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>property table</title> <style> [class="c1"]{color: red} /*属性值*/ [alex]{color: yellow} /*自己添加的属性名称*/ p[class="p1"]{color: blue} /*标签加属性值*/ div[class="c4"]{color: blue} div[id="id1"]{background: blue} .div5{font-size: 50px} /*下面class的div5，div6会添加两个属性*/ .div6{color:darkmagenta} [class~="div7"]{font-size: 58px;color: red} /*只要有一个div7的就赋值*/ [class^="div10"]{font-size:55px;color: red}/*以div10开头*/ [class$="div15"]{font-size:55px;color: red}/*以div15结尾*/ [class*="div16"]{font-size: 50px;color: red} /*包含div16*/ /*before,after添加前后添加内容*/ p:before{content:"前面"} p:after{content:"后面"} [jj]{font-size: 199px} /*<p>自定义属性*/ </style> </head> <body> <div class="c1">div1</div> <p class="p1">p1</p> <div class="c2" alex="jm">div2</div> <div class="c3">div3</div> <div class="c4">div4</div> <div id="id1">div4</div> <div class="div5 div6">div5</div> <div class="div7 div8">div7</div> <div class="div7 div9">div8</div> <div class="div10 div11">div10</div> <div class="div12 div15">div11</div> <div class="div16div17">div12</div> <p id="ppp" jj = "dds">这个是添加内容</p> </body> </html>