选择器是用来选中指定标签来添加样式 常用的选择器: 1.id选择器: 在标签的id属性值前加#作为一个选择器，选中id属性是指定值的标签。（注意：同一个id值在当前页面中只有一个标签） #p1{} - 选中id是p1的标签
2.类选择器：在标签的class属性值前加.作为一个选择器，选中class属性是指定值的标签。 .c1{} - 选中class是c1的所有的标签 注意：同一个class可以作用于不同的标签，同一个标签可以同时拥有多个class值（有多个的时候中间用空格隔开）
3.元素选择器：直接将标签名作为选择器，选中当前页面中所有指定的标签 p{} - 选中所有的p标签 div{} - 选中所有的div标签
4.通配符：将*作为选择器, 选中当前页面中的所有的标签
5.群组选择器：将多个其他的选择器有逗号隔开作为一个选择器，选中每个独立的选择器选中所有的标签 p,.c1,#p1{} - 选中所有的p标签和class是c1标签，以及id是p1的标签 a,img{} - 选中所有的图片和超链接
6.后代选择器：将多个选择器用空格隔开作为一个选择器 div p{} - 获取所有是div后代的p标签 div .p1 - 选中div中所有class是p1的标签(div 和 .p1的标签是后代关系)
7.子代选择器：将多个选择器用>隔开作为一个选择器 div>p{} - 选中所有div标签子标签中的p标签 div>.p1{} - 选中所有div标签子标签中class是p1的标签
<meta charset="utf-8"> <title></title> </head> <body> <!-- ============1.id选择器 ============--> <!-- <h1 id="title1">id选择器</h1> <p id="p1">我是段落1</p> <p>我是段落2</p> <style type="text/css"> #p1{ color: #FF69B4; font-size: 25px; } #title1{ color: #8B008B; width: 200px; background-color: yellow; } </style> --> <!-- ============2.class和元素选择器 ============--> <!-- <h1 class="c1">class选择器</h1> <p class="c1">我是段落1</p> <p class="c2">我是段落2</p> <p class="c1">我是段落3</p> <a class="c1 c2" href="">我是超链接1</a> <a class="c2" href="">我是超链接2</a> <style type="text/css"> /* 元素选择器 */ p{ color: red; } /* class选择器 */ .c1{ background-color: seagreen; } .c2{ font-size: 25px; } /* 通配符 */ *{ border: 1px solid firebrick; } </style> --> <!-- ============3.群组选择器 ============--> <!-- <h1 class="c1">class选择器</h1> <p class="c1">我是段落1</p> <p class="c2">我是段落2</p> <p class="c1">我是段落3</p> <a class="c1 c2" href="">我是超链接1</a> <a class="c2" href="">我是超链接2</a> <style type="text/css"> p,a{ color: red; } h1,.c2{ background-color: yellow; } </style> --> <!-- ============4.后代选择器 ============--> <p>我是段落1</p> <div id=""> <p>我是段落2</p> <span> <p>我是段落3</p> </span> <a href="">我是超链接1</a> </div> <div id=""> <p>我是段落4</p> <div id=""> <p>我是段落5</p> </div> </div> <style type="text/css"> /* 后代选择器 */ div p{ color: red; } /* 子代选择器 */ div>p{ background-color: skyblue; } </style>语法： 选择标签的选择器:伪类选择器{}
常用的伪类选择器： 1）link - 链接未被成功访问对应的状态（只针对超链接有效） 2) visited - 链接已经被成功访问对应的状态（只针对超链接有效） 3) hover - 鼠标悬停在标签上对应的状态（针对所有可见标签有效） 4) active - 鼠标按住标签不放对应的状态（针对所有可见标签有效） –>
我是超链接1 <style type="text/css"> a:link{ color: red; } a:visited{ color: green; } a:hover{ color: #0000FF; font-size: 30px; } a:active{ color: #FF69B4; } </style> <div id="div1" style="width: 100px; height: 100px;"></div> <style type="text/css"> #div1{ background-color: #008000; } #div1:hover{ background-color: aqua; } #div1:active{ background-color: #8B008B; } </style>