CSS复合选择器
例题:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
/* 后代选择器，儿子和孙子都选择进来 */
.nav a {
color: red;
}
style>
head>
<body>
<div class="nav">
<a href="#">我是儿子a>
<P>
<a href="#">我是孙子a>
P>
div>
body>
运行结果：
例题二：
<style>
/*后代选择器： 只想把ol里面的li 标签更改样式 */
ol li {
color: pink;
}
style>
head>
<body>
<ol>
<li>我是ol的孩子li>
<li>我是ol的孩子li>
<li>我是ol的孩子li>
ol>
<ul>
<li>我是Ul的孩子li>
<li>我是Ul的孩子li>
<li>我是Ul的孩子li>
ul>
body>
运行结果:
例题：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
/* 子选择器，只会选择亲儿子标签 */
.nav>a {
color: red;
}
style>
head>
<body>
<div class="nav">
<a href="#">我是儿子a>
<P>
<a href="#">我是孙子a>
P>
div>
body>
运行结果：
例题：
<title>Documenttitle>
<style>
/* 并集选择器：元素之间用 , 号隔开 */
/* 要求1：请把熊大和熊二改为粉色 */
/* div,
p {
color: pink;
} */
/* 要求2：请把熊大和熊二改为红色 还有小猪一家改为粉色 */
div,
p,
.pig {
color: pink;
}
style>
head>
<body>
<div>熊大div>
<p>熊二p>
<span>光头强span>
<ul class="pig">
<li>小猪佩奇li>
<li>猪爸爸li>
<li>猪妈妈li>
ul>
body>
运行结果：
a:link 表示把
没有点击过的（访问过的）链接选出来
a:visited 表示把所有
已经点击过（访问过的）链接选出来
a:hover 表示选择鼠标经过的那个链接
a:active 表示选择的是我们鼠标正在按下还没有弹起鼠标的那个链接
例题:
<head>
<meta charset="UTF-8">
<title>复合选择器之伪类选择器title>
<style>
a:link {
/* 选择：未访问过的链接标签 a:link */
/* 把链接的字改成黑色 */
color:#333;
/*去掉下划线*/
text-decoration: none;
}
/*选择：已经访问过的链接标签 a:visited*/
a:visited {
color:orange;
}
/*选择：鼠标经过的那个链接*/
a:hover {
color: aquamarine;
}
a:active {
color: green;
}
style>
head>
<body>
<a href="#">小猪佩奇a>
body
>
运行结果：
开发中常用的格式：
<title>复合选择器之链接伪类选择器title>
<style>
/* 首先给超链接标签定义一个样式 */
a {
color: pink;
text-decoration: none;
}
/* 然后再使用伪选择器，让鼠标经过时改变颜色同时显示下划线 */
a:hover {
color: blue;
text-decoration: underline;
}
style>
head>
<body>
<a href="#">连接一a> <a href="#">连接二a>
body>
例题：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合选择器之链接伪类选择器title>
<style>
/* 把获得光标的input表单元素选取出来 */
input:focus {
/* 给表单元素添加背景色 粉色 */
background-color: pink;
color: red;
}
style>
head>
<body>
<input type="text">
<input type="text">
<input type="text">
body>
运行结果：
例题:<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><style>/* 后代选择器，儿子和孙子都选择进来 */.nav a {color: red;}style>head><body><div class="nav"><a href="#">我是儿子a><P><a href="#">我是孙子a>P>div>body>运行结果：
例题二：<style>/*后代选择器： 只想把ol里面的li 标签更改样式 */ol li {color: pink;}style>head><body><ol><li>我是ol的孩子li><li>我是ol的孩子li><li>我是ol的孩子li>ol><ul><li>我是Ul的孩子li><li>我是Ul的孩子li><li>我是Ul的孩子li>ul>body>运行结果:
例题：<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><style>/* 子选择器，只会选择亲儿子标签 */.nav>a {color: red;}style>head><body><div class="nav"><a href="#">我是儿子a><P><a href="#">我是孙子a>P>div>body>运行结果：
例题：<title>Documenttitle><style>/* 并集选择器：元素之间用 , 号隔开 *//* 要求1：请把熊大和熊二改为粉色 *//* div,p {color: pink;} *//* 要求2：请把熊大和熊二改为红色 还有小猪一家改为粉色 */div,p,.pig {color: pink;}style>head><body><div>熊大div><p>熊二p><span>光头强span><ul class="pig"><li>小猪佩奇li><li>猪爸爸li><li>猪妈妈li>ul>body>运行结果：
a:link 表示把 没有点击过的（访问过的）链接选出来a:visited 表示把所有 已经点击过（访问过的）链接选出来a:hover 表示选择鼠标经过的那个链接a:active 表示选择的是我们鼠标正在按下还没有弹起鼠标的那个链接
例题:<head><meta charset="UTF-8"><title>复合选择器之伪类选择器title><style>a:link {/* 选择：未访问过的链接标签 a:link *//* 把链接的字改成黑色 */color:#333;/*去掉下划线*/text-decoration: none;}/*选择：已经访问过的链接标签 a:visited*/a:visited {color:orange;}/*选择：鼠标经过的那个链接*/a:hover {color: aquamarine;}a:active {color: green;}style>head><body><a href="#">小猪佩奇a>body >运行结果：
开发中常用的格式：<title>复合选择器之链接伪类选择器title><style>/* 首先给超链接标签定义一个样式 */a {color: pink;text-decoration: none;}/* 然后再使用伪选择器，让鼠标经过时改变颜色同时显示下划线 */a:hover {color: blue;text-decoration: underline;}style>head><body><a href="#">连接一a> <a href="#">连接二a>body>
例题：<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>复合选择器之链接伪类选择器title><style>/* 把获得光标的input表单元素选取出来 */input:focus {/* 给表单元素添加背景色 粉色 */background-color: pink;color: red;}style>head><body><input type="text"><input type="text"><input type="text">body>运行结果：
