1.Id选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /* #ID的名称{ 属性名称:属性的值; 属性名称:属性的值; } * */ #div1{ color: red; } </style> </head> <body> <!--请将JAVAEE颜色改成红色--> <div id="div1">JAVAEE</div> <div>IOS</div> <div>ANDROID</div> </body> </html>
2.类选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- .类的名称{ 属性名称:属性的值; 属性名称:属性的值; } --> <style> .shuiguo{ color: yellow; } .shucai{ color: green; } </style> </head> <body> <!-- 请将水果类,改成黄色 蔬菜类改成绿色 --> <div class="shuiguo">香蕉</div> <div class="shucai">黄瓜</div> <div class="shuiguo">苹果</div> <div class="shucai">茄子</div> <div class="shuiguo">橘子</div> </body> </html>
3.属性选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--修改包含title属性的a标签--> <style> /*a[title='aaa']{ color: red; }*/ a[href][title]{ color: yellow; } </style> </head> <body> <a href="#" title="aaa">张三</a> <a href="#" >李四</a> </body> </html>
4.元素选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> span{ color:blue; } </style> </head> <body> <span>好好学习，天天向上</span> <span>好好学习，天天向上</span> </body> </html>
5.后代选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*请将H1下面的所有 em 元素 的内容颜色改成 红色*/ /*中间以空格隔开的是后代选择器*/ h1 > em{ color: red; } </style> </head> <body> <h1> This is a <em>儿子</em> <strong> <em>孙子</em> </strong> heading </h1> </body> </html>
6.伪类选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> a:link {color: red} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */ </style> </head> <body> <a href="#">好好学习</a> </body> </html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
