CSS中常用的选择器
一.基本选择器
1.标签选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style>
a{
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<a href="www.php.cn">php中文网</a><br>
<span>选择a标签的内容进行样式修改</span>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2.id选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style>
#open{
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<a id="open" href="www.php.cn">php中文网</a><br>
<span>选择标签id为open的内容进行样式修改</span>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3.类选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.open{
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<a class="open" href="www.php.cn">php中文网</a><br>
<span>选择标签class属性为open的内容进行样式修改</span>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4.属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
a[class*="o"]{
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<a class="open" href="www.php.cn">class属性带o</a><br>
<a class="open" href="www.php.cn">class属性带o</a><br>
<a class="open" href="www.php.cn">class属性带o</a><br>
<a class="open" href="www.php.cn">class属性带o</a><br>
<a class="epen" href="www.php.cn">class属性不带o</a><br>
<span>选择标签class属性为open的内容进行样式修改</span>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------
二.位置选择器
1.层级选择器/后代选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器/层级选择器,意思是明确指定位置方向</title>
<style>
div a{
font-size: 30px;
color: lightblue;
}
</style>
</head>
<body>
<div class="">
<a href="">层级选择器选择本内容修改样式</a><br>
<a href="">层级选择器选择本内容修改样式</a><br>
<span>后代选择器/层级选择器,意思是明确指定位置方向</span>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2.子选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子选择器,指定的是父子关系</title>
<style>
div > a[class$="css"]{
font-size: 30px;
color: lightblue;
}
</style>
</head>
<body>
<div class="">
<a class="css" href="">层级选择器选择本内容修改样式</a><br>
<a href="">层级选择器选择本内容修改样式</a><br>
<span>子选择器,指定的是父子关系</span>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3.相邻选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相邻选择器选择器,意思是选择符合属性之后的元素之后的一条或多条元素</title>
<style>
div a[class$="css"]~*{
font-size: 30px;
color: lightblue;
}
</style>
</head>
<body>
<div class="">
<a class="" href="">层级选择器选择本内容修改样式</a><br>
<a class="css" href="">层级选择器选择本内容修改样式</a><br>
<a class="" href="">层级选择器选择本内容修改样式</a><br>
<a class="" href="">层级选择器选择本内容修改样式</a><br>
</div>
<span>相邻选择器,意思是选择符合属性之后的一条或多条元素<元素</span>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4相邻兄弟选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相邻兄弟选择器,意思是符合属性之后的一条标签元素</title>
<style>
div a[class$="css"] + span{
font-size: 30px;
color: lightblue;
}
div a[class$="css"] - span{
font-size: 30px;
color: lightblue;
}
</style>
</head>
<body>
<div class="">
<a class="" href="">层级选择器选择本内容修改样式</a><br>
<span>相邻兄弟选择器,使用负值"-"不生效</span>
<a class="css" href="">层级选择器选择本内容修改样式</a>
<span>相邻兄弟选择器,意思是符合属性之后的标签</span>
<a class="" href="">层级选择器选择本内容修改样式</a><br>
<a class="" href="">层级选择器选择本内容修改样式</a><br>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
5.群组选择器
6.为类选择器:链接
7.伪类选择器:位置
8.伪类选择器:根据子元素数量选择
9.特殊选择器
班主任老师你好,我作业没写完太晚了回头再补
