Web前端入门学习(3)——CSS选择器

发布时间:2020-07-27 20:02:14 作者:小倩_小倩
来源:网络 阅读:458

CSS选择器

  1. id选择器

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#box{width:200px;height:200px;border:2px solid #f3f3f3;background:blue;margin:100px auto;}
/* id 选择符 */
</style>
</head>
<body>
<div id="box">我是一个盒子——块状模型</div>
</body>
</html>

 注意:id选择器,在<style>中,在属性名前应加上一个“#”号,代表引用。


2.class选择器

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box1{width:200px;height:200px;background:red;}
.box2{border:2px solid #333;background:blue;}
/* class 选择符 */
</style>
</head>
<body>
<div class="box1">我是第一个盒子</div>
<div  class="box2 box1">我是第二个盒子</div>
<div  class="box1">我是第三个盒子,样式跟第一个盒子一样</div>
</body>
</html>

 注意:class选择器,在<style>中,在属性名前应加上一个“.”号,代表引用。

 


  温馨提示Web前端入门学习(3)——CSS选择器

     id选择器和class选择器的区别:id名称是文档唯一且不可重复出现的,

    class选择器名称是可重复使用的,因此也称为类选择器。


3.标签选择器

 顾名思义,是根据标签名字来进行匹配样式的选择器。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p{width:100px;height:100px;background:blue;}
div {width:50px;height:50px;background:red;margin-bottom:10px;}
/* 标签 选择符 */
</style>
</head>
<body>
<div>块</div>
<div>块</div>
<div>块</div>
<p>p1</p>
<p>p1</p>
<p>p1</p>
</body>
</html>

4.群组选择器

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#box1,#box2,#box3{width:100px; height:100px; background:blue;}
/* 群组  选择符 */
</style>
</head>
<body>
<div id="box1">块</div>
<div id="box2">块</div>
<div id="box3">块</div>
</body>
</html>

5.包含选择器

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
div span p{width:100px; height:100px; background:blue;}
/* 包含  选择符 */
</style>
</head>
<body>
<div>
<p>p1</p>
</div>
<div>
<p>p2</p>
  <span>
  <p>p3</p>
  </span>
</div>
<div>块</div>
<p>p1</p>
<p>p1</p>
<p>p1</p>
</body>
</html>

 不难看出,包含选择器中,只有在div里面的span中的p标签的内容才有变化。

6.通配符

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
*{font:20px/30px;color:#e3e3e3;text-align:center;}
/* 包含  选择符 */
</style>
</head>
<body>
<div>
<p>我是小倩加油站~~</p>
</div>
<div>
<p>哎呦喂</p>
  <span>
  <p>嘿嘿嘿~</p>
  </span>
</div>
<div>干巴爹~</div>
<p>哎呀~</p>
<p>嘻哈~</p>
<p>哟哟~</p>
</body>
</html>

7.选择器优先级

 前面介绍了这么多选择器,接下来该说说这些选择器的优先级,如果在同一文档中出现不同的选择器,应该表现何种样式,于是优先级就诞生了。

 选择器优先级

    标签选择器  <  class选择器  <  id选择器  <  style行间样式 < js


 温馨提示Web前端入门学习(3)——CSS选择器

    如果同样的选择器出现文档中,默认后者覆盖前者的选择器,则表现为后面选择器的样式。


推荐阅读:
  1. web前端入门到实战:css3动画 Transition
  2. Django 入门学习(3)

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css 选择器 入门学习

上一篇:在Docker容器中执行timedatectl报错:Failed to create bus con

下一篇:XtraBackup 备份还原 MySQL 5.6 数据库

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》