1.通配符选择器:作用域页面上的所有标签
<style type="text/css">
*{
属性名1 : 属性值1
属性名2 : 属性值2
...
}
</style>
通配符选择器在进行选择的时候,会去遍历页面上的所有标签,并且给这些标签设置对应的属性。这样一来,性能就比较低。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
color:blue;
}
</style>
</head>
<body>
<span>java</span>
<p>python</p>
<div>javascript</div>
</body>
</html>
2.后代选择器: 选择一个标签中所有后代标签里满足条件的标签
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.book p{
color: blue
} /* 后代选择器 */
.book .history p{ /* 去book标签下找history标签,再找history下面所有的p标签 */
color: red
}
</style>
</head>
<body>
<div class="book">
<p>历史类书籍</p>
<div class="history">
<p>史记</p>
<p>资治通鉴</p>
</div>
<p>哲学类书籍</p>
<p>教育类书籍</p>
</div>
<p>电影</p>
</body>
</html>
3.子元素选择器: 得到当前标签中的直接子元素(直接放在标签下面没有经过任何标签的嵌套)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.book> p{
color: blue
} /* 子元素选择器 */
</style>
</head>
<body>
<div class="book">
<p>历史类书籍</p>
<div class="history">
<p>史记</p>
<p>资治通鉴</p>
</div>
<p>哲学类书籍</p>
<p>教育类书籍</p>
</div>
<p>电影</p>
</body>
</html>
4.并集选择器
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.history p, .novel p {
color: blue
} /* 并集选择器 */
</style>
</head>
<body>
<div class="book">
<p>历史类书籍</p>
<div class="history">
<p>史记</p>
<p>资治通鉴</p>
</div>
<div class="novel">
<p>三国演义</p>
<p>红楼梦</p>
</div>
<p>哲学类书籍</p>
<p>教育类书籍</p>
</div>
<p class="novell">电影</p>
</body>
</html>
5.交集选择器:从两个集合中选择它们相同的部分
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p.history{ /*找到既是p标签,又是history的标签*/
color: blue
} /* 交集选择器 */
</style>
</head>
<body>
<div class="novel">
<p class="history">三国演义</p>
<p class="history">红楼梦</p>
<p>三体</p>
<p>麦田里的守望者</p>
</div>
<p class="history">水浒传</p>
</body>
</html>