Html-伪类与属性选择器
伪类标签
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
.p{
background-color:yellow;
}
/*给第n个标签设置样式*/
:nth-child(3){
background-color: red; <!--给没层结构的第3个标签设置样式-->
}
/*先确定位置，再筛选选择器，设置样式*/
.p:nth-child(3){
background-color: brown; <!--先确定到每层结构的第三个位置，筛选是否是.p类标签，设置样式-->
}
/*先确定选择器，再匹配位置*/
.p:nth-of-type(2){
background-color: green; <!--先筛选出每层的p选择器，给第2个设置样式-->
}
</style>
</head>
<body>
<p class="p">第1个p</p>
<p class="p">第2个p</p>
<p class="p">第3个p</p>
<p class="p">第4个p</p>
<div>
<h3>正文段落</h3>
<p class="p">第1个p</p>
<p class="p">第2个p</p>
<p class="p">第3个p</p>
<p class="p">第4个p</p>
</div>
</body>
</html>
总结：
1.伪类选择器优先级与类相同
2.nth-child在同一结构下都是相同选择器时使用
3.nth-of-type在同一结构下不全是相同选择器时使用
a标签的四大伪类
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>a标签的四大伪类</title>
<style>
a{
font-size:30px;
}
/*1、标签没有被访问过*/
a:link{
color: orange;
}
/*2、标签被悬浮*/
a:hover{
/*wait:小圈圈 pointer:小手 none:鼠标隐藏 row-resize text*/
cursor:pointer;
}
/*3、标签被激活*/
a:active{
color:red;
}
/*4、标签已被访问过*/
a:visited{
color:green;
}
/*reset操作*/
/*在开发中往往用不到四种伪类，且要清除掉系统的默认样式*/
/*就可以如下对a标签进行样式设置：清除系统默认样式 - reset操作*/
a {
color: black;
text-decoration: none;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
普通标签的伪类运用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>a标签的四大伪类</title>
<style>
/*普通标签的伪类运用*/
.btn {
width: 80px;
height: 45px;
background-color: orange;
}
/*字体*/
.btn {
font: bold 20px/45px 'STSong';
text-align: center;
}
/*边界圆角*/
.btn {
border-radius: 5px;
}
/*不允许文本操作*/
body {
user-select: none;
}
/*伪类*/
.btn:hover {
cursor: pointer;
background-color: orangered;
}
.btn:active {
background-color: brown;
}
</style>
</head>
<body>
<div class="btn">按钮</div>
<!--
标签没有被访问过
标签被悬浮
标签被激活
标签已被访问过
-->
<a href="https://www.baidu.com">前往百度</a>
</body>
</html>
属性选择器
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
/*给所有class的标签设置*/
[class]{
background-color: red;
}
/*给class为h的标签设置*/
[class='h']{
background-color: brown;
}
/*给class包含hhhh4的标签设置*/
[class*='hhhh4']{
background-color: green;
}
/*给class以o开头的标签设置*/
[class^='o']{
background-color: orange;
}
</style>
</head>
<body>
<h1>一级标题</h1>
<h4 class="hhhhhhhh4">标题</h4>
<h4 class="h">标题</h4>
<h4 class="owen">标题</h4>
<div>
<p class="p">段落</p>
</div>
</body>
</html>
总结：
1.属性选择优先级同类
2.[属性名] 查找所有该属性的标签
3.[属性名=属性值] 精确查找
4.[属性名*=值] 模糊查询包含值的标签
5.[属性名^=值] 查找以值开头的标签
