css选择器对比
2019-06-10 本文已影响0人
听雨轩_dmg
1.标签选择器
标签选择器也就是html中的标签，如<h1>,<p>等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css选择器</title>
<style>
/* 标签选择器 */
p{
font-size: 20px;
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1>勇气</h1>
<p>测试标签选择器</p>
</body>
</html>
结果如图
图一
2.类选择器
类选择器是css代码中最常用到的使用如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css选择器</title>
<style>
/* 类选择器 命名格式 .类选择器名称{}*/
.setRedColor{
color: red;
font-size:15px;
}
</style>
</head>
<body>
<h1 style="color: #333333; font-weight: bold; text-align: center">这是测试的</h1>
<!-- 使用的使用用class调用 -->
<p class="setRedColor">测试类选择器</p>
</body>
</html>
图二
3.id选择器
id选择器和类型选择器类似，命名的时候使用“ # ”号代替“ . ”使用的时候用“ id ”代替“ class ”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css选择器</title>
<style>
/* 类选择器 命名格式 .类选择器名称{}*/
#setGreenColor{
color: green;
font-size:15px;
}
</style>
</head>
<body>
<h1 style="color: #333333; font-weight: bold; text-align: center">这是测试的</h1>
<!-- 使用的使用用class调用 -->
<p id="setGreenColor">测试id选择器</p>
</body>
</html>
图三
4.子选择器
子选择器用法在选择器后用“>”并接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css选择器</title>
<style>
/* 这个就是子选择器 */
.food>li{
border: 1px solid red;
}
</style>
</head>
<body>
<!-- 内联CSS -->
<h1 style="color: #333333; font-weight: bold; text-align: center">这是测试的</h1>
<ul class="food">
<li>食物
<ul class="food">
<li>面条</li>
<br>
<li>馒头</li>
<br>
</ul>
</li>
<br>
<li>蔬菜
<ul>
<li>黄瓜</li>
<li>辣椒</li>
</ul>
</li>
</ul>
</body>
</html>
图四
5.包含选择器也可以说成后代选择器
用法和子选择类似 把“ > ” 替换成 " "空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css选择器</title>
<style>
/* 这个就是子选择器 */
.food li{
border: 1px solid red;
}
</style>
</head>
<body>
<!-- 内联CSS -->
<h1 style="color: #333333; font-weight: bold; text-align: center">这是测试的</h1>
<ul class="food">
<li>食物
<ul>
<li>面条</li>
<br>
<li>馒头</li>
<br>
</ul>
</li>
<br>
<li>蔬菜
<ul>
<li>黄瓜</li>
<li>辣椒</li>
</ul>
</li>
</ul>
</body>
</html>
图五
6.通用选择器
通用选择器是作用于全局的使用如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css选择器</title>
<style>
/* 这个就是子选择器 */
*{
color: red;
}
</style>
</head>
<body>
<!-- 内联CSS -->
<h1 style="color: #333333; font-weight: bold; text-align: center">这是测试的</h1>
<ul>
<li>食物
<ul>
<li>面条</li>
<br>
<li>馒头</li>
<br>
</ul>
</li>
<br>
<li>蔬菜
<ul>
<li>黄瓜</li>
<li>辣椒</li>
</ul>
</li>
</ul>
</body>
</html>
图六
7.伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>初识CSS</title>
<!-- css样式 -->
<style type="text/css">
/* 这个就是伪类选择器 */
a:hover{
color: yellow;
}
</style>
</head>
<body>
<!-- 内联CSS -->
<h1 style="color: #333333; font-weight: bold; text-align: center">这是测试的</h1>
<ul>
<li>食物
<ul>
<!-- 这个就是伪类选择器的使用 就是可以声明一个不存在的标签 -->
<li class="first"> <a href="https://www.baidu.com">面条</a> </li>
<br>
<li>馒头</li>
<br>
</ul>
</li>
<br>
<li>蔬菜
<ul>
<li>黄瓜</li>
<br>
<li>辣椒</li>
<br>
</ul>
</li>
</ul>
</body>
</html>
360截图20190610230556803.jpg
8.并集选择器
各个选择器用逗号“,”隔开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
/* 并集选择器 选择器之间用逗号“,”隔开 */
p, div {
color: red;
font-size: 25px;
}
</style>
<body>
<p>熊大</p>
<div>熊二</div>
<ul>
<li>小猪佩奇</li>
<li>猪爸爸</li>
<li>猪妈妈</li>
</ul>
</body>
</html>
截屏2019-11-1614.35.44.png
