选择器的类型

<!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）的更多相关文章

  1. html进阶css(5)

    css定位机制 css有三种基本的定位机制:普通流,浮动和绝对定位. 除非专门指定,否则所有框都在普通流中定位.也就是说,普通流中的元素的位置由元素在html中的位置决定. 块级框从上到下一个接一个的 ...

  2. html进阶css（４）

    盒子模型-边框 首先请看下图 <!doctype html> <html> <head> <meta charset="utf-8"> ...

  3. html进阶css（3）

    css的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许格式不仅应用于某个特定html标签元素,而且应用于其后代. <!doctype html> <html> ...

  4. html进阶css（1）

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  5. HTML5总结整理

    (仅供大家学习分享交流) 一.简介 1.前端开发最核心技术 我们知道,用所谓的网页三剑客已经不能满足需求了,那前端开发究竟要学习什么技术呢?网页最 主要由3部分组成:结构.表现和行为.网页现在新的标准 ...

  6. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  7. 【CSS进阶】试试酷炫的 3D 视角

    写这篇文章的缘由是因为看到了这个页面: 戳我看看(移动端页面,使用模拟器观看) 运用 CSS3 完成的 3D 视角,虽然有一些晕3D,但是使人置身于其中的交互体验感觉非常棒,运用在移动端制作一些 H5 ...

  8. 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

    最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...

  9. 2. web前端开发分享-css,js进阶篇

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...

随机推荐

  1. (转)CommandArgument用法

    1.绑定数据库中一个主键前台代码:<ItemTemplate>                        <asp:ImageButton ID="ibtnUpdate ...

  2. ComboBox绑定数据源时触发SelectedIndexChanged事件的处理办法

    转载:http://blog.sina.com.cn/s/blog_629e606f01014d4b.html ComboBox最经常使用的事件就是SelectedIndexChanged.但在将Co ...

  3. Memory Analyzer Blog

    引用:http://memoryanalyzer.blogspot.jp/2008/05/automated-heap-dump-analysis-finding.html Dienstag, 27. ...

  4. CODEVS 3139 栈练习3

    3139 栈练习3  时间限制: 2 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题目描述 Description 比起第一题,本题加了另外一个操作,访问栈顶元素(编号3,保 ...

  5. Floyd最小环

    本文转自这里 最小环:从一个点出发,经过一条简单路径回到起点成为环.图的最小环就是所有环中长度最小的. 怎样求最小环呢? 1传统的解决方法(dijkstra):        任意一个最小环环的权值, ...

  6. myeclipse 不能添加非myeclipse开发的项目

    这是因为以前的项目不是用myEclipse创建的,所以用myeclipse deploy的时候找不到你的项目.可以这样做:右击原项目名 - myeclipse - Add Web Project Ca ...

  7. php环境安装及搭建

    最近由于项目需要 转战 PHP .  在做了差不多两年java后 说实话看php代码还是有些难受的. 毕竟不习惯.废话不说 先说一下 PHP环境的部署等等,也就是最近几天学习的心得吧.方便以后参考. ...

  8. uva1587 Box

    Ivan works at a factory that produces heavy machinery. He has a simple job -- he knocks up wooden bo ...

  9. 《Programming WPF》翻译 第7章 3.笔刷和钢笔

    原文:<Programming WPF>翻译 第7章 3.笔刷和钢笔 为了在屏幕上绘制一个图形,WPF需要知道你想要为图形填充什么颜色以及如何绘制它的边框.WPF提供了一些Brush类型支 ...

  10. centos 图形界面和命令行界面切换

    如果在图形界面下,按:Ctrl+Alt+F2进入命令行登录界面 切到root用户下, su root password 1, 关闭图形界面: init 3 关闭图形界面(XServer服务也会关闭) ...