CSS基本选择器是什么？基本选择器是如何工作
基本选择器介绍
- 基本选择器又分为六种使用方式：如、通用选择器、标签选择器、类选择器、Id选择器、结合元素选择器、多类选择器。
- 基本选择器使用说明表。
| 选择器 | 语法格式 | 含义 | 举例 |
|---|---|---|---|
| 通用选择器 | *{属性：值;} | 通用选择器可以选择页面上的所有元素，并对它们应用样式，用 * 来表示。不建议使用，IE6不支持，给大型网站增加负担。 | *{width: 300px;} |
| 标签选择器 | 标签名{属性：值;} | 标签选择器，匹配对应的HTML的标签。 | h1{color: red;} |
| 类选择器 | .class属性值{属性：值;} | 类选择器，给拥有指定的class属性值的元素设置样式。 | .box{color: red;} |
| Id选择器 | #id属性值{属性：值;} | Id选择器，在一个 HTML 文档中，Id 选择器会使用一次，而且仅一次。Id选择器以#来定义。 | #box{color: red;} |
| 结合元素选择器 | 标签名 .class属性值{属性：值} | 选择器会根据标签名中包含指定的.class属性值的元素。 | p.box {color:red;} |
| 多类选择器 | .class属性值.class属性值{属性：值;} | 通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。注意：在 IE7 之前的版本中，不同平台的 Internet Explorer 都不能正确地处理多类选择器。 | .box.box1{color:red;} |
通用选择器
- 接下来让我们进入通用选择器实践，笔者以嵌入式的形式，将
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>通用选择器</title>
<style>
*{
color: red;
}
</style>
</head>
<body>
<h1>微笑是最初的信仰</h1>
<p>微笑是最初的信仰</p>
</body>
</html>
结果图
标签选择器
- 接下来让我们进入标签选择器实践，笔者以嵌入式的形式，将
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>标签选择器</title>
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>微笑是最初的信仰</h1>
<p>微笑是最初的信仰</p>
</body>
</html>
结果图
注意：标签选择器是指给指定的标签设置样式。
代码块
<!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>标签选择器</title>
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>成功不是击败别人，而是改变自己。</h1>
<h1>微笑是最初的信仰</h1>
<p>微笑是最初的信仰</p>
</body>
</html>
结果图
现在大家应该知道了
p标签为什么没有改变了，因为标签选择器的作用是给指定的标签设置样式的，接下来笔者将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>标签选择器</title>
<style>
h1{
color: red;
}
p{
color:red;
}
</style>
</head>
<body>
<h1>成功不是击败别人，而是改变自己。</h1>
<h1>微笑是最初的信仰</h1>
<p>微笑是最初的信仰</p>
</body>
</html>
结果图
类选择器
- 接下来让我们进入类选择器实践，笔者以嵌入式的形式，使用类的属性值为
.box，来完成HTML页面中的h1标签和p标签中的字体颜色设置为红色。 - 首先我们将
HTML页面中的第一个h1标签字体颜色设置为红色。 代码块
<!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>类选择器</title>
<style>
.box{
color:red;
}
</style>
</head>
<body>
<h1 class="box">成功不是击败别人，而是改变自己。</h1>
<h1>微笑是最初的信仰</h1>
<p>微笑是最初的信仰</p>
</body>
</html>
结果图
注意：只要是
class属性的值为.box的标签，不管它是什么标签，都会将字体颜色设置为红色，其余的CSS样式也是一致。现在我们将第二个
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>类选择器</title>
<style>
.box{
color:red;
}
</style>
</head>
<body>
<h1 class="box">成功不是击败别人，而是改变自己。</h1>
<h1 class="box">微笑是最初的信仰</h1>
<p class="box">微笑是最初的信仰</p>
</body>
</html>
结果图
Id选择器
- 接下来让我们进入
id选择器实践，笔者以嵌入式的形式，通过id属性值为#box，将HTML页面中的h1标签中的字体颜色设置为红色。 代码块
<!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>id选择器</title>
<style>
#box{
color:red;
}
</style>
</head>
<body>
<h1 id="box">成功不是击败别人，而是改变自己。</h1>
</body>
</html>
结果图
注意：使用
id选择器是给拥有指定的id属性值来设置样式，但是要注意在一个HTML页面中id的属性值必须是唯一的。
结合元素选择器
接下来让我们进入结合元素选择器实践，笔者以嵌入式的形式，通过
h2标签class属性值为.box元素的字体颜色，设置为红色。代码块
<!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>结合元素选择器</title>
<style>
h2.box{
color:red;
}
</style>
</head>
<body>
<h2 class="box">成功不是击败别人，而是改变自己。</h2>
<span class="box">成功不是击败别人，而是改变自己。</span>
</body>
</html>
结果图
注意：结合元素选取器执行原理说明如下：首先是先找到
h2标签，然后再去h2标签中找class属性值为.box，如果找到class属性值为.box就给其设置样式。现在大家应该知道了span标签下面的class属性值为.box为什么没有渲染的原因了。
多类选择器
接下来让我们进入多类选择器实践，笔者以嵌入式的形式，将
class属性值包含.box和.box1元素的字体颜色设置为红色。代码块
<!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>多类选择器</title>
<style>
.box.box1{
color:red;
}
</style>
</head>
<body>
<h2 class="box1 box">成功不是击败别人，而是改变自己。</h2>
<span class="box box1">成功不是击败别人，而是改变自己。</span>
<h2 class="box1 ">微笑是最初的信仰</h2>
<span class="box">微笑是最初的信仰</span>
</body>
</html>
注意：多类选择器执行原理说明如下：首先
class属性值可以设置为多个以空格隔开即可，举例：如果一个class属性值包含.box和.box1将其设置样式，通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。现在大家应该知道了单独的class属性值为.box和.box1没有被渲染了。
CSS基本选择器是什么？基本选择器是如何工作的更多相关文章
- css知多少（6）——选择器的优先级
1. 引言 上一节<css知多少(5)——选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的 ...
- css伪类选择器及伪元素选择器
1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...
- css知多少（5）——选择器
1. 引言 从本节开始,就进入本系列的第二个部分——css和html的结合——说白了就是选择器. CSS中定义了样式,如何将这些样式设置到相应的html节点上?就不得不通过选择器.让浏览器知道css选 ...
- CSS基础知识点（二）——选择器
在这一篇中,主要总结一下CSS中的选择器. 参考:http://www.cnblogs.com/webblog/archive/2009/07/07/1518274.html CSS中的选择器主要包括 ...
- css中的7中属性选择器
在CSS的选择符中有七个属性选择符.它们分别是: 1.E[att] 选择具有att属性的E元素. 2.E[att="val"] 选择具有att属性且属性值等于val的E元素. 3. ...
- CSS 简介、语法、派生选择器、id 选择器、类选择器、属性选择器
CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现 ...
- CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...
- css中最基本几个选择器
css中有四种不同的选择器 ①类选择器,又叫class选择器.类选择器{属性名:属性值:...}/*类选择器*/.s1{ font-weight:bold;font-size:16px;}②id选择器 ...
- CSS（一） 引入方式 选择器 权重
Css(一) Cascading Style Sheet 层叠样式表 css注释方式/* */ 一.Css引入方式 1. 行间样式 style=" key:value; " &l ...
- CSS选择器之通配符选择器和多元素选择器
1.通配符选择器 如果希望所有的元素都符合某一种样式,可以使用通配符选择器． 基本语法: *{margin:0; padding:0} 可以让所有的html元素的外边距和内边距都默认为0. 写一段ht ...
随机推荐
- 【ZJOI 2014】力
Problem Description 给出 \(n\) 个数 \(q_i\),给出 \(F_j\) 的定义如下: \[F_j=\sum_{i<j} \frac{q_iq_j}{(i-j)^2} ...
- 【nodejs原理&源码赏析（4）】深度剖析cluster模块源码与node.js多进程（上）
目录 一. 概述 二. 线程与进程 三. cluster模块源码解析 3.1 起步 3.2 入口 3.3 主进程模块master.js 3.4 子进程模块child.js 四. 小结 示例代码托管在: ...
- PlayJava Day021
容器: Collection接口:定义了存取一组对象的方法,其子接口Set和List分别定义了存储方式 List:存储数据有序且可重复 ----> ArrayList Set:存储数据无序且不可 ...
- python爬虫网页解析之parsel模块
08.06自我总结 python爬虫网页解析之parsel模块 一.parsel模块安装 官网链接https://pypi.org/project/parsel/1.0.2/ pip install ...
- Netty服务端Channel的创建与初始化
Netty创建服务端Channel时,从服务端 ServerBootstrap 类的 bind 方法进入,下图是创建服务端Channel的函数调用链.在后续代码中通过反射的方式创建服务端Channel ...
- Saltstack_实战指南02_各主机Pillar信息指定
1. 实战项目GitHub地址 该项目已经放在了GitHub上,地址如下: https://github.com/zhanglianghhh/salt-example-lnmp 2. 主机规划 3. ...
- Linux—vi/vim命令详解
如何在 vi 里搜索关键字 在命令模式下敲斜杆( / )这时在状态栏(也就是屏幕左下脚)就出现了 "/" 然后输入你要查找的关键字敲回车就行了. 如果你要继续查找此关键字,敲字符 ...
- android binder 进程间通信机制1-binder 驱动程序
以下内容只大概列个提纲,若要明白其中细节,还请看源码: 申明:本人菜鸟,希望得到大神指点一二,余心足已 binder 设备:/dev/binder binder 进程间通信涉及的四个角色: Clien ...
- 子传父flase注意点
1==>在子传递数据给父亲的时候, closeBottom(){ this.$emit("closeBottom",false) } false不加引号. 2==>
- 5. IDEA使用
一.IDEA项目结构 二.创建项目 三.快捷键 Alt + Enter // 导包,自动修正代码 ctrl + Y // 删除光标所在行 ctrl + D // 复制光标所在行,插在光标位置下面 ct ...