一、id及class选择符

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

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

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        #title2{   /*#后的是id名称*/

            background-color: red;

            font-family: "微软雅黑";

        }

    </style>

</head>

<body>

    <h2 id="title1">我是标题2</h2>

    <h2 id="title2">我也是标题2</h2>

</body>

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

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .pp{  /*将同一个class名的元素都选中了*/

            background-color: blue;

            font-family: "微软雅黑";

        }

    </style>

</head>

<body>

    <p class="pp">这是个段落</p>

    <h3 class="pp">这是个标题</h3>

</body>

</html>

这是个段落

这是个标题

二、伪类选择符

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

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

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

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

       #div1 a:link{

            background-color: red;    /*设置链接a在未访问前的样式为红色背景色*/ }

        }

       #div1 a:visited{

            background-color: blue;/*设置链接a在访问后的样式的背景色为蓝色*/

        }

       #div1 a:hover{

            text-decoration: none; /*当鼠标悬停在链接上时，链接的下划线消失*/

        }

    </style>

</head>

<body>

    <div id="div1">

        <a href="#">点击链接</a>

    </div>

</body>

</html>

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

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

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

      .ul li:first-child{color:red;} /*第一个*/

      .ul li:last-child{color:blue;} /*最后一个*/

      .ul li:nth-child(2){color:yellow;}/*第二个*/

       /*倒数第二个*/

      .ul li:nth-last-child(2){color:yellow;}

    </style>

</head>

<body>

        <ul class="ul">

            <li>test1</li>

            <li>test2</li>

            <li>test3</li>

            <li>test4</li>

            <li>test5</li>

        </ul>

</body>

</html>
  • test1
  • test2
  • test3
  • test4
  • test5

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

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

　 　/*奇数*/

     .ul2 li:nth-child(odd){background-color:#ccc;}

     .ul2 li:nth-child(2n+1){border-left:2px solid red;}

    /* 偶数 */

     .ul2 li:nth-child(even){background-color:#0F7CCF;}

     .ul2 li:nth-child(2n){border-left:2px solid black;}

    /* 3的倍数 */

     .ul2 li:nth-child(3n){color:red;font-weight:bold;}

    </style>

</head>

<body>

        <ul class="ul2">

             <li>哈哈</li>

             <li>呵呵</li>

             <li>嘻嘻</li>

             <li>啊啊</li>

             <li>哦哦</li>

             <li>嗯嗯</li>

        </ul>

</body>

</html>
  • 哈哈
  • 呵呵
  • 嘻嘻
  • 啊啊
  • 哦哦
  • 嗯嗯

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

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

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

    p:first-of-type {

    color: #f00;

        }

    </style>

</head>

<body>

    <div class="test">

    <div>我是一个div元素</div>

    <p>我是一个p元素</p>

    <p>我是一个p元素</p>

</div>

</body>

</html>

（五）、E：not(s)

<!DOCTYPE html>

<html lang="zh-cn">

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style type="text/css">

            p:not(.abc) {   /*设置除类名为.abc的元素的其他元素颜色*/

                color: #f00;

            }

        </style>

    </head>

    <body>

        <p class="abc">pppp p</p>

        <p id="abc">ppp</p>

        <p class="abcd">ppppp</p>

        <p>pppppp</p>

    </body>

</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. 邻接矩阵有向图(三)之 Java详解

    前面分别介绍了邻接矩阵有向图的C和C++实现,本文通过Java实现邻接矩阵有向图. 目录 1. 邻接矩阵有向图的介绍 2. 邻接矩阵有向图的代码说明 3. 邻接矩阵有向图的完整源码 转载请注明出处:h ...

  2. Unity3D 中的三个Update()方法

            MonoBehaviour.Update 更新 当MonoBehaviour启用时,其Update在每一帧被调用. MonoBehaviour.FixedUpdate 固定更新 当Mo ...

  3. Network - curl和Wget

    curl - transfer a URL curl SYNOPSIS curl [options] [URL...] DESCRIPTION curl is a tool to transfer d ...

  4. javaccript学习1

    1.javascript中的三种消息框 (1)警告框 警告框经常用于确保用户可以得到某些信息. 当警告框出现后,用户需要点击确定按钮才能继续进行操作. 语法: alert("文本" ...

  5. 使用VS Code开发调试ASP.NET Core 1.0

    使用VS Code开发调试ASP.NET Core 1.0,微软在今天凌晨发布了.NET Core 1.0,ASP.NET Core 1.0 与 Entity Framewok 1.0. 之前跟大家讲 ...

  6. 关于js性能

    1,声明变量要赋初值2,尽量避免声明全局变量,可以减少与系统的重名3,当编写大量js代码时,难免会遇到命名冲突,这是可以通过模拟命名空间方式     来避免冲突4,尽量避免使用全局变量,搜索全局变量是 ...

  7. 【SQL】CLR聚合函数什么鬼

    之前写过一个合并字符串的CLR聚合函数,基本是照抄MS的示例,外加了一些处理,已经投入使用很长时间,没什么问题也就没怎么研究,近日想改造一下,遇到一些问题,遂捣鼓一番,有些心得,记录如下. 一.杂项 ...

  8. 2015暑假多校联合---Expression（区间DP）

    题目链接 http://acm.split.hdu.edu.cn/showproblem.php?pid=5396 Problem Description Teacher Mai has n numb ...

  9. [moka同学笔记]三、Yii2.0课程笔记（魏曦老师教程）关联字段增加搜索

    关联字段增加搜索 post表关联adminuser表,通过post.author_id  adminuser.id关联,在YII2.0生成搜索,关联字段搜索时,需要输入关联字段author的id才能搜 ...

  10. 设置文件为源文件(和src一样)

    点击project->properties->java build path->source