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,有无从下手 ...
随机推荐
- Geodatabase - 判断是否处于编辑状态
Engine中提供IDatasetEdit来判断数据是否处于编辑状态,我们知道,在ArcMap中,进行编辑的不一定都是要素类,也可以是表,网络几何等.以下能在ArcMap中进行编辑的数据都实现了 ID ...
- C#holle world
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- vc2015 编译libcurl带openssl
1.先编译zlib下载地址 http://zlib.net/ 我这边vc2015编译需要配置环境变量,不知道是装了wdk的原因还是多个vc版本的原因 设置环境变量lib和include路径 INCLU ...
- hadoop容灾能力测试
实验简单来讲就是 1. put 一个600M文件,分散3个replica x 9个block 共18个blocks到4个datanode 2. 我关掉了两个datanode,使得大部分的block只在 ...
- 关于Windows8.1更新后Sql Server服务消失的处理办法
前言 微软在17日发布了windows8.1,兴致勃勃地花了半天的时间更新了,不过不知所云的是,在20日又被卸下Windows Store.此为背景. 影响 更新完毕做开发的时候,发现SqlServe ...
- Python Tcp Socket
socket(套接字),传输层通信的端点,由IP和端口号组成(IP,Port),可以通过socket精确地找到服务器上的进程并与之通信 python2.6实现,基于AF_INET(网络套接字) 类型S ...
- js给div动态添加控件，然后给这个控件动态添加事件
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...
- 临时表妙用、连表更新、sqlserver group contant
一.临时表妙用 -- 1.将老库中的mediaid和新库中的regionid对应上,然后插入到临时表中 SELECT * INTO #TempMediaRegion FROM (SELECT ww.C ...
- vc获取时间戳
CTime cTime = CTime::GetCurrentTime(); CString msg; msg.Format("%u",cTime .GetTime()); Afx ...
- yii CMenu的配置（导航栏）
给主键的li 和a标签添加元素$this->myMenu = array( 'id'=>'myMenu', 'items'=>array( array( 'label'=>'H ...