复习。

一:类选择器

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. Nginx网站用户认证

    一.Nginx网站用户认证 用户认证:用户访问网页时需要输入一个用户名和密码才能打开网页. nginx的默认网页时安装目录下的html/index.html,配置文件在安装目录下的conf目录中的ng ...

  2. ealsticsearch历史版本下载

    ealsticsearch历史版本下载 https://www.elastic.co/cn/downloads/past-releases#elasticsearch

  3. c++的动态绑定和静态绑定及多态的实现原理(摘)

    C++多态的实现原理 为了支持c++的多态性,才用了动态绑定和静态绑定.理解它们的区别有助于更好的理解多态性,以及在编程的过程中避免犯错误. 需要理解四个名词:对象的静态类型:对象在声明时采用的类型. ...

  4. laravel 依赖注入

    <?php interface Animal{ public function attack(); public function talk(); } class People implemen ...

  5. 《了解python》

    编程语言的发展史: 1.机器语言 站在计算机角度,直接用二进制跟计算机直接沟通,直接操控硬件 优点:计算机能够直接读懂,运行速度快 缺点:开发效率低 2.汇编语言 站在计算机角度,用简单的英文标签标识 ...

  6. 快速开平方取倒数的算法--嵌入式ARM转载

    #include<stdio.h> #include<string.h> #include <stdlib.h> /* atof */ /* 计算=1/sqrt(n ...

  7. 洛谷-P2661 信息传递——有向图中的最小环

    题意 给定一个 $n$ 个结点有向图,求其中最小环的大小.($n \leq 200000$). 分析 由于每条点出度都为1且满足传递性,可以用并查集做. 如果有一条从x到y的有向边,那么y就是x的父亲 ...

  8. ajax跨域-CORS

    CORS:跨域资源共享,是一种跨域访问的W3C标准,它允许浏览器可以跨源服务器进行请求,可以让ajax实现跨域访问.出现跨域问题的原因是浏览器同源策略导致的,协议+域名+端口三者一致被认为是同源.网站 ...

  9. BurpSuite Intruder模块匹配返回包内容

    很多时候burpsuite intruder爆破我们是看返回包的长度,那么如何根据返回包的内容来做筛选呢? 这里我用的本地某cms环境做个演示 Intruder模块怎么用的不用介绍了吧 直接进入正题 ...

  10. ElasticSearch使用C#操作文档

    一.ElasticSearch的.net客户端驱动程序 ElasticSearch官方网站提供了两个.net客户端驱动程序,其中Elasticsearch.Net是一个非常底层且灵活的客户端驱动程序, ...