html进阶css（2）
选择器的类型
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css的选择器</title>
<style type="text/css">
.stress{color:red;}/*类前面要加入一个英文圆点*/
#setgreen{color:green}
</style>
</head>
<body>
<p>什么是<span class="stress">类选择器</span></p>
<p><span id="setgreen">id选择器</span>又是什么呢？</p>
</body>
</html>
类选择器在css样式编码中是最常用到的，如上图可以实现“类选择器”字体设置为红色。
.类选择器名称{css样式代码；} 英文圆点开头，其中类选择器名称可以任意起名不要用中文数字。
许多方面id选择器都类似域类选择符，但也有一些重要的区别：
1）为标签设置id="id名称"，而不是class=“类名称”
2）id选择器的前面是井（#）号，而不是英文圆点（.）
类和id选择器的区别：相同点 ：可以应用于任何元素
不同点：id选择器只能在文档中使用一次，可以拥有多个id但是id名称不能有冲突。 类选择器可以使用很多次。
可以使用类选择器词列表方法为一个元素设置多个样式。但只能用类选择器的方法实现。id选择器是不可以的。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>子选择器..</title>
<style type="text/css">
.food>li{border:1px solid red;}
.first span{color:red;}
*{font-size:20px;}
</style>
</head>
<body>
<p class="first">子选择器与<span>包含选择器</span></p>
<ul class=" food" >
<li>水果
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
</li>
<li>
<ul>蔬菜
<li>白菜</li>
<li>青菜</li>
<li>空心菜</li>
</ul>
</li>
</ul>
</body>
</htmL>
如上，子选择器是用（>）大于符号，用于选择指定标签元素的第一代子元素。
.food>li{border:1px solid red;}
这行代码会使用class为food下的子元素li加入红色实线边框。
包含选择器，即加入空格，用于选择指定标签元素下的后辈元素，.first span{color:red;}
这行代码中“包含选择器”字体颜色变为红色。
子选择器是指他的直接后代，或者可以理解为作用于子元素的第一代后代，而包含选择器是用于所有子后代。包含选择器通过空格来进行选择，而子选择器通过>进行选择。
所以，>用于元素的第一代后代。空格用作于元素的所有后代。想试试效果的话把“.food>li”修改为“.food li”看看下效果把。
*{font-size:20px;} 通用选择器。通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配HTML中所有标签元素。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style type="text/css">
a:hover{
color:red;
font-size:20px;
}
a#spe_a:hover{color:black;}
.first，#second span{color:green;}
</style>
</head>
<body>
<h1 class="first">早晨九点的<a href="链接地址">太阳</a>是最舒服的</h1>
<p id="second">早晨八点是<span>上班上学</span>的<a id="spe_a" href="链接的地址">高峰期</p> </body>
</html>
什么是伪类选择器，它允许给html不存在的标签（标签的某种样式）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色与大小。
a:hover{color:red;font-size:20px}
上面一行代码就是a标签鼠标滑过的状态设置字体颜色变红，字体变大。但是这样是包含所有的a标签，如想让另一段不采用这样色彩可以改变它的。
<a id="spe_a" href="链接的地址"></a> a#spe_a:hover{color:black;}
这样就可以了，加id标签，在用a#加id地址在加上伪类选择器就ok了。
分组选择符
.first，#second span{color:green;}
当你想为html中多个标签元素设置同一个样式时，可以使用分组选择器（，）上面代码表示.first标签第一段文字在用（，）连接”#second“在用空格连接span。这样第一段文字与id选择器中的span都是自己想要的文字效果了。
html进阶css（2）的更多相关文章
- html进阶css(5)
css定位机制 css有三种基本的定位机制:普通流,浮动和绝对定位. 除非专门指定,否则所有框都在普通流中定位.也就是说,普通流中的元素的位置由元素在html中的位置决定. 块级框从上到下一个接一个的 ...
- html进阶css（４）
盒子模型-边框 首先请看下图 <!doctype html> <html> <head> <meta charset="utf-8"> ...
- html进阶css（3）
css的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许格式不仅应用于某个特定html标签元素,而且应用于其后代. <!doctype html> <html> ...
- html进阶css（1）
<!doctype html> <html> <head> <meta http-equiv="content-type" content ...
- HTML5总结整理
(仅供大家学习分享交流) 一.简介 1.前端开发最核心技术 我们知道,用所谓的网页三剑客已经不能满足需求了,那前端开发究竟要学习什么技术呢?网页最 主要由3部分组成:结构.表现和行为.网页现在新的标准 ...
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- 【CSS进阶】试试酷炫的 3D 视角
写这篇文章的缘由是因为看到了这个页面: 戳我看看(移动端页面,使用模拟器观看) 运用 CSS3 完成的 3D 视角,虽然有一些晕3D,但是使人置身于其中的交互体验感觉非常棒,运用在移动端制作一些 H5 ...
- 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果
最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...
- 2. web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...
随机推荐
- input(file)浏览按钮美化 (巨简单），网上那些都弱爆了
<!DOCTYPE HTML> <html> <body> <input type="file" id="upload" ...
- Wireshark 使用教程
原文出处 http://blog.sina.com.cn/s/blog_5d527ff00100dwph.html Wireshark是世界上最流行的网络分析工具.这个强大的工具可以捕捉网络中的数 ...
- asp.net获取ip地址的方法
在ASP中使用 Request.ServerVariables("REMOTE_ADDR") 来取得客户端的IP地址,但如果客户端是使用代理服务器来访问,那取到的就是代理服务器的I ...
- css实现超连接按钮形式显示
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- 路由转发(curl)
<?php ini_set('memory_limit', '640M'); ini_set('default_charset', 'utf-8'); define('webroot', 'ht ...
- vc2015编译protobuf
下载地址:https://github.com/google/protobuf 1.编译通过cmake生成sln文件来编译用cmd命令 cd 到3.0.0-beta-4\cmake mkdir bui ...
- [Database] Deadlock avoidance protocol
如何避免Deadlock,如果我们能提前知道各个Process对于资源的需求情况,我们就可以用Banker's algorithm (银行家算法) 来解决问题.可是这在现在中不好实现,因为很难提前知道 ...
- 条形码/二维码之开源利器ZXing图文介绍
全文目录: 基本介绍 二维码(比如:QRCode)的编码和解码演示 条形码(比如:EAN-13)的编码和解码演示 [一]. 基本介绍 : 1-1. ZXing是一个开源Java类库用于解析多种格式的条 ...
- 【面试】Spring问答Top 25
本文由 ImportNew - 一直在路上 翻译自 howtodoinjava.欢迎加入翻译小组.转载请见文末要求. 本人收集了一些在大家在面试时被经常问及的关于Spring的主要问题,这些问题有可能 ...
- html5 新属性
<p contenteditable="true">这是一段可编辑的段落.请试着编辑该文本.</p> <input id="email&qu ...