一、id及class选择符

id和class的名称是由用户自定义的。id号可以唯一地标识html元素，为元素指定样式。id选择符以#来定义。

1、id选择符   注：在网页中，每个id名只能是唯一不重复的。

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>Document</title>
  4.     <style type="text/css">
  5.         #title2{   /*#后的是id名称*/
  6.             background-color: red;
  7.             font-family: "微软雅黑";
  8.         }
  9.     </style>
  10. </head>
  11. <body>
  12.     <h2 id="title1">我是标题2</h2>
  13.     <h2 id="title2">我也是标题2</h2>
  14. </body>

2、class选择符  注：class与id不同，class可以重复使用，定义一类的元素。class选择符以.来定义。

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         .pp{  /*将同一个class名的元素都选中了*/
  8.             background-color: blue;
  9.             font-family: "微软雅黑";
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <p class="pp">这是个段落</p>
  15.     <h3 class="pp">这是个标题</h3>
  16. </body>
  17. </html>

这是个段落

这是个标题

二、伪类选择符

伪类选择符比较多，如下表所示：

下面简单举几个例子说明：

（一）、E：link、E：hover、E：visited

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.        #div1 a:link{
  8.             background-color: red;    /*设置链接a在未访问前的样式为红色背景色*/ }
  9.         }
  10.        #div1 a:visited{
  11.             background-color: blue;/*设置链接a在访问后的样式的背景色为蓝色*/
  12.         }
  13.        #div1 a:hover{
  14.             text-decoration: none; /*当鼠标悬停在链接上时，链接的下划线消失*/
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <div id="div1">
  20.         <a href="#">点击链接</a>
  21.     </div>
  22. </body>
  23. </html>

（二）、E：first-child、E：last-child

注：这里可能会存在误区。要记住E元素是子元素，而不是父元素。所以这里要设置第一个li的样式就是li:first-child,而不是ul:first-child。而且必须是排在第一的元素才会被选中。E：last-child同理可得。

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.       .ul li:first-child{color:red;} /*第一个*/
  8.       .ul li:last-child{color:blue;} /*最后一个*/
  9.       .ul li:nth-child(2){color:yellow;}/*第二个*/
  10.        /*倒数第二个*/
  11.       .ul li:nth-last-child(2){color:yellow;}
  12.     </style>
  13. </head>
  14. <body>
  15.         <ul class="ul">
  16.             <li>test1</li>
  17.             <li>test2</li>
  18.             <li>test3</li>
  19.             <li>test4</li>
  20.             <li>test5</li>
  21.         </ul>
  22.  
  23. </body>
  24. </html>
  • test1
  • test2
  • test3
  • test4
  • test5

（三）、E：nth-child(n)

  1. <!doctype html>
  2.  
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Document</title>
  7.     <style type="text/css">
  8. 　 　/*奇数*/
  9.      .ul2 li:nth-child(odd){background-color:#ccc;}
  10.      .ul2 li:nth-child(2n+1){border-left:2px solid red;}
  11.     /* 偶数 */
  12.      .ul2 li:nth-child(even){background-color:#0F7CCF;}
  13.      .ul2 li:nth-child(2n){border-left:2px solid black;}
  14.     /* 3的倍数 */
  15.      .ul2 li:nth-child(3n){color:red;font-weight:bold;}
  16.     </style>
  17. </head>
  18. <body>
  19.         <ul class="ul2">
  20.              <li>哈哈</li>
  21.              <li>呵呵</li>
  22.              <li>嘻嘻</li>
  23.              <li>啊啊</li>
  24.              <li>哦哦</li>
  25.              <li>嗯嗯</li>
  26.         </ul>
  27. </body>
  28. </html>
  • 哈哈
  • 呵呵
  • 嘻嘻
  • 啊啊
  • 哦哦
  • 嗯嗯

（四）、E：first-of-type。

注：要与E：first-child区分开。E：first-child 要求E元素是第一个子元素，但E：first-of-type不是，该选择符总是能命中父元素的第1个为E的子元素，不论第1个子元素是否为E。

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.     p:first-of-type {
  8.     color: #f00;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13.     <div class="test">
  14.     <div>我是一个div元素</div>
  15.     <p>我是一个p元素</p>
  16.     <p>我是一个p元素</p>
  17. </div>
  18. </body>
  19. </html>

（五）、E：not(s)

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <style type="text/css">
  7.             p:not(.abc) {   /*设置除类名为.abc的元素的其他元素颜色*/
  8.                 color: #f00;
  9.             }
  10.         </style>
  11.     </head>
  12.     <body>
  13.         <p class="abc">pppp p</p>
  14.         <p id="abc">ppp</p>
  15.         <p class="abcd">ppppp</p>
  16.         <p>pppppp</p>
  17.     </body>
  18. </html>

CSS学习总结（二）的更多相关文章

  1. css学习笔记二

    下面来总结一下盒子模型,流式布局,浮动布局,层布局(定位布局). 1.盒子模型 有二种:IE盒子模型 和 标准w3c盒子模型 1)IE的盒子模型的content包含了padding和border 2) ...

  2. CSS学习笔记二：css 画立体图形

    继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...

  3. Html+css学习笔记二 标题

    学习新标签,标题 <html> <head> <title>tags</title> </head> <body> <h1 ...

  4. CSS学习（二）

    <!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title ...

  5. CSS学习（二）- 有关 hasLayout 和 BFC

    1. hasLayout 概念说明 ‘Layout’ 可以被某些 CSS property(特性)不可逆的触发,而某些 HTML 元素本身就具有 layout . ‘Layout’ 在 IE 中可以通 ...

  6. 5月28日 python学习总结 CSS学习（二）

    CSS属性相关 宽和高 width属性可以为元素设置宽度. height属性可以为元素设置高度. 块级标签才能设置宽度,内联标签的宽度由内容来决定. 字体属性 文字字体 font-family可以把多 ...

  7. CSS学习（二）：背景图片如何定位？

    我们都知道background-position属性用来指定背景图片应该出现的位置,可以使用关键字.绝对值和相对值进行指定.在CSS Sprites中,这个属性使用比较频繁,使用过程中,我常混淆,经常 ...

  8. css学习笔记二之inline-block

    1.inline-block是CSS2.1中新增的盒类型,在div中将display属性设定为"inline-block",则div显示效果与设置display属性为"i ...

  9. CSS 学习路线(二)选择器

    选择器 规则结构: 分两个基本部分 选择器(selector)和声明块(declaration block) 组成 声明块:由一个或多个声明组成,每一个声明都是属性-值对 选择器分为:元素选择器,类选 ...

  10. CSS学习（二）选择符

    元素选择符:以元素名作为选择符(span{ color: red; }) 群组选择符:将两个选择符用逗号隔开构成群组(span, div{ color: red; }) 通用选择符:通用选择符(*)将 ...

随机推荐

  1. js提取正则中的字符串

    代码如下: var results = data.match(/(start=').*?(')/); if (results != null) { console.log(data[0]); }

  2. Socket桥（转载）

    最好方案:使用haproxy 或者nginx转发.自己写程序性能和监控难保证,推荐使用开源软件替代. 源地址为:http://baishaobin2003.blog.163.com/blog/stat ...

  3. WEKA使用（基础配置+垃圾邮件过滤+聚类分析+关联挖掘）

    声明: 1)本文由我bitpeach原创撰写,转载时请注明出处,侵权必究. 2)本小实验工作环境为Windows系统下的WEKA,实验内容主要有三部分,第一是分类挖掘(垃圾邮件过滤),第二是聚类分析, ...

  4. Tools - Markdown

    Markdown 轻量级标记语言,使用易读易写的纯文本格式和类似HTML的标记语法来编写具有一定的格式的文档. wiki - Markdown 三分钟学会书写格式良好的笔记(Markdown) 为知笔 ...

  5. iOS_UIImage_Gif的分解

    /** Gif的步骤 1. 拿到Gifd的数据 2. 将Gif分解为一帧帧 3. 将单帧数据转为UIImage 4. 单帧图片保存 */ github地址: https://github.com/ma ...

  6. javascripts学习笔记（五）：用js来实现缩略语列表、文献来源链接和快捷键列表。

    1 缩略语列表问题出发点:一段包含大量缩略语的文本,例如: <p> The <abbr title="World Wide Web Consortium"> ...

  7. WCF会话(Session)与实例(Instance)管理

    一.理解Session 1.Session的作用:保留Client和Service之间交互的状态,确保Client与Service之间交互唯一性(SessionId),即:多个Client同时访问Se ...

  8. SQL Server获取下一个编码字符串的实现方案分割和进位

        我在前一种解决方案SQL Server获取下一个编码字符实现和后一种解决方案SQL Server获取下一个编码字符实现继续重构与增强两篇博文中均提供了一种解决编码的方案,考虑良久对比以上两种方 ...

  9. 动画库Animate.css

    笔记分享: 用法:到官网(http://daneden.github.io/animate.css/),下载animate.min.css文件.点击这里 1.首先引入animate css文件 < ...

  10. 对于 ThreadLocal 的理解和应用

    首先,ThreadLocal 不是用来解决共享对象的多线程访问问题的,一般情况下,通过ThreadLocal.set() 到线程中的对象是该线程自己使用的对象,其他线程是不需要访问的,也访问不到的.各 ...