HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类）
一.标签选择器
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
color: red;
}
h2{
color: green;
}
</style>
</head> <body>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h2>Hello !</h2>
<h2>Hello !</h2>
</body> </html>
二.类选择器
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
color: green;
} .box1 {
font-size: 26px;
}
</style>
</head> <body>
<div class="box box1">Hello World!</div>
<span class="box">Hello World!</span>
</body> </html>
三.ID选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
color: green;
}
</style>
</head>
<body>
<div id="box">Hello World!</div>
</body>
</html>
四.通配符选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
color: red;
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>
五.后代选择器
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li {
color: red;
} ul li a {
color: green;
} .nav li {
color: yellow;
}
</style>
</head> <body>
<ul>
<li>ul li</li>
<li>ul li</li>
<li>ul li</li>
<li>ul li</li>
<li>ul li <a href="">a</a></li>
</ul> <ol>
<li>ol li</li>
<li>ol li</li>
<li>ol li</li>
<li>ol li</li>
<li>ol li</li>
</ol> <ul class="nav">
<li>nav li </li>
<li>nav li </li>
<li>nav li </li>
<li>nav li </li>
<li>nav li </li>
</ul>
</body> </html>
六.子元素选择器
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.nav>a {
color: red;
}
</style>
</head> <body>
<div class="nav">
<a href="#">Hello World</a>
<p>
<a href="#">Hello World</a>
</p>
</div>
</body> </html>
HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类）的更多相关文章
- HTML&CSS基础-子元素的伪类选择器
HTML&CSS基础-子元素的伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html& ...
- 前端学习 --Css -- 子元素的伪类
:first-child 寻找父元素的第一个子元素,在所有的子元素中排序: :last-child 寻找父元素的最后一个子元素,在所有的子元素中排序: :nth-child 寻找父元素中的指定位置子元 ...
- css 选择器 & UI元素的伪类选择器 & 伪元素选择器
UI元素的伪类选择器 1. :focus 用来选取获取焦点事件 2. :enabled 用来指定当元素处于可用状态时的样式 3. :disable 用来指定元素处于不可用时的状态 表单里应用 ...
- CSS伪元素与伪类的区别
伪类和伪元素介绍 伪类:伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id.class.属性等静态的标志.由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能 ...
- css3 伪元素和伪类选择器详解
转自脚本之家:http://www.jb51.net/css/213779.html 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准的选择器章节找到.分别是 CSS2. ...
- 动态修改 dom 元素的伪类样式
最近写代码,需要修改伪类的 content 属性,不想定义两个样式进行切换,而是直接通过 js 进行修改. html 中的伪类(如 a:hover / a:link / class::before / ...
- css系列教程--选择器
css派生选择器:是指在某个样式表或者dom元素的行内定义行内元素的属性,而其他同名样式在其他dom节点无效的样式表定义方式.例如:div ul li{border:1px solid red;}&l ...
- css系列，选择器权重计算方式
CSS选择器分基本选择器(元素选择器,类选择器,通配符选择器,ID选择器,关系选择器), 属性选择器,伪类选择器,伪元素选择器,以及一些特殊选择器,如has,not等. 在CSS中,权重决定了哪些CS ...
- CSS（二）- 选择器 - 伪元素和伪类（思维导图）
伪元素 伪元素可以创建一些文档语言无法创建的虚拟元素.比如:文档语言没有一种机制可以描述元素内容的第一个字母或第一行,但伪元素可以做到(::first-letter.::first-line).同时, ...
随机推荐
- Docker---初识到使用
1.剖析虚拟化技术概念 1)虚拟化是一个主流的技术,虚拟的,看不见的,但是可以落地的,用于资源管理的一项技术: 2)虚拟化的技术诞生的目标就是为了解决资源管理和资源利用的解决方案: 3)虚拟化就是将物 ...
- Zookeeper基础理论
Zookeeper是分布式开源协调服务, 主要用来解决分布式集群中应用系统的一致性问题. 本质上是分布式小文件存储系统. 特性 全局数据一致性(集群中每个服务器保存一份相同的数据副本,Client ...
- Elasticsearch（3）：别名
ES中可以为索引添加别名,一个别名可以指向到多个索引中,同时在添加别名时可以设置筛选条件,指向一个索引的部分数据,实现在关系数据库汇总的视图功能,这就是ES中别名的强大之处.别名是一个非常实用的功 ...
- ubuntu20 使用命令安装 redis
安装 redis sudo apt-get install redis-server -y 配置文件 vi /etc/redis/redis.conf # 设置端口 port # 设置密码 requi ...
- git-代码分支管理
1. git代码分支管理 DEV SIT UAT PET PRE PRD PROD常见环境英文缩写含义 英文缩写 英文 中文 DEV development 开发 SIT System Int ...
- Redis安装使用以及可能的算法实践
layout: post title: 2017-12-05-Redis 入门 tags: - Redis - 实时特征 - UCB, Tompson sampling Redis 是什么? Redi ...
- eclipse 配置opencv
1 准备 eclipse 2017 JDK1.8 opencv 4.40 2 配置 新建java工程 添加jar包 选择opencv-xxx.jar包 加入原生库 选择原生库位置 确认即可,测试 新建 ...
- day67:Vue:es6基本语法&vue.js基本使用&vue指令系统
目录 Vue前戏:es6的基本语法 1.es6中的let特点 1.1.局部作用域 1.2.不存在变量提升 1.3.不能重复声明 1.4.let声明的全局变量不从属于window对象,var声明的全局变 ...
- pmm-server监控mysql
https://blog.csdn.net/RunzIyy/article/details/104635680?utm_medium=distribute.pc_relevant.none-task- ...
- Golang 随机生成中国人姓名
package main import ( "fmt" "math/rand" "time" ) var lastName = []stri ...