复习。

一:类选择器

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. js对样式的操作

    本文有:对某个事件的来回操作实现对css样式的来回修改 .比如实现hover效果 <!DOCTYPE html> <html> <head> <meta ch ...

  2. 关于Istio 1.1,你所不知道的细节

    本文整理自Istio社区成员Star在 Cloud Native Days China 2019 北京站的现场分享 第1则 主角 Istio Istio作为service mesh领域的明星项目,从2 ...

  3. JavaScript解析机制之变量提升

    1.什么是预解析? 在当前作用域下,JS 运行之前,会把带有 var 和 function 关键字的事先声明,并在内存中安排好.(这个过程也可以理解为变量提升)然后再从上到下执行 JS 语句(预解析只 ...

  4. flask框架下读取mysql数据 转换成json格式API

    研究了一天 因为需要从数据库拿数据然后转换成json的格式 expose出去为 API 发现一条数据是容易,两条以上我居然搞了这么久 好歹出来了 先贴一下 后面更新 mysql的操作 比较容易了htt ...

  5. Django上传文件和修改date格式

    上传大文件的时候: 修改date数据:

  6. OAuth 2.0攻击

    参考文章:https://www.yuque.com/pmiaowu/web_security_1/oauth 作者:PHPoop 关于OAuth2.0协议的授权流程可以参考下面的流程图: 1.Cli ...

  7. Tensorflow细节-P170-图像数据预处理

    由于6.5中提出的TFRecord非常复杂,可扩展性差,所以本节换一种方式 import tensorflow as tf from tensorflow.examples.tutorials.mni ...

  8. flask入门脚本解释

    创建一个最小的flask应用, 稍做编辑如下, 开启debug调试模式后, 服务器自动加载服务器的修改. 如何自己构建一个优雅的url呢 http方法介绍 http访问urls的方法有get, pos ...

  9. Poj 1743 Musical Theme(后缀数组+二分答案)

    Musical Theme Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 28435 Accepted: 9604 Descri ...

  10. Codeforces Round #557 题解【更完了】

    Codeforces Round #557 题解 掉分快乐 CF1161A Hide and Seek Alice和Bob在玩捉♂迷♂藏,有\(n\)个格子,Bob会检查\(k\)次,第\(i\)次检 ...