1> ID选择器、交叉选择器、群组选择器、子代选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

    p{

        color: purple;

        font-size: 25px;

    }

    li{

        font-size: 25px;

        line-height: 35px;

    }    

    #two{

        color: red;

    }

/*    .lanse{

        color: blue;

    }*/

    /*交叉选择器*/

    li.lanse{

        color:blue;

    }

    /*群组选择器*/

    #test,.seven{

        color: orange;

    }

    /*子代选择器*/

    li span{

        color: pink;

    }

</style>

</head>

<body>

    <!-- 下面是html的写法 -->

    <font color='blue' size='3'>下面是html的写法</font>

    <font color='blue' size='3'>下面是html的写法</font>

    <font color='blue' size='3'>下面是html的写法</font>

    <font color='blue' size='3'>下面是html的写法</font>

    <font color='blue' size='3'>下面是html的写法</font>

    <font color='blue' size='3'>下面是html的写法</font>

    <!-- 下面是css的写法 -->

    <p>下面是css的写法</p>

    <p>下面是css的写法</p>

    <p>下面是css的写法</p>

    <p>下面是css的写法</p>

    <p>下面是css的写法</p>

    <span>我是ul外面的span标签</span>

    <ul>

        <li>我是第1行li标签

            <span>我是ul里面的span标签</span></li>

        <li id="two">我是第2行li标签</li>

        <li class="lanse">我是第3行li标签</li>

        <li>我是第4行li标签</li>

        <li class="lanse">我是第5行li标签</li>

        <li id="test">我是第6行li标签</li>

        <li class="seven">我是第7行li标签</li>

    </ul>

    <p class="lanse">我是class为lanse的p标签</p>

</body>

</html>

2> 子选择器、相邻选择器、属性选择器、伪类选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

    /*子选择器*/

    /*#box>p{

        color:red;

    }*/

    /*相邻选择器*/

    div+p{

        color:blue;

    }

    /*属性选择器*/

    p[name]{

        color:red;

    }

    a{

        font-size: 30px;

        color:blue;

    }

    /*伪类选择器*/

    a:hover{

        font-size: 50px;

        color: red;

    }

    #word{

        width: 300px;

        border: 3px solid blue;

        margin: 0 auto;

    }

    p#word:first-letter{

        font-size: 50px;

        color: red;

    }

    div[name]{

        color: yellow;

    }

</style>

</head>

<body>

    <div name="box">我是name为box的div元素</div>

    <p id="word">p标签p标签p标签p标签p标签p标签</p>

    <a href="http://www.baidu.com">百度</a>

<br />

<br />

<br />

    <div id="box">

        <div id="son">

            <p>我是son的p标签</p>

        </div>

        <p>我是box的p标签</p>

        <p name="test">我是box的p标签</p>

        <p>我是box的p标签</p>

    </div>

</body>

</html>

3> 选择器的优先级

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

    #box{

        font-size: 30px;

        color: red;

    }

    h1{

        font-size: 40px;

        color: orange;

    }

    /*有优先级*/

    #title{

        color: blue;

    }

</style>

</head>

<body>

    <h1 id="title">今天是星期一</h1>

    <div id="box">

        <p>我是box里面的p标签</p>

        <span>我是box里面的span标签</span>

    </div>

</body>

</html>

HTML学习笔记——选择器的更多相关文章

  1. JavaScript学习笔记-选择器集合调用方法

    <script type="text/javascript"> function uu(namePd) { //判断id var reId = new RegExp(/ ...

  2. CSS学习笔记——选择器

    选择器 当我们定义一条样式规则时候,这条样式规则会作用于网页当中的某些元素,而我们的规定的这些元素的规则就叫做选择器. 常用的选择器: 1.id选择器 #idname 2.类选择器 .classnam ...

  3. [CSS3] 学习笔记-选择器详解（三）

    1.UI元素状态伪类选择器 在CSS3的选择器中,除了结构性伪类选择器外,还有一种UI元素伪类选择器.这些选择器的共同特征是:指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用.在CSS ...

  4. [CSS3] 学习笔记-选择器详解（二）

    1.选择器first-child.last-child.nth-child和nth-last-child 利用first-child.last-child.nth-child和nth-last-chi ...

  5. CSS学习笔记----选择器

    用过css的同志们都知道,选择器是非常重要的,如果选择器使用不当,即使你的css写的再好,但是不知道要用在哪个元素上,这不是英雄无用武之地吗? css,用过的都说好! 最基本的选择器,id选择器,类选 ...

  6. css权威指南学习笔记 —— css选择器

    1,选择器:选择器的一些基本常用规则基本都记得,w3c上都有,平时也常用,不常用的一些后代选择器经常就忘记了.一些归纳一下后代选择器,加深一下印象: a:子选择器:   p>a  a是直接是p的 ...

  7. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  8. Object C学习笔记17-动态判断和选择器

    当时学习Object C的时被人鄙视了一顿,说使用.NET的思想来学Object C就是狗屎:不过也挺感谢这位仁兄的,这让我学习的时候更加的谨慎.今天的学习笔记主要记录Object C中的动态类型相关 ...

  9. CSS学习笔记(1):选择器

    一.元素选择器 HTML文档元素就是最基本的选择器 如: <!DOCTYPE html> <html lang="en"> <head> < ...

随机推荐

  1. 逻辑回归&&code

    没有正则化项的时候的二分类 #-*-coding=utf-8-*- from numpy import loadtxt,where, transpose import matplotlib.pyplo ...

  2. hdu3410 单调队列

    Passing the Message Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  3. BIEE报表开发

    (1)报表开发实例结果图 (2)开发报表步骤: (1)创建分析 (2)创建仪表盘提示 (3)创建仪表盘并发布 登录网址,输入用户名和密码 1) 新建——>分析——>选择主题区域——> ...

  4. 搜索表头的例子－jqueryEasyUi

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 帝国备份王(Empirebak) \class\functions.php、\class\combakfun.php GETSHELL vul

    catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 EmpireBak是一款完全免费.专门为Mysql大数据的备份与导入而设 ...

  6. ObjC 巧用反射和KVC实现JSON快速反序列化成对象

    1.简单的KVC介绍 KVC是一种间接访问对象属性的机制,不直接调用getter 和 setter方法,而使用valueForKey 来替代getter 方法,setValue:forKey来代替se ...

  7. [JavaWeb 用MyEclipse分别创建最简单的JSP程序和Servlet程序]

    最近看了子柳的<淘宝技术这十年>,其中讲到因为负载和连接池问题,淘宝当年迫不得已从SUN请来一对工程师从LAMP架构转到Java+Oracle.作为一个PHP为“母语”的程序仔,真是感到压 ...

  8. Unity 单例写法

    借鉴自:http://www.cnblogs.com/CodeCabin/p/unity_global_manager.html 实现复杂一些的全局控制,如切换游戏关卡等操作,更常用的方式是使用单例类 ...

  9. 帝国cms一些常用的修改路径

    1.信息提示改成弹出框提示 修改e/message/index.php 2.修改提示信息 语言包e/data/language/gb/pub/q_message.php 3.文章设置权限后没登录提示模 ...

  10. CF 405C Unusual Product（想法题）

    题目链接: 传送门 Domino Effect time limit per test:1 second     memory limit per test:256 megabytes Descrip ...