CSS选择器:筛选具有相似特征的元素
分类:
1. 基础选择器
1). id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一
语法:#id属性值{}
2). 元素选择器:选择具有相同标签名称的元素
语法: 标签名称{}
注意:id选择器优先级高于元素选择器
3). 类选择器:选择具有相同的class属性值的元素。
语法:.class属性值{}
注意:类选择器选择器优先级高于元素选择器
<!DOCTYPE html>
<html>
<head>
<title>
02基础选择器
</title>
<style>
/* id选择器 */
#myid{
background-color: rgb(41, 74, 219);
font-size: 30px;
text-align: center;
}
/* 元素选择器 */
p{
text-align: center;
color: brown;
font-size: 20px;
}
/* 类选择器 */
.lei{
color: blueviolet;
text-align: center;
border: 12px solid;
padding: 5px;
}
</style>
</head>
<body>
<div id="myid">id选择器:选择具体的id属性值的元素</div>
<p>元素选择器:选择具有相同标签名称的元素</p>
<p class="lei">类选择器</p>
</body>
</html>
运行结果:
2. 扩展选择器:
1). 选择所有元素:
语法: *{}
2). 并集选择器:
选择器1,选择器2{}
3). 子选择器:筛选选择器1元素下的选择器2元素
语法: 选择器1 选择器2{}
4). 父选择器:筛选选择器2的父元素选择器1
语法: 选择器1 > 选择器2{}
5). 属性选择器:选择元素名称,属性名=属性值的元素
语法: 元素名称[属性名="属性值"]{}
6). 伪类选择器:选择一些元素具有的状态
语法: 元素:状态{}
如:超链接标签 <a>
状态:
link:初始化的状态
visited:被访问过的状态
active:正在访问状态
hover:鼠标悬浮状态
<!DOCTYPE html>
<html>
<head>
<title>
02基础选择器
</title>
<style>
/* 1.选择所有元素 */
*{
background:rgb(187, 255, 0);
}
/* 2.并集选择器 */
#myid,div,p,ol,.myclass{
color: rgb(216, 148, 46);
}
/* 3.子选择器 */
ul li{
font-size: 8px;
color: aliceblue;
border: 1px solid;
text-align: center;
}
/* 4.父选择器 */
tr > td{
background-color: rgb(228, 30, 30);
border: 4px solid;
}
/* 5.属性选择器 */
input[type=text]{
border: 13px solid;
}
input[type="password"]{
border: 3px solid;
}
/* 6.伪类选择器 */
a:link{
color: rgb(235, 97, 18);
}
a:hover{
color: rgb(252, 248, 11);
}
a:active{
color: rgb(247, 248, 242);
}
a:visited{
color: rgb(247, 11, 255);
}
</style>
</head>
<body>
<div>并集选择器</div>
<p>并集选择器</p>
<b class="myclass">并集选择器</b><br>
<ol type="A">
<li>并集选择器</li>
<li>并集选择器</li>
<li>并集选择器</li>
</ol>
<i id="myid">并集选择器</i>
<ul>
<li>子选择器</li>
<li>子选择器</li>
<li>子选择器</li>
</ul>
<table>
<tr>
<td>父选择器</td>
<td>父选择器</td>
<td>父选择器</td>
</tr>
<tr>
<td>父选择器</td>
<td>父选择器</td>
<td>父选择器</td>
</tr>
</table>
属性选择器<br>
用户 <input type="text" name="user">
密码 <input type="password" name="passwd"><br>
<a href="#">伪类选择器:选择一些元素具有的状态</a>
</body>
</html>
运行结果: