CSS02：选择器分类
选择页面上某一类元素
基本选择器
标签选择器、class选择器、id选择器
生效优先级：id选择器 > class选择器 > 标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
<style>
/*标签选择器，"标签名"选择页面上所有这个标签的元素*/
h1{
color: azure;
background: aqua;
border-radius: 10px;
}
p{
color: red;
font-size: 50px;
}
/*class选择器，".class值"选择所有class属性值相同的标签元素*/
/*用于标签分类管理*/
.activate{
color: chartreuse;
}
/*id选择器，"#id值"选择id属性值唯一的那个标签元素*/
/*用于全局唯一定位标签*/
#unique{
color: burlywood;
}
</style>
</head>
<body>
<h1>一级标题</h1>
<h1 class="activate">一级标题</h1>
<h1 class="activate">一级标题</h1>
<h1 id="unique">一级标题</h1>
<p>第一段</p>
</body>
</html>
层次选择器
后代选择器、子选择器、相邻选择器、通用选择器
选择范围大的会覆盖范围小的，建议使用顺序为后代选择器、子选择器、通用选择器、相邻选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
<style>
/*后代选择器（所有层级），"A B"选择A标签后面所有层级的B标签*/
body p{
color: red;
}
/*子选择器（下一层级），"A>B"选择A标签下一层级所有的B标签*/
body>p{
color: green;
}
/*相邻选择器（下一个），"A+B"选择class值为A的下一个相邻的B标签*/
.activate+p{
color: blue;
}
/*通用选择器（同一层级），"A~B"选择A标签后面所有同层级的B标签*/
#unique~p{
color: blueviolet;
}
</style>
</head>
<body>
<p>p1</p>
<p class="activate">p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p class="activate">p7</p>
<p id="unique">p8</p>
<p>p9</p>
<p>p10</p>
</body>
</html>
伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
<style>
/*伪类选择器："A:B"*/
/*选择列表第一行*/
li:first-child{
color: red;
}
/*选择列表的最后一个行*/
li:last-child{
color: blueviolet;
}
/*选择同级的第n个标签，且这标签也是p标签才有效*/
p:nth-child(6){
color: green;
}
/*选择同级的第n个p标签，只计算p标签的个数*/
p:nth-of-type(1){
color: green;
}
/*鼠标已点击效果，必须写在hover和active的前面*/
a:visited{
color: red;
}
/*鼠标悬停效果*/
a:hover{
color: gray;
}
/*鼠标点击效果*/
a:active{
color: yellow;
}
</style>
</head>
<body>
<h1>伪类选择器</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<p>p4</p>
<p>p5</p>
<a href="https://www.yuankexue.cn">看我变色</a>
</body>
</html>
属性选择器（最常用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
<style>
/*class选择器、后代选择器*/
.demo a{
float: left; /*块元素会独占一行，让多行内容浮上来，从左到右在一行显示*/
display: block; /*转为块元素，可以设置高度和宽度*/
height: 50px; /*高度*/
width: 50px; /*宽度*/
border-radius: 10px; /*圆角*/
background: aqua; /*背景色*/
text-align: center; /*对齐*/
color: grey; /*字体颜色*/
text-decoration: none; /*下划线*/
margin-right: 5px; /*右边距*/
line-height: 50px; /*行高*/
font: bold 20px/50px "Times New Roman"; /*字体大小/高度*/
}
/*属性选择器，"标签[属性(=值)...]"选择拥有指定属性的标签*/
/*
=：等于
*=：包含
^=：开头
$=：结尾
*/
/*选择拥有id属性的a标签*/
a[id]{
color: red;
}
/*选择class属性含有"links"和first的a标签*/
a[class*="links term"]{
background: blue;
}
/*选择href属性中以https开头的a标签*/
a[href^=https]{
color: blueviolet;
}
/*选择href属性中以pdf结尾的a标签*/
a[href$=pdf]{
color: yellow;
}
</style>
</head>
<body>
<p class="demo">
<a href="https://www.yuankexue.cn" class="links term first">1</a>
<a href="" class="links term active" target="_blank" title="2">2</a>
<a href="images/123.png" class="links term">3</a>
<a href="images/123.jpg" class="links term">4</a>
<a href="images/123.html" class="links first">5</a>
<a href="abc">6</a>
<a href="abc.pdf" class="links">7</a>
<a href="abc.doc" class="term">8</a>
<a href="./file" class="first">9</a>
<a href="./file" id="first">10</a>
</p>
</body>
</html>
浙公网安备 33010602011771号