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 ...
随机推荐
- 用户APC的执行过程
Windows内核分析索引目录:https://www.cnblogs.com/onetrainee/p/11675224.html 用户APC的执行过程 一.一个启发式问题 有一个问题,线程什么时候 ...
- SpringCloud的入门学习之概念理解、Ribbon负载均衡入门
1.Ribbon负载均衡,Spring Cloud Ribbon是基于Netflix Ribbon实现的一套客户端.负载均衡的工具. 答:简单的说,Ribbon是Netflix发布的开源项目,主要功能 ...
- C# OpenCVSharp使用SetMouseCallback设置回调方法，报错"向非托管代码传递委托时，托管应用程序必须让这些委托保持活动状态，直到确信不会再次调用它们。"
一.描述问题 当非托管代码调用托管应用程序的委托的时候,经常会报错“托管调试助手 "CallbackOnCollectedDelegate" Message=托管调试助手 &q ...
- Inherit from the Business Class Library Class 继承自Business类(EF)
In this lesson, you will learn how to implement business classes for your application using the Busi ...
- JS基础语法---JSON格式的数据
1. 对象: 有属性和方法,特指的某个事物 对象: 一组无序属性的集合的键值对,属性的值可以是任意的类型 2.JSON格式的数据:一般都是成对的,是键值对, json也是 ...
- HTML基础——表格的应用
一.表格标签 1.基本格式: 每个表格由 table 标签开始. 每个表格行由 tr 标签开始. 每个表格数据由 td 标签开始. 例如: <html> <head> < ...
- linux基本命令的操作
---恢复内容开始--- ----------------------------=========================文件与目录操作cd /home 进入’/homw’目录cd … 返回 ...
- 矩阵的运算：Python语言实现
一.矩阵的加减法 import numpy as np #这里是矩阵的加法 ar1=np.arange(10).reshape(10,1) ar1 ar2=np.arange(10).reshape( ...
- SSM框架中mapper和mapping.xml文件在同一个包下需要的配置
前言 当我们在开发过程中,由于maven项目本身的限制,我们不能直接把我们的mapper.xml文件和对应mapper.java接口文件放到一起,也就是不能直接放在java包中,如图: 因为mave ...
- Thread <number> cannot allocate new log, sequence <number>浅析
有时候,你会在ORACLE数据库的告警日志中发现"Thread <number> cannot allocate new log, sequence <number> ...