复习。

一:类选择器

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. python中的一切皆对象

    python中一切皆对象是这个语言灵活的根本.函数和类也是对象,属于python的一等公民.包括代码包和模块也都是对象.python的面向对象更加彻底. 可以赋值给一个变量可以添加到集合对象中可以作为 ...

  2. 014——C#新建文件夹

    (一)如果不存在路径就新建文件夹 string directory = @"C:\Users\Administrator\Desktop\温控数据\"; if (!Director ...

  3. 洛谷 P1886 滑动窗口 题解

    每日一题 day26 打卡 Analysis 单调队列模板 对于每一个区间,有以下操作: 1.维护队首(就是如果你已经是当前的m个之前那你就可以被删了,head++) 2.在队尾插入(每插入一个就要从 ...

  4. H3CNE学习6 静态路由

    一.相应命令 1.查看路由表 2.直连路由 3.静态路由配置 4.路由器转发数据包 二.静态路由2 1.路由优先级 管理距离即优先级,值越小就越优先 2.路由度量 如果上下都是使用的相同的路由协议那么 ...

  5. PHP利用执行操作符;模拟shell命令

    $out = `ls -la`; echo '<pre>'.$out.'</pre>'; 输出结果: total 10 drwxrwxrwx 1 root root 4096 ...

  6. 洛谷 P1842 奶牛玩杂技 题解

    P1842 奶牛玩杂技 题目背景 Farmer John 养了N(1<=N<=50,000)头牛,她们已经按1~N依次编上了号.FJ所不知道的是,他的所有牛都梦想着从农场逃走,去参加马戏团 ...

  7. pytorch imagenet测试代码

    image_test.py import argparse import numpy as np import sys import os import csv from imagenet_test_ ...

  8. 37、数据源之通用的load和save操作

    一.通用的load和save操作 1.概述 对于Spark SQL的DataFrame来说,无论是从什么数据源创建出来的DataFrame,都有一些共同的load和save操作. load操作主要用于 ...

  9. python模块之psutil

    一.模块安装 1.简介 psutil是一个跨平台库(http://pythonhosted.org/psutil/)能够轻松实现获取系统运行的进程和系统利用率(包括CPU.内存.磁盘.网络等)信息. ...

  10. 区块链阶段1-Linux基础- 1 Linux简介

    对于一般的办公和娱乐我们接触更多的是Windows.但是对于IT从业人员,特别是从事服务器管理以及软件开发的人员来讲,我们需要熟练掌握 Linux/UNIX操作系统的知识.所以,Linux 是众多操作 ...