首页 / CSS / css中关于选择器的使用总结
css中关于选择器的使用总结
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了css中关于选择器的使用总结，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2869字，纯文字阅读大概需要5分钟。
内容图文
标签、通配符选择器<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style type="text/css">
<!--
body:标签选择器
*：通配符选择器
.：类选择器
，：并集选择器
CSS属性：
Text-align Center,left,right 文字居中格式
Font-size 18px 设置文字大小
Font-family 微软雅黑,宋体 设置字体
Font-weight Normal默认，bold粗体，100px 设置字体加粗
Font-style Normal默认，italic斜体 设置字体风格
Color 颜色 设置文字颜色
-->
body{
background:url("xia.jpg");
}
p{
font-size:50px;
color:green;
background-color:blue;
width:300px;
height:200px;
}
*{
font-size: 100px;
color: red;
}
</style>
</head>
<body>
<h1>111</h1>
<p>14期威武</p>
</body>
</html>类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.G{
font-size: 200px;
color:red;
}
.o1{
font-size: 200px;
color: blue;
}
.o2{
font-size: 200px;
color: yellow;
}
.g1{
font-size: 200px;
color: green;
}
.l{
font-size: 200px;
color: pink;
}
.e{
font-size: 200px;
color: black;
}
</style>
</head>
<body>
<span class="G">G</span>
<span class="o1">o</span>
<span class="o2">o</span>
<span class="g1">g</span>
<span class="l">l</span>
<span class="e">e</span>
</body>
</html>复合选择器：交集选择器
选择器+选择器（中间没有空格）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
font-size:50px;
}
p.box{
color:red;
}
p#miss{
width: 400px;
height: 300px;
background-color:yellow;
}
</style>
</head>
<body>
<!--其实无非是浏览器寻找标签顺序，第一个找到p.box即可；第二个找到
.box类即可
-->
<p class="box">14期威武</p>
<p class="box">14期霸气</p>
<p id="miss">14期万岁</p>
</body>
</html>后代选择器和子代选择器：实际上就是包含关系
后代选择器：可隔代遗传 选择器+空格+选择器
子代选择器：只能寻找第一个后代 选择器+>+选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box span{
color:red;
}
</style>
</head>
<body>
<!--
下面p标签会找到.box类，由于span是后代选择器选择对象，即使隔代也可继承，所以p标签
下面的span标签也可继承
-->
<p class="box">
<p><span class="miss">14期威武</span>
<span>14期好人</span>
</p>
</p>
<p class="box"><span>14霸气</span></p>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p>span{
color:red;
font-size:40px;
}
p>span{
color:green;
font-size:60px;
}
</style>
</head>
<body>
<!--
此处，由于是子代选择器，所以span只能继承p；span只能继承p；
所以第一个为绿色；第二个为红色
-->
<p>
<p><span>14期威武</span></p>
<span>14期霸气</span>
</p>
</body>
</html以上就是css中关于选择器的使用总结的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的css中关于选择器的使用总结全部内容，希望文章能够帮你解决css中关于选择器的使用总结所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】