HTML学习笔记——选择器

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>

时间： 2024-10-27 03:48:45

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

JQuery学习笔记-选择器-(一)

选择器的简单使用 <%-- Created by IntelliJ IDEA. User: cxspace Date: 16-8-25 Time: 下午2:29 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html&

JQuery学习笔记-选择器-1

在jQuery中 $()方法等价于jQuery()方法,前者比较常用,是后者的简写.一般只有在$()与其它语言冲突时才会使用jQuery()方法. parent > child选择器的范围,它所选择的目标是子集元素,相当于一个家庭中的子辈们,但不包括孙辈,它的调用格式:$("parent > child"),child参数获取的元素都是parent选择器的子元素,它们之间通过">"符号来表示一种层次关系. prev + next选择器就可以查找与&

Jquery学习笔记 - 选择器

Jquery选择器与CSS选择器非常相似,CSS选择器提供诸多功能,同时两者在解析上均采用从右向左解析,因为在建立Render Tree时,若采用自左向右解析,没词匹配不成功均需要退回再进行匹配,而反向解析利用排除法,逐步缩小元素候选集,优化了从子元素找父元素的过程,对于大量元素很有效(所以采用通配符很低效) CSS的基础选择器: 群组选择器:selector1, selector2, selector3... 简单选择器:ID" #id ",标签" tag ",类

“jquery中each方法和选择器”的学习笔记

<head> <title></title> <script src="jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { //alert($("div").text()); //对数组元素使用匿名函数进行逐个处理.

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

一.元素选择器 HTML文档元素就是最基本的选择器如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style type="text/css"> p {color:blue;} </style> </head> &

Java程序猿的JavaScript学习笔记（12——jQuery-扩展选择器）

计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript学习笔记(3--this/call/apply) Java程序猿的JavaScript学习笔记(4--this/闭包/getter/setter) Java程序猿的JavaScript学习笔记(5--prototype) Java程序猿的JavaScript学习笔记(6--面向对象模拟) Java程

css 选择器 (学习笔记)

参考 http://zachary-guo.iteye.com/blog/605116 1. div+p 选择紧接在 <div> 元素之后的所有 <p> 元素.解释 : find p , p.prev = div 就ok! 2. [class~=flower] 选择 title 属性包含单词 "flower" 的所有元素.解释 : 注意是单词哦 class="abc xyz" abc这个算一个单词 3. [lang|=en] 选择 lang

jQuery学习笔记——jQuery常规选择器

一．简单选择器在使用 jQuery 选择器时,我们首先必须使用“$()”函数来包装我们的 CSS 规则.而CSS 规则作为参数传递到 jQuery 对象内部后,再返回包含页面中对应元素的 jQuery 对象.随后,我们就可以对这个获取到的 DOM 节点进行行为操作了.#box {//使用 ID 选择器的 CSS 规则color:red;//将 ID 为 box 的元素字体颜色变红}在 jQuery 选择器里,我们使用如下的方式获取同样的结果:$('#box').css('color', 'red

jQuery学习笔记（一）：入门

jQuery学习笔记(一):入门一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: 1 document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: 1 $('#info').val('Hello World!'); 嗯,可以看出,使用JQuery的优势之一是可以使代码更加简练,使开