一，交集选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>15-css交集选择器.html</title> <!-- 交集选择器,相交的部分就是要设置属性值的标签 1,格式: 选择器1选择器2...{ 属性:值; } 2,注意点: (1),选择器之间没有任何的连接符号 (2),选择器可以是标签名称,也可以是id、class名称 (3),交集选择器仅仅是了解 --> <style> p.para1{ color: red; } </style> </head> <body> <p>我是段落</p> <p>我是段落</p> <p class="para1">我是段落</p> <p class="para1">我是段落</p> <p>我是段落</p> </body> </html>
二，并集选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>16-css并集选择器.html</title> <!-- 并集选择器 1,格式: 选择器1,选择器2,...{ 属性:值; } 2,注意点: (1),选择器之间利用,连接 (2),选择器可以是标签名称,也可以是id、class名称 --> <style> .ht,.para{ color: red; } </style> </head> <body> <h1 class="ht">我是头</h1> <p class="para">我是段落</p> <p>我是段落</p> <p>我是段落</p> <p>我是段落</p> </body> </html>
三，兄弟选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>17-css兄弟选择器.html</title> <!-- 兄弟选择器,只选中同级的标签 1,相邻兄弟兄弟选择(css2) 格式: 选择器1+选择器2{ 属性:值; } 注意点: (1),相邻选择器必须用+链接 (2),相邻选择器只能选中紧跟后边的那个标签,不能选中被隔开的标签 2,通用兄弟选择器(css3),指定选择器后边特定的所有选择器都被选中 格式: 选择器1~选择器2{ 属性:值; } --> <style> /*h1+p{*/ /*color: red;*/ /*}*/ h1~p{ color: red; } </style> </head> <body> <!--<h1>我是标题</h1>--> <!--<a href="#">我是超级链接</a>--> <!--<p>我是段落</p>--> <!--<p>我是段落</p>--> <!--<p>我是段落</p>--> <!--<h1>我是标题</h1>--> <!--<p>我是段落</p>--> <!--<p>我是段落</p>--> <!--<p>我是段落</p>--> <h1>我是标题</h1> <a href="#">我是超级链接</a> <p>我是段落</p> <p>我是段落</p> <p>我是段落</p> <h1>我是标题</h1> <p>我是段落</p> <p>我是段落</p> <p>我是段落</p> </body> </html>