[华为云在线课程][大话CSS][学习笔记][第2章][CSS选择器]
【摘要】 1，通配符选择器和元素选择器 什么是通配符选择器CSS的通配符选择器是一种比较特殊的选择器，用’*'表示。格式：*{property:value;...}含义：可以选中页面中所有元素，对所有元素都生效用途：一般用于设置一些初始化的公共属性例如：*{margin:0px;padding:0px;} 什么是元素选择器使用某个HTML元素名作为选择器是一种最简单的选择器格式：E{property...
1，通配符选择器和元素选择器
什么是通配符选择器
- CSS的通配符选择器是一种比较特殊的选择器，用’*'表示。
- 格式：
*{property:value;...} - 含义：可以选中页面中所有元素，对所有元素都生效
- 用途：一般用于设置一些初始化的公共属性
- 例如：
*{margin:0px;padding:0px;}
什么是元素选择器
- 使用某个HTML元素名作为选择器
- 是一种最简单的选择器
- 格式：
E{property:value;...} - 例如：
<h1>华为手机发布会</h1>
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
*
{
margin: 0px;
padding: 0px;
}
h1
{
color: red;
background: blue;
}
p
{
background-color: green;
}
</style>
</head>
<body>
<div style="background-color: yellow;">华为路由器</div>
<p>使用5G技术</p>
<ul>
<li>5G技术是下一代通信技术</li>
</ul>
<h1>
h1标签这一章继续出镜
</h1>
</body>
</html>
2，id选择器和类选择器
id选择器
- id是指我们可以在HTML标签上设置一个id属性的值
- id属性的特点是一个HTML文档，只能有唯一的一个，不能重复
- 格式为：
#id{property:value;...} - 含义：可以选中页面中含有id属性值的元素
- 例如：
<div id="content">华为5G技术</div>
类选择器
- 格式：
.class{property:value;...} - 类选择器中的类指的是class属性
- 有相同class属性值的都会被选中
- class与id相比不具有唯一性
- class属性的值通常以字母开头中间不能有空格
- 类选择器可以和元素选择器组合使用
- 例如：
<div class="title">华为5G技术</div>
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
/* #title,#title2
{
color: red;
} */
/* .title
{
color: blue;
} */
.phone
{
font-size: 30px;
}
p.phone
{
color: red;
}
</style>
</head>
<body>
<h1 id="title">我是出镜率最高的h1</h1>
<h2 id="title2">我是出镜率不高的h2</h2>
<div class="title">华为5G技术</div>
<div class="phone">p40</div>
<div>路由器</div>
<div>智慧屏</div>
<div class="phone">mate40</div>
<p class="phone">nova</p>
</body>
</html>
3，属性选择器和伪类选择器
属性选择器
- 属性选择器是用于对具有某种属性的元素设置CSS样式
- 格式为：
E[attribute]{property:value;...} - E代表元素，[]表示元素的属性
- 属性的种类分为：
- [attribute]用于选取指定属性（attribute）的元素
- [attribute=value]用于选取指定属性（attribute）和指定属性值（value）的元素
- [attribute~=value]用于选取属性值中包含指定值的元素
- [attribute|=value]用于选取以指定值开头的属性值的元素
- 例如：
<div title="spring">春风十里</div>
伪类选择器
- 伪类是指那些处在一定状态的元素
- 伪类以冒号开头
- 伪类选择器：通过伪类来选中相应元素进而添加样式的选择器
- 伪类名可以单独使用，也可以和其他选择器一起使用
- 一般伪类选择器通常和元素名称一起使用，用于选中某一元素的伪类
- 元素选择符和冒号之间不能有空格
- 伪类选择器最喜欢和超链接（a元素）一起使用
- 伪类如下：
:link表示未被访问的链接:visited表示已被访问的链接:hover鼠标经过链接上方时的状态:active链接被激活时的状态- 这个顺序很重要!
- 例如：
<a href="https://www.huawei.com">华为官网</a>
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
/* p[title]
{
color: red;
} */
/* p[title="huawei"]
{
color: blue;
} */
/* p[title~="wei"]
{
color: yellow;
} */
/* p[title|="hua"]
{
color: pink;
} */
/* ************************************************* */
a:link
{
color: red;
}
a:visited
{
color: blue;
}
a:hover
{
color: green;
}
a:active
{
color: pink;
}
</style>
</head>
<body>
<p title="huawei">华为云课程</p>
<a href="https://www.huawei.com">华为</a>
</body>
</html>
4，派生选择器
后代选择器
- 后代选择器主要是用来选择某个元素的后代元素
- 格式为：
父元素 子元素{property:value;...} - 注意点：父元素与子元素之间至少有一个空格，可以有很多空格
- 例如：
p span{color:red;}
子元素选择器
- 格式为：
父元素>子元素{property:value;...} - 用来选择作为某一个元素子元素的元素
- 与后代选择器的区别是后代选择器选的是所有子元素，而子元素选择器只选第一级子元素
- 例如：
p>span{color:red;}
相邻兄弟选择器
- 格式为：
父元素 + 子元素{property:value;...} - 用来选择紧跟在一个元素之后的兄弟元素
- 这两个相邻元素一定是同级元素
- 例如：
div + p{color:red;}
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
span
{
color: red;
}
/* p > span{color: yellow;} */
span + span
{
color: yellow;
}
div + p
{
color: pink;
}
</style>
</head>
<body>
<div>华为云: <span>HCIA认证</span></div>
<p>华为云:
<span>HCIP认证
<span>孙子span</span>
</span>
<span>HCIE认证</span>
</p>
</body>
</html>
5，选择器权重
什么是选择器的权重
- 权重决定了你CSS规则怎样被浏览器解析直到生效。“CSS权重关系到你的CSS规则是怎样显示的”。
- 当很多的规则被应用到某一个元素上时，权重是一个决定哪种规则生效，或者是优先级的过程。
- 每个选择器都有自己的权重。你的每条CSS规则，都包含一个权重级别。这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中。
- 如果两个选择器同时作用到一个元素上，权重高的生效。
权重规则
- 通配符选择器的权重：0
- 标签选择器的权重：1
- 类、伪类、属性选择器的权重：10
- id选择器的权重：100
- 内联样式的权重：1000
- 特殊处理：!important(强制使用)
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>权重</title>
<style>
div
{
color: green /*!important*/;
color: blue;
}
.title
{
color: yellow;
}
#title
{
color: pink; /*100*/
}
div#title
{
color: orange; /*1+100=101*/
}
</style>
</head>
<body>
<!-- <div id="title" class="title" style="color: gray;">华为云方案</div> -->
<div id="title" class="title">华为云方案</div>
</body>
</html>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）