H5教程（二），CSS入门（一）选择器
这是我的第二篇博客，H5教程CSS入门，适合刚开始学习H5的新手，让我们共同进步。
1. CSS简介
1.1 CSS是什么？
CSS称为样式层叠表，是用于增强或控制网页样式，并允许将样式信息与网页内容分离的一种标记性语言。
1.2 我们为什么要使用CSS？
1.为了方便样式的复用，方便网站后期维护。
2.为了达到页面的精准控制，实现精美复杂的页面。
简单点说，CSS就是为了让你的网页更加好看。前面学的HTML相当于你买了一个毛坯房，虽然结构有了，但是实在是太难看了，不能住人，所以你就需要CSS来给你装修一下。
2.CSS基本语法
2.1 CSS的三种链接方式
<div style="all: inherit;"></div>
2.1.1行内样式表
1.将CSS样式与HTML代码，完全糅杂在一起，不符合W3C关于"内容与表现分离"的基本规范，不利于后期维护。
2.优先级最高，但是不推荐使用。
2.1.2内部样式表
<style type="text/css"></style>
1.一定程度的将CSS样式与HTML代码分离，但是分离不够彻底，无法实现样式复用。
2.优先级低于行内样式表。
<link rel="stylesheet" type="text/css" href="02.应用CSS的三种方法.css"/>
2.1.3外部样式表
1.实现了CSS样式与HTML代码的彻底的分离，符合W3C的规范，方便样式复用与维护。
2.优先级低于内部样式表。
3.以后开发推荐使用。
2.1.4扩展阅读（导入外部样式表的另一种方式）
<style type="text/css">
@import url("02.");
</style>
【两种导入方法的区别】
1.link标签是标准的HTML标签，而import不是。
2.link可以连接各种样式的文件，而import只能导入CSS文件。
3.link使用的是链接的方式，相当于HTML与CSS文件的桥梁。
import使用的是导入的方式，会在文档加载时，将CSS的代码导入到HTML中。
4.link在网页边加载的时候边链接CSS文件，而import会在网页完全加载之后，在导入CSS文件。
2.2CSS常用选择器
2.2.1标签选择器
1.写法：HTML标签名{样式属性：样式属性值；--}
2.作用选中页面中所有对应的标签。
2.2.2类选择器
1.写法：.选择器名称{}
调用：在需要修改样式的标签上，使用class="选择器名称"，调用对应选择器。
2.作用：修改所有调用选择器的标签。
3.优先级高于标签选择器。
2.2.3ID选择器
1.写法：#选择器名称{}
调用：在需要修改样式的标签上，使用id="选择器名称"，调用对应选择器。
2.ID是唯一的，同一页面只能有一个ID
3.优先级大于class选择器。
2.2.4通用选择器
1.写法：*{}
2.作用：选中页面中所有标签。
3.优先级最低。
2.2.5后代选择器
1.写法：选择器1 选择器2 选择器3...{}（中间加空格）
例子：div .li{}需满足，div里面的class="li" 的元素。可以是子代，也可以是后代。
2.2.6子代选择器
1.写法：选择器1>选择器2>选择器3...{}（大于号隔开）
例如：div>ul{}则ul必须是div的直接子代。
2.优先级：近者优先，越精确越优先。
2.2.7交集选择器
1.写法：选择器1选择器2...{}（中间什么都不写）
例如：.li#li{}元素必须同时具备class="li",id="li"才能生效。
2.2.8并集选择器
1.写法：选择器1,选择器2...{}（用逗号隔开）
例如：.li,#li{}元素只要具备class="li"或者id="li"就能生效。
2.2.9伪类选择器
1.写法：选择器名称：伪类状态{}
2.常用伪类状态
link：未访问状态
visited：已访问状态
hover：鼠标之上状态
actived：激活选定状态
focus：获得焦点（input常用）
3.超链接多种伪类共存时顺序：
link（visited）hover actived
4.使两个控件同时对鼠标事件做出反应的写法：
共同父容器选择器：伪类状态 控件选择器{
对应控件事件}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS常用选择器</title> <!--页面中插入CSS的写法，需使用style标签包裹。type="text/css"-->
<style type="text/css"> li{
color: red;
}
/*【标签选择器】
* 1.写法：HTML标签名{样式属性：样式属性值；--}
* 2.作用选中页面中所有对应的标签。*/
.li{
color: orange;
}
/*【类选择器】
* 1.写法：.选择器名称{}
* 调用：在需要修改样式的标签上，使用class="选择器名称"，调用对应选择器。
* 2.作用：修改所有调用选择器的标签。
* 3.优先级高于标签选择器。*/
#li{
color: yellow;
}
/** 【ID选择器】
* 1.写法：#选择器名称{}
* 调用：在需要修改样式的标签上，使用id="选择器名称"，调用对应选择器。
* 2.ID是唯一的，同一页面只能有一个ID
* 3.优先级大于class选择器。*/
*{
font-size: 20px;
background-color: aqua;
}
/*【通用选择器】
* 1.写法：*{}
* 2.作用：选中页面中所有标签。
* 3.优先级最低。*/
div li{
color: green;
}
/*【后代选择器】
* 1.写法：选择器1 选择器2 选择器3...{}
* 例子：div .li{}需满足，div里面的class="li" 的元素。可以是子代，也可以是后代。
* 【子代选择器】
* 1.写法：选择器1>选择器2>选择器3...{}
* 例如：div>ul{}则ul必须是div的直接子代。
* 2.优先级：近者优先，越精确越优先。
* 【伪类选择器】
*
*
* */
.li#li{ color: blue;
}
.li,#li{
color: darkviolet;
}
a:link{
color: black;
}
a:visited{
color: blue;
}
a:hover{
color: red;
}
a:active{
color: yellow;
}
input:hover{
color: red;
}
input:active{
color: blue;
}
input:focus{
color: yellow;
} </style>
</head>
<body>
<div>
<ul>
<li class="li" id="li">列表第一项</li>
<li>列表第二项</li>
<li class="li">列表第三项</li>
<li id="li">列表第四项</li>
</ul>
</div>
<ul>
<li class="li">列表第一项</li>
<li>列表第二项</li>
<li class="li">列表第三项</li>
<li id="li">列表第四项</li>
</ul>
<a href="03.CSS常用文本属性.html" target="_blank"> This is a chaolianjie</a>
<input type="text" name="text" id="text" />
</body>
</html>
【扩展阅读】
2.2.1选择器的优先级
1.第一原则：近者优先，最内层选择器要大于外层。
例如： div ul li>div #ul li在ul 内层，所以li标签选择器能覆盖#ul id选择器
2.当作用在同一层时，ID选择器>class选择器>标签选择器。
例如：div #li>div .li>div li。只要最后一个选择器都作用与li 那么无论之前有多少嵌套，均没有选择关系。
3.当作用于同一层，而且最后一层为同等选择器
例如：div ul li>div li作用范围选的更精准，则优先级更高。
4.当优先级完全相同时，写在后面的选择器会覆盖选在后面的选择器。
2.2.2选择器的命名规范
1.只能使用字母数字下划线。
2.开头不能是数字。
H5教程（二），CSS入门（一）选择器的更多相关文章
- 无废话ExtJs 入门教程二十一[继承：Extend]
无废话ExtJs 入门教程二十一[继承:Extend] extjs技术交流,欢迎加群(201926085) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承” ...
- 无废话ExtJs 入门教程二十[数据交互：AJAX]
无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...
- 无废话ExtJs 入门教程二[Hello World]
无废话ExtJs 入门教程二[Hello World] extjs技术交流,欢迎加群(201926085) 我们在学校里学习任何一门语言都是从"Hello World"开始,这里我 ...
- day 31 html(二) 和css入门
前情提要: 本次主要是继续昨天学的简单的html 补充以及 css的简单入门 一:表单标签 >1:get请求 <!DOCTYPE html> <html lang=" ...
- HTML和CSS 入门系列（一）：超链接、选择器、颜色、盒模式、DIV布局、图片
一.超链接 二.CSS选择器 CSS的全称叫做: Cascading Style Sheets 级联样式表的缩写. 2.1 类型选择器 2.2 派生选择器 2.3 伪类选择器 <style &g ...
- HTML和CSS 入门系列（二）：文字、表单、表格、浮动、定位、框架布局、SEO
上一篇:HTML和CSS 入门系列(一):超链接.选择器.颜色.盒模式.DIV布局.图片 一.文字 1.1 属性 1.2 字体样式:font-family 1.3 字体大小:font-size 1.4 ...
- mongodb入门教程二
title: mongodb入门教程二 date: 2016-04-07 10:33:02 tags: --- 上一篇文章说了mongodb最基本的东西,这边博文就在深入一点,说一下mongo的一些高 ...
- CSS入门教程——定位(positon)
CSS入门教程——定位(positon) CSS定位在网页布局中是起着决定性作用. 定位 CSS的定位功能是很强大的,利用它你可以做出各种各样的网页布局.本节就介绍一些CSS常用的定位语句. 1. ...
- css入门二-常用样式
css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...
随机推荐
- 二 Istio设计的核心原则
Istio架构关键目标 最大化透明度:Istio将自身自动注入到服务间所有的网络路径中.Istio使用sidecar代理来捕获流量,并且在尽可能的地方自动编程网络层,通过代理来路由流量,无需改动应用程 ...
- 开发环境入门 linux基础（部分）虚拟内存，rpm和yum安装
虚拟内存,rpm和yum安装 文本中查找 /内容 替换:扩展模式下(:)%s /替换目标/要替换的文件/ (只替换第一个)(后边加g全部替换) :set u添加行号 raid lvm逻辑卷 df - ...
- javascript——对象的概念——内建对象
包括内建对象的所有对象都是Object对象的子对象. 1.Array():构建数组的内建构造器函数 例:创建数组方式有两种: 2.Boolean:是对象,与基本数据类型 布尔值 不相同 例:创建Boo ...
- springmvc 注解式开发 处理器方法的返回值
1.返回void -Ajax请求 后台: 前台: 返回object中的数值型: 返回object中的字符串型: 返回object中的自定义类型对象: 返回object中的list: 返回object中 ...
- bzoj 1568 李超线段树
博客:http://www.cnblogs.com/mangoyang/p/9979465.html 李超线段树支持两种操作:1:插入一条直线.2:询问在x = c与这些直线的交点中最大的y坐标. 插 ...
- 【转】pecl,pear的不同
PEAR是PHP扩展与应用库(the PHP Extension and Application Repository)的缩写.它是一个PHP扩展及应用的一个代码仓库,基于php代码的,安装目录在/u ...
- hibernate 对象OID
它是hibernate用于区分两个对象是否是同一个对象的标识. 我们都知道,虚拟机内存区分两个对象看的是内存的地址是否一致.数据库区分两个对象,靠的是表的主键.hibernate负责把内存中的对象持久 ...
- PCL—关键点检测（NARF）低层次点云处理
博客转载自:http://www.cnblogs.com/ironstark/p/5051533.html 关键点检测本质上来说,并不是一个独立的部分,它往往和特征描述联系在一起,再将特征描述和识别. ...
- c语言实战： 计算时间差
计算时间差有两种,一种是把时间都转化为分钟数,一种是把时间都转化为小时,后者是会用到除法所以不可避免产生浮点数,所以我们选择转化为分钟数来计算. //题目:给定两个时间点计算它们的时间差,比如,1:5 ...
- GTK编程
一.简介 GTK(GIMP Toolkit)是一套跨多种平台的图形工具包,按LGPL许可协议发布的.虽然最初是为GIMP写的,但早已发展为一个功能强大.设计灵活的通用图形库.特别是被GNOME选中使得 ...