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. iOS常用---NSString，NSMutabuleString

    普通的创建字符串: NSString *string =[[NSString alloc]init]; //创建一个空的字符串,即 @“” 一 .字符串读取本地文件: 参数一: 文件地址 参数二: 文 ...

  2. jQuery基础--样式篇（4）

    jQuery选择器: 1.id选择器:通过id名来获取节点,id是唯一的,每个id在页面上只能使用一次. $( "#id" ) 2.类选择器:通过class样式类名来获取节点 $( ...

  3. 解决Eclipse项目图标上的红色感叹号，红叉

    从外部导入了几个jar包发现工程上出现红叉,但展开又没有详细的指明任何错误,可能过如下几步: 1.检查Build Path中的各个依赖jar及library是否有warning的标志,若有,处理之:  ...

  4. 传入任意json数据源进行格式化处理并用Angularjs显示

    在项目开发中,有些时候我们并不知道传入的数据源(只针对于json格式的)的内部结构,本文用最笨的办法先把数据源格式化一遍,把所有的key值替换成自定义的值,然后在页面上用angularjs展示. ht ...

  5. Java 测试代码模板

    package com.robert.service; import org.apache.commons.logging.Log; import org.apache.commons.logging ...

  6. 网络流 poj 2135

    n个点 m条边 给m条边 求1->n n->1 最小花费,每条边最多走一次 两个最短路显然不行 会影响另外一条 #include<stdio.h> #include<al ...

  7. URL详解与URL编码

    作为前端,每日与 URL 打交道是必不可少的.但是也许每天只是单纯的用,对其只是一知半解,随着工作的展开,我发现在日常抓包调试,接口调用,浏览器兼容等许多方面,不深入去理解URL与URL编码则会踩到很 ...

  8. ArcGIS 帮助（10.2、10.2.1 和 10.2.2）收集

    帮助首页 [Oracle基础] 快速浏览:Oracle 地理数据库 什么是 Oracle Spatial? 设置到 Oracle 的连接 存储在 Oracle 地理数据库中的系统表 结合企业级地理数据 ...

  9. 通过lucene的StandardAnalyzer分析器来了解分词

    本文转载http://blog.csdn.net/jspamd/article/details/8194919 不同的Lucene分析器Analyzer,它对TokenStream进行分词的方法是不同 ...

  10. ubuntu16.04安装重启后显示黑屏

    环境 华硕笔记本 ubuntu16.04系统 Nvidia GTX970显卡 问题 装好ubuntu后提示重启,重启后直接黑屏 方法 开机grub界面按e键,linux打头的行,quiet后添加nom ...