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 选择器,第一个可以定义元素的颜色为红色,第二 ...
随机推荐
- ISCC之web2
Php代码审计 PHP代码 <?php error_reporting(0); require 'flag.php'; $value = $_GET['value']; $password = ...
- IDEA 使用教程(破解2019.1.1)
2019-08-02更新 最新破解方法: ZKVVPH4MIO-eyJsaWNlbnNlSWQiOiJaS1ZWUEg0TUlPIiwibGljZW5zZWVOYW1lIjoi5o6I5p2D5Luj ...
- IDEA实用教程(十)—— 配置Maven的全局设置
使用之前需要提前安装好Maven 第一步 第二步
- 分布式调度平台XXL-JOB源码分析-调度中心
架构图 上图是我们要进行源码分析的2.1版本的整体架构图.其分为两大块,调度中心和执行器,本文先分析调度中心,也就是xxl-job-admin这个包的代码. 关键bean 在application.p ...
- 如何解决redis的并发竞争问题?
这个也是线上非常常见的一个问题,就是多客户端同时并发写一个key,可能本来应该先到的数据后到了,导致数据版本错了.或者是多客户端同时获取一个key,修改值之后再写回去,只要顺序错了,数据就错了. 而且 ...
- python+selenium+chrome初级自动化操作
例1. #coding=utf- from selenium import webdriver import os,time chromedriver = "C:\Users\AppData ...
- Effective C++读书笔记(转)
第一部分 让自己习惯C++ 条款01:视C++为一个语言联邦 一.要点 ■ c++高效编程守则视状况而变化,取决于你使用c++的哪一部分. 二.扩展 将c++视为一个由相关语言组成的联邦而非单一语言会 ...
- [JSOI2018]战争
题目描述 九条可怜是一个热爱读书的女孩子. 在她最近正在读的一本小说中,描述了两个敌对部落之间的故事.第一个部落有 nnn 个人,第二个部落有 mmm 个人,每一个人的位置可以抽象成二维平面上坐标为 ...
- java之比较器
java中的比较器有两种: 1.实体类实现Comparable接口,并实现其中的compareTo方法 2.在外部定义实现Comparator接口的比较器类,并实现其中的compare方法 Compa ...
- Ultra Edit中的数据对齐
有时会用到Ultra Edit的数据对齐功能.比如,要求64个符号一组,从低位开始对齐.这时,如果数据长度不是一行长度的整数, 就会产生高位对齐.低位不足的问题.为了调整,往往需要逐行调整,很不方便. ...