选择器进阶
一.选择器后代
1.概念和特征
根据嵌套关系，选择器可以选择元素的所有后代元素。 语法： 选择器1 选择器2... 选择器N { 内容 } 结果： 在选择器1中找到标签的后代(儿子.孙子...）找到符合选择器2的标签，并设置样式 注意： 如果选择器1找到的标签没有后代，选择器2就不会执行 选择间隔开选择器间
2.代码案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div p {
color: red; } </style> </head> <body> <p>这是p</p> <div> <p>这是div的儿子p</p>
</div>
</body>
</html>
3.输出
二.子代选择器
1.概念和特点
<!-- 子代选择器 >
选择器1 > 选择器2 {}
结果：
在 选择器1 所找到的标签的子代（儿子）中，找到满足选择器2的标签，并设置样式
子代选择器只包括：儿子
如果选择器1所找到的标签没有儿子，则不会执行选择器2
子代选择器中，选择器与选择器之间用>隔开
-->
2.代码案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style> /* 只选择儿子 */ div > a {
color: red; } /* 选孙子 */ div p a {
color: #000; } </style>
</head>
<body>
<div>
父级
<a href="#">div->a</a>
<p>
<a href="#">div->p->a</a>
</p>
</div>
</body>
</html>
3.输出
三.并集选择器
1.概念和特点
并集选择器
选择器间用逗号隔开
同时选择多组标签，设置同一样式
语法：
选择器1,选择器2 {css}
结果：
找到选择器1和选择器2并设置样式
注意：
1.并集选择器的每组选择器可以是基础选择器或者是复合选择器
2.通常一行写一个，提高代码可读性
2.代码案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style> /* p div span h1 文字设置为红色 */ p, div, span, h1 {
color: blue; } h2, a {
color: chartreuse; } </style>
</head>
<body>
<p>ppp</p>
<div>div</div>
<span>span</span>
<h1>h1</h1>
<h2>h2</h2>
<a href="#">hahahah</a>
</body>
</html>
3.输出
四.交集选择器
1.概念和特点
条件:
交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。
语法：
其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。
记忆技巧：
交集选择器 是 并且的意思。 即...又...的意思
比如：
p.one 选择的是： 类名为 .one 的 段落标签。
2.代码案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style> /* 用p标签的box类 */ p.box {
color: brown; } </style>
</head>
<body>
<!-- 找到带box的p，设置为红色 -->
<p class="box">box</p>
<p>pppppp</p>
<div class="box">div--box</div>
</body>
</html>
3.输出
五.hover伪类选择器
1.概念和特点
hover伪类选择器
作用：
选中鼠标悬停元素的状态，设置样式
任何标签的可以设置
语法：
选择器:hover{css}
注意点：
1.伪类选择器元素的某种状态
2.代码案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style> a:hover {
color:green; } </style>
</head>
<body>
<!-- 悬停的时候为红色 -->
<a href="#">超链接</a>
</body>
</html>
3.输出
- 悬停前
- 悬停后
六.emmet语法
1.语法使用
div ------<div></div>
div.red ------<div class="red"></div>
div#one ------<div id="one"></div>
p.red#one ------<p class="red" id="one"></p>
ul>li ------<ul><li></li></ul>
ul>li{我是li的内容} ------<ul><li>我是li的内容</li></ul>
ul>li*3 ------<ul><li></li><li></li><li></li></ul>
2.代码案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style> div {
/* h300+w500+bgc */ height: 300px; width: 500px; background-color: #fff; } </style>
</head>
<body>
<!-- div.red.blue -->
<div class="red blue"></div>
<!-- .red -->
<div class="red"></div>
<!-- 同集有一个p -->
<div></div>
<p></p>
<!-- 父子> -->
<div>
<p></p>
</div>
<!-- *8 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- ul里面有3个li里面有对应的内容 -->
<!-- ul>li{111}li{222}li{333} -->
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<!-- ul>li{$}*3 -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>