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. 最棒的10款MySQL GUI工具

    绝大多数的关系数据库都明显不同于MS Access,它们都有两个截然不同的部分:后端作为数据仓库,前端作为用于数据组件通信的用户界面.这种设计非常巧妙,它并行处理两层编程模型,将数据 层从用户界面中分 ...

  2. ubuntu静态IP配置

    1. 修改配置文件/etc/network/interfacesroot@ubuntu:~# sudo gedit /etc/network/interfaces 添加以下内容:auto eth0   ...

  3. MySQL多实例

    http://www.kancloud.cn/digest/mysqlsummary/132842http://crazy123.blog.51cto.com/1029610/1611887/ htt ...

  4. 爱上MVC3系列~Html.BeginForm与Ajax.BeginForm

    Html.BeginForm与Ajax.BeginForm都是MVC架构中的表单元素,它们从字面上可以看到区别,即Html.BeginForm是普通的表单提交,而Ajax.BeginForm是支持异步 ...

  5. 【BZOJ 1568】【JSOI 2008】Blue Mary开公司

    经典的splay维护凸壳,但是看了看zky学长的题解最后决定写线段树维护标记永久化. Round1考到了这个之后一直没有理解标记永久化,CTSC也因为自己的缺陷丢掉了一些部分分,so sad 看来以后 ...

  6. css 选择器样式优先级

    !important > 行内 >id > class >tag >*

  7. java-正则表达式过滤字符串中的html标签

    案例 import java.util.regex.Matcher; import java.util.regex.Pattern; /** * <p> * Title: HTML相关的正 ...

  8. 怎么给我的Office文档加密

    很多的用户朋友都可以熟练的使用office中的Word.Excel和PowerPoint文档,但大家对Office文档加密方式了解的并不多.Advanced Office Password Recov ...

  9. NGUI之添加响应函数

    public void ButtonNextClicked() { SelectIndex++; SelectIndex %= ; showGameObject(); } public void Bu ...

  10. Leetcode 270. Closest Binary Search Tree Value

    Given a non-empty binary search tree and a target value, find the value in the BST that is closest t ...