Html-伪类与属性选择器
Posted 863652104kai
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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.[属性名^=值] 查找以值开头的标签
以上是关于Html-伪类与属性选择器的主要内容，如果未能解决你的问题，请参考以下文章