基础选择器并不能满足我们所有需求，在基础选择器上进行了延伸。
1、后代选择器
通过标签之间的嵌套关系，层级关系，限定我们答题范围，在范围内具体查找相关元素。
代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } .box1 li{ color: red; } </style> </head> <body> <div class="box1"> <ul> <li>这是第一个div</li> <li>这是第一个div</li> <li>这是第一个div</li> <li>这是第一个div</li> </ul> </div> <div class="box2"> <ul> <li>这是第二个div</li> <li>这是第二个div</li> <li>这是第二个div</li> <li>这是第二个div</li> </ul> </body> </html>
效果图↓
后代选择器根据嵌套关系，空格左侧是右侧的祖先元素。
后代选择器空格两边只要是后代关系就可以，不一定是父子关系，就比如上面代码里并没有把ul也写到box1后面。
一般开始的祖先元素都不使用标签选择器。
可以根据嵌套关系来确定最终元素。
代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } div ul li dl dd p{ color: blue; } </style> </head> <body> <p>这是外面的文字</p> <div> <ul> <li> <dl> <dt></dt> <dd> <p>这是里面的文字</p> </dd> </dl> </li> </ul> </div> </body> </html>
效果图↓
2、交集选择器
满足条件1也满足条件2。
两种或两种以上选择器同时存在。
写法:选择器之间直接连接，没有任何符号
代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } p.one{ color: red; } </style> </head> <body> <ul> <li> <p class="one">这是p标签</p> </li> <li class="one">这是li标签</li> <li></li> <li></li> </ul> </body> </html>
同时存在
满足条件1也满足条件2
效果图↓
理解:ul标签中我的p标签和li标签类名都是one，用交集选择器直接写p.one就可以。
交集使用的基础选择器可以都是类选择器，可以是标签、类混写。
交集选择器的连续书写。代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } p.one{ color: red; } li.one.lis{ color: green; } </style> </head> <body> <ul> <li> <p class="one">这是p标签</p> </li> <li class="one lis">这是li标签</li> <li></li> <li></li> </ul> </body> </html>
上面li.one.lis表示:这个元素既是li标签，又得有one名和lis名。
常见问题:IE6不支持类的连续交集。
3、并集选择器
有很多元素可能有相同的css样式，可以通过并集选择器将这些标签写在一起，统一设置css样式。
前面所有的选择器都可以作为并集里的一项，在选择器中间用逗号隔开。
代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } p,li.one{ color: red; } </style> </head> <body> <ul> <p class="one">这是p</p> <li class="one lis">这是1</li> <li>这是2</li> </ul> <ul> <li>这是3</li> <li class="one">这是4</li> <li>这是5</li> </ul> </body> </html>
多个选择器选中的元素使用同一个样式。
等价于↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } p{ color: red; } li.one{ color: red; } </style> </head> <body> <ul> <p class="one">这是p</p> <li class="one lis">这是1</li> <li>这是2</li> </ul> <ul> <li>这是3</li> <li class="one">这是4</li> <li>这是5</li> </ul> </body> </html>
效果图↓
用途:清空默认样式，用之前的通配符清空默认样式效率低。
利用并集选择器清除默认样式↓
div,ul,li,p{
margin: 0;
padding: 0;
}
ul,ol{
list-style: none;
}