复习。

一:类选择器

1.多类名选择器

  使用场景:某个标签上需要多个类进行描述。

  多个类之间使用空格分开。

  冲突的时候,和类名在html中的先后顺序没有关系,和css中的样式的先后顺序有关系。

  

2.案例

  需求:将几个div标为红色,然后将第一个div还要字体变大为40.

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.red{
color: red;
}
.font20{
font-size: 40px;
}
</style>
</head>
<body>
<div class="red font20">多类名</div>
<div>多类名</div>
<div>多类名</div>
<div class="red">多类名</div>
<div>多类名</div>
<div class="red">多类名</div>
<div>多类名</div>
</body>
</html>

3.效果

  

二:id选择器

1.说明

  使用#

三:通配符选择器

1.通配符选择器

  *   :所有

  ?:一个的意思

2.案例

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
color: red;
} </style>
</head>
<body>
<div class="red font20">多类名</div>
<p>多类名</p>
<span>多类名</pan>
</body>
</html>

3.效果

  

四:标签选择器

1.说明

  标签后面加选择器

  

  

007 CSS基本选择器的更多相关文章

  1. CSS的选择器

    <div id="demo"> <div class="inner"> <p><a href="#" ...

  2. JS实战 · 仿css样式选择器

    代码如下: <html> <head>     <meta http-equiv="Content-Type" content="text/ ...

  3. CSS 后代选择器

    后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起 ...

  4. css后代选择器(div.class中间不带空格)

    如果我要查找<div>上用了.class的元素,查找方法:div.class:中间是不空格的. 以上这种形式为css后代选择器 参考:http://www.w3school.com.cn/ ...

  5. CSS样式选择器优先级

    CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...

  6. css中选择器的使用

    css是英文Cascading Style Sheets的缩写.它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.我们再将html比喻 ...

  7. CSS 派生选择器

    派生选择器 通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁. 在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由 ...

  8. CSS 类选择器

    在 CSS 中,类选择器以一个点号显示: .center {text-align: center} 在上面的例子中,所有拥有 center 类的 HTML 元素均为居中. 在下面的 HTML 代码中, ...

  9. CSS id 选择器

    id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. 下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二 ...

随机推荐

  1. 2019-08-28 redhat linux如何部署禅道服务器(一键安装包)

    linux一键安装包内置了XXD.apache, php, mysql这些应用程序,不需要再单独安装部署. linux一键安装包分为32位和64位两个包,请大家根据操作系统的情况下载相应的包. 一.准 ...

  2. python3.8新特性

    海象运算符(赋值运算符) #原来 def choice(): s = ' jsadlk '.strip() res = isinstance(s, int) if res: return 'int' ...

  3. vbs剪切Excel某一行

    set oExcel = CreateObject( "Excel.Application" ) '创建oExcel对象 oExcel.Visible = false '4) 打开 ...

  4. [Usaco2006 Jan] Redundant Paths 分离的路径

    1718: [Usaco2006 Jan] Redundant Paths 分离的路径 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1132  Solv ...

  5. Flask - 请求响应 | session | 闪现 | 请求扩展 | 中间件

    请求响应 flask的请求信息都在request里 flask的响应方式有四剑客,也可以自定义响应 请求相关信息 # request.method 提交的方法 # request.args get请求 ...

  6. Web开发技术---简单的登录验证

    制作一个APP或系统最基础的是登录界面,下面通过一个简单的登录注册界面的程序,来熟练掌握Web开发的技术. 一.知识点: 1.在网页界面获取用户的输入信息 2.标签的基本应用 3.用户输入结果的错误提 ...

  7. 3 Ways to Force Unmount in Linux Showing “device is busy”

    3 Ways to Force Unmount in Linux Showing “device is busy” Updated August 8, 2019By Bobbin ZachariahL ...

  8. Phoenix 简单介绍

    转载自:https://blog.csdn.net/carolzhang8406/article/details/79455684 1. Phoenix定义 Phoenix最早是saleforce的一 ...

  9. LibreOJ #526. 「LibreOJ β Round #4」子集

    二次联通门 : LibreOJ #526. 「LibreOJ β Round #4」子集 /* LibreOJ #526. 「LibreOJ β Round #4」子集 考虑一下,若两个数奇偶性相同 ...

  10. 力扣152,53题,最大子序列求和and积

    本内容为最大子序列的求和和求积.采用DP的思路, 当前值加上小于之前值,则从该节点重新算起. 这个代码只能返回其结果值,但不能返回最后的子序列(待修改). class Solution: def ma ...