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).同时, ...
随机推荐
- 实验1：Mininet源码安装和可视化拓扑工具
一.实验目的 掌握 Mininet 的源码安装方法和 miniedit 可视化拓扑生成工具. 二.实验任务 使用源码安装 Mininet 的 2.3.0d6 版本,并使用可视化拓扑工具生成一个最简拓扑 ...
- 066 01 Android 零基础入门 01 Java基础语法 08 Java方法 02 带参有返回值方法
066 01 Android 零基础入门 01 Java基础语法 08 Java方法 04 带参有返回值方法 本文知识点:带参有返回值方法 说明:因为时间紧张,本人写博客过程中只是对知识点的关键步骤进 ...
- Ubuntu通过iptables防止ssh暴力破解
步骤 安装iptables-persistent用于保存iptables规则 配置iptables规则 实时更新iptables规则以拦截IP访问 安装iptables-persistent sudo ...
- shell-的变量-全局变量
shell变量基础及深入 1. 变量类型 变量可分为两类:环境变量(全局变量)和局部变量. 环境变量也可称为全局变量,可以在创建他们的shell及其派生出来的任意子进程shell中使用.局部变量只 ...
- 2017-18一《电子商务概论》本科作业-商A1551
第1次作业: 1 2017年双十一新营销方案 2 销售额达1682亿元分析组成及了解猫狗大战 3 破亿店铺举例. 第2次作业: 1.你如何来定义和理解电子商务?电子商务对社会经济带了怎样的影响,企业. ...
- Springboot项目集成JPush极光推送（Java SDK）
1.由于项目的需求,需要在Android APP上实现消息推送功能,所以引用了极光推送(官网:https://www.jiguang.cn/, 文档:http://docs.jiguang.cn/) ...
- JSON,数组根据字段分组
function GroupbyName(data, Name) { //data数据源,Name 根据什么字段分组 var map = {}, dest = []; for (var i = 0; ...
- golang的http库使用代理
1.先上代码 package main import ( "crypto/tls" "flag" "fmt" "io/ioutil ...
- 扫描仪扫描文件处理-图像扫描加工到生成PDF步骤简述[JAVA版]
另参见:https://www.cnblogs.com/whycnblogs/p/8034276.html 详细见:https://github.com/barrer/scan-helper 用途: ...
- fedora30平台安装docker 19.03
一,下载docker 1,说明:docker的打包对于fedora的支持很及时, 所以在fedora 30/31上都可以直接使用官方的rpm包 下载地址: https://download.docke ...