如何练习css-选择器
通过两个例子让你掌握css-选择器的用法。
工具/原料
UE
第一个例子
1、名词介绍h1,h2是selector 后面的{}里面包含的是属性的名称，和属性的值，*作为selector的时候是任何都匹配的。text-align:center 居中对齐class selector 类选择器，class用.来选择它idselector 用#来选择它italic 倾斜universal 普遍的priority 优先权
2、先打开UE建立如下文档<html> <head> <title>古诗两首</title> </head> <body> <h1>古诗两首</h1> <h2>静夜思</h2> <p>李白</p> <p>床前明月光</p> <p>疑是地上霜</p> <p>举头望明月</p> <p>低头思故乡</p> <h2>春晓</h2> <p>孟浩然</p> <p>春眠不觉晓</p> <p>处处闻啼鸟</p> <p>夜来风雨声</p> <p>花落知多少</p> </body></html>
4、改变标题一的大小<html> <head> <title>古诗两首</title> <style> *{font-family:黑体;} h1{font-size:66px;} </style> </head> <body> <h1>古诗两首</h1> <h2>静夜思</h2> <p>李白</p> <p>床前明月光</p> <p>疑是地上霜</p> <p>举头望明月</p> <p>低头思故乡</p> <h2>春晓</h2> <p>孟浩然</p> <p>春眠不觉晓</p> <p>处处闻啼鸟</p> <p>夜来风雨声</p> <p>花落知多少</p> </body></html>
6、居中对齐<html> <head> <title>古诗两首</title> <style> *{font-family:黑体;text-align:center} h1{color:red;} h2{color:green;} p{color:blue;} </style> </head> <body> <h1>古诗两首</h1> <h2>静夜思</h2> <p>李白</p> <p>床前明月光</p> <p>疑是地上霜</p> <p>举头望明月</p> <p>低头思故乡</p> <h2>春晓</h2> <p>孟浩然</p> <p>春眠不觉晓</p> <p>处处闻啼鸟</p> <p>夜来风雨声</p> <p>花落知多少</p> </body></html>
8、id选择的优先级比class选择要更要一些<html> <head> <title>芨宠谟挨古诗两首</title> <style> *{font-family:黑体;text-align:center} h1{color:red;} h2{color:green;} p{color:blue;} .shangju{background:yellow;font-style:italic;} .xiaju{background:pink;font-weight:800;} .shiren{background:orange;} #jutou{background:black;} </style> </head> <body> <h1>古诗两首</h1> <h2>静夜思</h2> <p class="shiren">李白</p> <p class="shangju">床前明月光</p> <p class="xiaju">疑是地上霜</p> <p id="jutou" class="shangju">举头望明月</p> <p class="xiaju">低头思故乡</p> <h2>春晓</h2> <p class="shiren">孟浩然</p> <p class="shangju">春眠不觉晓</p> <p class="xiaju">处处闻啼鸟</p> <p class="shangju">夜来风雨声</p> <p class="xiaju">花落知多少</p> </body></html>
3、内联大于id，id大于class，class大于type，级联大于*