选择器补充
后代选择器
选择器1 选择器2{}
子代选择器
选择器1>选择器2{}
群集选择器
选择器1,选择器2{}
交集选择器
选择器之间紧挨着
交集选择器中有标签选择器，标签选择器必须放在最前面
作用:选中页面中同时满足多个选择器的标签
既被选择器1选中又被选择器2选中的标签
选择器1选择器2{}
代码
<style>
p {
font: bold 30px/46px '楷体';
}
/* 选中的是p标签中class="active"的标签 */
p.active {
color: blueviolet;
}
</style>
</head>
<body>
<p>段落标记</p>
<p>段落标记</p>
<p class="active">段落标记</p>
<p>段落标记</p>
</body>
伪类选择器
用来描述一个元素的特殊状态;比如第一个元素，某个元素的子元素，鼠标点击的元素
静态伪类
只能用于超链接的样式
:link 超链接点击之前
:visited 链接被访问过之后
动态伪类
所有标签都适用
：hover 鼠标悬浮在超链接上
:active 被激活 鼠标点击 不松手
：focus 标签获得焦点
代码
<style>
/* 鼠标悬浮在h3上 */
h3:hover {
color: brown;
}
/* 鼠标点击 不松开 */
h3:active {
color: chartreuse;
}
/* 了解 */
input:focus {
}
</style>
</head>
<body>
<h3>三级标题</h3>
<h3>三级标题</h3>
<h3>三级标题</h3>
<h3>三级标题</h3>
<h3>三级标题</h3>
<input type="text" />
</body>
伪类应用于超链接[重点]
<style>
/* 链接点击之前 */
a:link {
color: blue;
}
/* 链接访问之后 */
a:visited {
color: aqua;
}
/* 鼠标放到标签上时 */
a:hover {
color: brown;
}
/* 被激活 鼠标点击 不松手 */
a:active {
color: chartreuse;
}
/*
4个伪类同时应用于a标签时要注意顺序问题
hover要放到link 和visited的后面
active要放到hover的后面
*/
</style>
</head>
<body>
<a href="http://www.baidu.com">超链接</a>
</body>
其它伪类
:first-child
:last-child
E:nth-child 对父元素里所有孩子排序选择，先找到第n个孩子,然后看看是否和E元素匹配 E:nth-of-type 对父元素里指定的子元素进行排序选择，先去匹配E，在根据E找到第n个孩子
nth-child
nth-of-type
<style>
h3:first-child {
}
h3:nth-child(2n-1) {
}
/* 主要针对的是定位的元素里有好多不同类型的元素 */
/* 指定元素的奇数行 */
/* p:nth-of-type(even) {
} */
/* p:first-of-type {
color: brown;
font-weight: bold;
} */
/* 指定元素的最后一个 */
/* p:last-of-type {
} */
/* 从第三个开始，包含第三个 到最后 */
/* h3:nth-of-type(n + 3) {
} */
/* 前3个 包含第3个 */
/* h3:nth-of-type(-n + 3) {
} */
/* h3:nth-child(n + 3) {
} */
/* h3:nth-child(-n + 3) {
} */
/*
E:nth-child 对父元素里所有孩子排序选择，先找到第n个孩子,然后看看是否和E元素匹配
E:nth-of-type 对父元素里指定的子元素进行排序选择，先去匹配E，在根据E找到第n个孩子
*/
</style>
</head>
<body>
<h3>三级标题1</h3>
<h3>三级标题2</h3>
<h3>三级标题3</h3>
<p>段落标记</p>
<p>段落标记</p>
<h3>三级标题4</h3>
<h3>三级标题5</h3>
<p>段落标记</p>
<h4>四级标题</h4>
<p>段落标记</p>
<h4>四级标题</h4>
<h4>四级标题</h4>
<h3>三级标题1</h3>
<h3>三级标题2</h3>
<h3>三级标题3</h3>
</body>
浙公网安备 33010602011771号