007 CSS基本选择器
复习。
一:类选择器
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基本选择器的更多相关文章
- CSS的选择器
<div id="demo"> <div class="inner"> <p><a href="#" ...
- JS实战 · 仿css样式选择器
代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/ ...
- CSS 后代选择器
后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起 ...
- css后代选择器(div.class中间不带空格)
如果我要查找<div>上用了.class的元素,查找方法:div.class:中间是不空格的. 以上这种形式为css后代选择器 参考:http://www.w3school.com.cn/ ...
- CSS样式选择器优先级
CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...
- css中选择器的使用
css是英文Cascading Style Sheets的缩写.它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.我们再将html比喻 ...
- CSS 派生选择器
派生选择器 通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁. 在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由 ...
- CSS 类选择器
在 CSS 中,类选择器以一个点号显示: .center {text-align: center} 在上面的例子中,所有拥有 center 类的 HTML 元素均为居中. 在下面的 HTML 代码中, ...
- CSS id 选择器
id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. 下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二 ...
随机推荐
- python中的一切皆对象
python中一切皆对象是这个语言灵活的根本.函数和类也是对象,属于python的一等公民.包括代码包和模块也都是对象.python的面向对象更加彻底. 可以赋值给一个变量可以添加到集合对象中可以作为 ...
- 014——C#新建文件夹
(一)如果不存在路径就新建文件夹 string directory = @"C:\Users\Administrator\Desktop\温控数据\"; if (!Director ...
- 洛谷 P1886 滑动窗口 题解
每日一题 day26 打卡 Analysis 单调队列模板 对于每一个区间,有以下操作: 1.维护队首(就是如果你已经是当前的m个之前那你就可以被删了,head++) 2.在队尾插入(每插入一个就要从 ...
- H3CNE学习6 静态路由
一.相应命令 1.查看路由表 2.直连路由 3.静态路由配置 4.路由器转发数据包 二.静态路由2 1.路由优先级 管理距离即优先级,值越小就越优先 2.路由度量 如果上下都是使用的相同的路由协议那么 ...
- PHP利用执行操作符;模拟shell命令
$out = `ls -la`; echo '<pre>'.$out.'</pre>'; 输出结果: total 10 drwxrwxrwx 1 root root 4096 ...
- 洛谷 P1842 奶牛玩杂技 题解
P1842 奶牛玩杂技 题目背景 Farmer John 养了N(1<=N<=50,000)头牛,她们已经按1~N依次编上了号.FJ所不知道的是,他的所有牛都梦想着从农场逃走,去参加马戏团 ...
- pytorch imagenet测试代码
image_test.py import argparse import numpy as np import sys import os import csv from imagenet_test_ ...
- 37、数据源之通用的load和save操作
一.通用的load和save操作 1.概述 对于Spark SQL的DataFrame来说,无论是从什么数据源创建出来的DataFrame,都有一些共同的load和save操作. load操作主要用于 ...
- python模块之psutil
一.模块安装 1.简介 psutil是一个跨平台库(http://pythonhosted.org/psutil/)能够轻松实现获取系统运行的进程和系统利用率(包括CPU.内存.磁盘.网络等)信息. ...
- 区块链阶段1-Linux基础- 1 Linux简介
对于一般的办公和娱乐我们接触更多的是Windows.但是对于IT从业人员,特别是从事服务器管理以及软件开发的人员来讲,我们需要熟练掌握 Linux/UNIX操作系统的知识.所以,Linux 是众多操作 ...