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. Beta项目冲刺 --第一天

    新的开始.. 队伍:F4 成员:031302301 毕容甲 031302302 蔡逸轩 031302430 肖阳 031302418 黄彦宁 会议内容: 1.站立式会议照片: 2.项目燃尽图 3.冲刺 ...

  2. Android Studio 优秀插件汇总

    第一部分 插件的介绍 Google 在2013年5月的I/O开发者大会推出了基于IntelliJ IDEA java ide上的Android Studio.AndroidStudio是一个功能齐全的 ...

  3. mysql查询所有记录，并去掉重复的记录

    select * from tablename group by name;如果是select * from tablename group by name,age;那么查询的是满足name和age都 ...

  4. Html-Css标签lable中定义宽度需要其他的支持

    lable的标签如果定义了width,如果要使起生效,则需要定义display width: 130px; display: inline-block;

  5. Fiddler环境配置教程

    原理:安装Fiddler的电脑和将要进行检测的手机(iPhone.Android)加入同一局域网,这样手机上APP的请求就可以被电脑通过Fiddler抓取到. 局域网布置教程: 在将要布置局域网的电脑 ...

  6. 【转】Timer还是Handler

    在我们Android开发过程中,经常需要执行一些短周期的定时任务,这时候有两个选择Timer或者Handler.然而个人认为:Handler在多个方面比Timer更为优秀,更推荐使用. 一.易用性 1 ...

  7. 解决虚拟机 MAC10.9 不能设置1366*768分辨率问题

    首先在虚拟机设置里,显示--3d下面--固定分辨率--最大设成1024*768--保存然后打开虚拟机的.vmx文件,最后几行 svga.autodetect = "FALSE"sv ...

  8. 转发：IT行业中的甲方乙方关系

    原文:http://byteh.blog.51cto.com/141786/1004046/ 混IT,必须理解“甲方乙方” By 韩宇斌 2012-09-23 9月初,修改了QQ签名,把“甲方乙方”放 ...

  9. css-transition和transform实现图片悬浮移动动画

    今天在京东首页上看到一个效果,鼠标悬浮在图片上时,图片发生移动,鼠标移走时再移回,并且有一个过渡效果. 貌似很简单,自己做做试试吧 我首先使用的是jquery在鼠标悬浮到图片上给图片增加一个类,这个类 ...

  10. 【BZOJ-4326】运输计划 树链剖分 + 树上差分 + 二分

    4326: NOIP2015 运输计划 Time Limit: 30 Sec  Memory Limit: 128 MBSubmit: 703  Solved: 461[Submit][Status] ...