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. ubuntu 下mysql中文乱码问题解决方案

    mysql> show variables like 'character%';+--------------------------+----------------------------+ ...

  2. 【BZOJ 2594】【WC 2006】水管局长数据加强版

    离线后倒过来做,这样就跟魔法森林差不多了,缩边为点就可以统计边的权值了. 1A真是爽,可惜常数炸上了天,这是滥用stl容器和无脑link,cut的后果 #include<map> #inc ...

  3. dede使用方法---用js让当前导航高亮显示

    当前导航高亮显示能够提升用户体验,我也知道,大家在网上搜dede让当前导航高亮显示的方法一抓一大把,但是,并不一定适合自己的需求.就像我的需求一样,导航有个二级导航,然后需要做到让当前导航高亮显示.我 ...

  4. Java+FlexPaper+swfTools仿百度文库文档在线预览系统设计与实现

    笔者最近在给客户开发文档管理系统时,客户要求上传到管理系统的文档(包括ppt,word,excel,txt)只能预览不允许下载.笔者想到了百度文库和豆丁网,百度文库和豆丁网的在线预览都是利用flash ...

  5. Linux命令:修改文件权限命令chmod、chgrp、chown详解

    Linux系统中的每个文件和目录都有访问许可权限,用它来确定谁可以通过何种方式对文件和目录进行访问和操作. 文件或目录的访问权 限分为只读,只写和可执行三种.以文件为例,只读权限表示只允许读其内容,而 ...

  6. Python中remove，del和pop的区别

    以a=[1,2,3] 为例,似乎使用del, remove, pop一个元素2 之后 a都是为 [1,3], 如下:http://Novell.Me >>> a=[1,2,3] &g ...

  7. Spark MLib 基本统计汇总 1

    1.  概括统计 summary statistics MLlib支持RDD[Vector]列式的概括统计,它通过调用 Statistics 的 colStats方法实现. colStats返回一个  ...

  8. SQL Server Code tips (持续更新)

    1.  表存在,查询语句也能执行,但是表名下面总是有条红线,说对象名无效 CTRL + SHIFT +R  刷新本地缓存就可以了 2. IDE (Integrated Development Envi ...

  9. MongoDB安装与启动

    我本人电脑是win8系统64位,下载64位的zip包,下载完成后解压缩到D:\MongoDB目录 创建数据库目录D:\MongoDB\data,接下来打开命令行窗口,切换到D:\MongoDB\bin ...

  10. 【PowerOJ1739】 魔术球问题

    https://www.oj.swust.edu.cn/problem/show/1739 (题目链接) 题意 n个柱子上放小球,每根柱子上相邻两个小球的数字之和必须是完全平方数,只有放了x号小球才可 ...