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 选择器,第一个可以定义元素的颜色为红色,第二 ...
随机推荐
- Nginx网站用户认证
一.Nginx网站用户认证 用户认证:用户访问网页时需要输入一个用户名和密码才能打开网页. nginx的默认网页时安装目录下的html/index.html,配置文件在安装目录下的conf目录中的ng ...
- ealsticsearch历史版本下载
ealsticsearch历史版本下载 https://www.elastic.co/cn/downloads/past-releases#elasticsearch
- c++的动态绑定和静态绑定及多态的实现原理(摘)
C++多态的实现原理 为了支持c++的多态性,才用了动态绑定和静态绑定.理解它们的区别有助于更好的理解多态性,以及在编程的过程中避免犯错误. 需要理解四个名词:对象的静态类型:对象在声明时采用的类型. ...
- laravel 依赖注入
<?php interface Animal{ public function attack(); public function talk(); } class People implemen ...
- 《了解python》
编程语言的发展史: 1.机器语言 站在计算机角度,直接用二进制跟计算机直接沟通,直接操控硬件 优点:计算机能够直接读懂,运行速度快 缺点:开发效率低 2.汇编语言 站在计算机角度,用简单的英文标签标识 ...
- 快速开平方取倒数的算法--嵌入式ARM转载
#include<stdio.h> #include<string.h> #include <stdlib.h> /* atof */ /* 计算=1/sqrt(n ...
- 洛谷-P2661 信息传递——有向图中的最小环
题意 给定一个 $n$ 个结点有向图,求其中最小环的大小.($n \leq 200000$). 分析 由于每条点出度都为1且满足传递性,可以用并查集做. 如果有一条从x到y的有向边,那么y就是x的父亲 ...
- ajax跨域-CORS
CORS:跨域资源共享,是一种跨域访问的W3C标准,它允许浏览器可以跨源服务器进行请求,可以让ajax实现跨域访问.出现跨域问题的原因是浏览器同源策略导致的,协议+域名+端口三者一致被认为是同源.网站 ...
- BurpSuite Intruder模块匹配返回包内容
很多时候burpsuite intruder爆破我们是看返回包的长度,那么如何根据返回包的内容来做筛选呢? 这里我用的本地某cms环境做个演示 Intruder模块怎么用的不用介绍了吧 直接进入正题 ...
- ElasticSearch使用C#操作文档
一.ElasticSearch的.net客户端驱动程序 ElasticSearch官方网站提供了两个.net客户端驱动程序,其中Elasticsearch.Net是一个非常底层且灵活的客户端驱动程序, ...