前端 高级选择器 伪类选择器
Posted bladecheng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端 高级选择器 伪类选择器相关的知识，希望对你有一定的参考价值。
高级选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高级选择器</title>
<style>
.h2
color: red;
/*1、后代(子代)选择器*/
/*后代：空格连接 子代：>连接*/
/*body > .h2 控制一个 | body .h2 控制两个*/
body > .h2
font-size: 40px;
/*2、兄弟(相邻)标签：只能上兄弟修饰下兄弟*/
/*兄弟：~连接 相邻：+连接*/
/*.h3 + .h4 控制一个 | .h3 ~ .h4 控制两个*/
.h3 + .h4
color: pink;
/*3、群组选择器：控制多个选择器*/
.h2, body h3, h4
text-align: center;
/*4、选择器的优先级：权重 - 个数*/
/*权值：不同级别没有可比性、同一级别比个数、选择器类型不影响优先级、优先级一致看顺序
*：1
标签：10
class(伪类)：100
id：1000
!important：10000
*/
#h6
color: black;
.d1 div h6
color: pink;
.d2 h6
color: brown;
body h6
color: cyan;
div > h6
color: orange;
h6
font-size: 100px;
text-align: center;
color: red;
</style>
<style>
/*5、交叉选择器*/
h6#h6.h.hh
color: chartreuse;
</style>
</head>
<body>
<div class="d1">
<div class="d2">
<h6 id="h6" class="h hh">css高级选择器优先级</h6>
</div>
</div>
<h3 class="h3">第1个h3</h3>
<h4 class="h4">第1个h4</h4>
<h4 class="h4">第2个h4</h4>
<h3 class="h3">第1个h3</h3>
<div>
<h4 class="h4">第1个h4</h4>
<h4 class="h4">第2个h4</h4>
</div>
<h2 class="h2">h2标签</h2>
<div>
<h2 class="h2">div下的h2</h2>
</div>
<p>p标签的内容不水平居中</p>
</body>
</html>伪类与属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style>
.p
background-color: orange;
/*先确定位置，再筛选选择器*/
p:nth-child(3)
background-color: red;
/*先确定选择器，在匹配位置*/
p:nth-of-type(3)
background-color: brown;
p.p3
background-color: cyan;
/*总结：
1、伪类选择器优先级与类相同
2、nth-child在同一结构下都是相同选择器时使用
3、nth-of-type在同一结构下不全是相同选择器时使用
*/
</style>
<style>
.h4
color: orange;
[class='h4']
color: brown;
[owen*='owen']
color: pink;
[owen^='o']
color: blueviolet;
/*总结：
1、属性选择器优先级同类
2、[属性名]查找所有有该属性的标签
3、[属性名=属性值]精确查找
4、[属性名^=值]以某某值开头
4、[属性名*=值]包含某某值(模糊查询)
*/
</style>
</head>
<body>
<h4 class="h4" owen="oooowennnnn">owen</h4>
<h4 class="h4" owen="zero">zero</h4>
<div>
<p class="p">第1个p</p>
<p class="p">第2个p</p>
<p class="p p3">第3个p</p>
<p class="p">第4个p</p>
<p class="p">第5个p</p>
</div>
<div>
<div>
<h3>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>
<p class="p">第5个p</p>
</div>
</div>
</body>
</html>a标签的四大伪类
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>a标签的四大伪类</title>
<style>
/*一、a的四大伪类*/
a
font-size: 30px;
/*1、标签没有被访问过*/
a:link
color: orange;
/*2、标签被悬浮*/
a:hover
/*鼠标样式*/
/*wait row-resize none text pointer default*/
cursor: pointer;
/*3、标签被激活*/
a:active
color: pink;
cursor: wait;
/*4、标签已被访问过*/
a:visited
color: brown;
</style>
<style>
/*二、reset操作*/
/*在开发中往往用不到四种伪类，且要清除掉系统的默认样式*/
/*就可以如下对a标签进行样式设置：清除系统默认样式 - reset操作*/
a
color: black;
text-decoration: none;
</style>
<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>以上是关于前端 高级选择器 伪类选择器的主要内容，如果未能解决你的问题，请参考以下文章
CSS常用选择器伪元素选择器伪类选择器大全——响应式Web系列学习笔记