1、标签选择器，用标签做选择
例如： div{color:#00F} p{color:#0F0}
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> div{color:#00F} p{color:#0F0} </style> </head> <body> <div >更好发挥的返回结果还 </div> <p>豆腐干山豆根很舒服</p> <p>身体还是身体</p> </body>
2、class选择器是.开头
例如： .sss{color:#F39}
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> .sss{color:#F39} </style> </head> <body> <div class="ssss">更好发挥的返回结果还 <!--class样式--> </div> <p>豆腐干山豆根很舒服</p> <p>身体还是身体</p> </body>
3、id选择器以#开头、
例如：#www{color:#F39}
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #www{color:#F39} </style> </head> <body> <div >更好发挥的返回结果还 </div> <p id="www">豆腐干山豆根很舒服</p> <!--id样式--> <p>身体还是身体</p> </body>
4、复合选择器
1）、用，隔开表示并列
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> div,p{color:#F39} </style> </head> <body> <div >更好发挥的返回结果还 </div> <p >豆腐干山豆根很舒服</p> <p>身体还是身体</p> </body>
2）、用空格隔开，表示下一级
例如：div {color:#F39}
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> div {color:#F39} </style> </head> <body> <div ><p>更好发挥的返回结果还</p> </div> <p >豆腐干山豆根很舒服</p> <p>身体还是身体</p> </body>
3）、筛选.
例如：<p>中所有class是sss的
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> .sss{color:#F39} </style> </head> <body> <div ><p>更好发挥的返回结果还</p> </div> <p class="sss">豆腐干山豆根很舒服</p> <p>身体还是身体</p> <p>防守对方法务</p> <p class="sss">委托人</p> <p>问题我</p> <p class="sss">让他 </p> </body>
5)所有*
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{color:#F39} </style> </head> <body> <div ><p>更好发挥的返回结果还</p> </div> <p >豆腐干山豆根很舒服</p> <p>身体还是身体</p> <p>防守对方法务</p> <p >委托人</p> <p>问题我</p> <p >让他 </p> </body>
优先级
id>class>标签>*
#>.>标签>*