1.标签选择器
直接以html标签的名称作为选择器名称
2.类选择器
在标签中以class="名称”的方式自定义样式名称，在style标签中以.名称的方式定义样式
3.id选择器
在标签中以id="名称”的方式自定义样式名称，在style标签中以#名称的方式定义样式
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS选择器</title> <style> /* 标签选择器 */ h2{ font-size: 24px; color: red; } p{ font-family: "微软雅黑"; font-size: 16px; } /* 类选择器 */ .p_content{ font-weight: bold; color: green; } /* id选择器 */ #p_id{ color: blueviolet; font-style: italic; text-decoration:underline; } #p_id_2{ color: skyblue; } </style> </head> <body> <h2>今天是女神节</h2> <p>享有购物5折优惠，快来购买</p> <p class="p_content">lily,伊芙丽,优衣库等品牌</p> <p id="p_id">满600减100元，满1000减200元</p> <!-- id选择器和类选择的区别 同一个标签的id选择器名称不能重复，一个页面中只能有一个，但是同名称的类选择器可以有多个，可以重复使用 --> <p class="p_content">lily,伊芙丽,优衣库等品牌</p> <p id="p_id_2">满600减100元，满1000减200元</p> </body> </html>
4.交集选择器
由两个选择器构成，其中第一个为标签选择器，第二个为类选择器或者id选择器，两个选择器之间没有空格。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> p{ color: blue; } .special{ color: red; } /* 交集选择器，标签和类之间没有空格 */ p.special{ color: purple; } </style> </head> <body> <p>普通段落文本<p> <p class="special">添加了指定样式的普通段落文本<p> <h3 class="special">我是标题标签</h3> <div class="special">我是块标签</div> </body> </html>
5.后代选择器，选择元素的后代子元素，中间有空格
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> p{ color: blue; font-size: 30px; } strong{ background-color: aquamarine; } /* 后代选择器，有空格，表示标签嵌套的其他元素 */ p strong{ color: red; } p strong strong{ color: palegoldenrod; } </style> </head> <body> <strong>普通段落文本</strong> <p>添加了指定样式的普通<strong>段落<strong>文本</strong></strong><p> </body> </html>
6.并集选择器，多种标签使用同一种样式，用,号隔开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> strong,p,h4{ color: indianred; font-size: 19px; } </style> </head> <body> <strong>普通段落文本</strong> <p>添加了指定样式的普通<strong>段落<strong>文本</strong></strong><p> <h4>我是标题</h4> </body> </html>
7.子代选择器，只选择某个元素的子元素，即只选择儿子元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 选中p标签的所有后代元素strong*/ p strong{ color: green; } /* 选中p标签的子元素strong,儿子元素 */ p>strong{ color: red; } </style> </head> <body> <p>这是一个<strong>子元素<strong>选择器</strong>的案例1</strong></p> <p>这是一个<em>子元素<strong>选择器</strong>的案例2</em></p> </body> </html>