网页开发学习笔记三: HTML选择器

选择器是一个选择标签的过程

  • 标签选择器  标签{属性: 值; 属性:值;}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <style type="text/css">
     /*样式表内容 */
        div{
            font-size: 50px;
            color: orange;
            background-color: rgb(0, 1, 0);
            width: 300px;
            height: 200px;
        }

        p{
            font-size: 20px;
            color: #00ffff;
        }
    </style>

</head>

<body>

    <div>AAAAA</div>
    <div>BBBBB</div>

    <p>CCCCC</p>
    <p>DDDDD</p>

    <div>AAAAA</div>

</body>
</html>
  • 类选择器  .自定义类名{属性: 值; 属性: 值}

    • 特点:   谁调用, 谁生效

      • 一个标签只可以调用多个类选择器
      • 多个标签可以调用同一个类选择器
    • 类选择器的命名规则
      • 不能使用数字开头
      • 不能使用特殊符号或者特殊符号开头( _ 除外 ) 来定义类名
      • 不建议使用汉字来命名.
      • 不建议使用属性或者属性的值来定义类名
<!DOCTYPE html>
<html>
<head>
    <title>Doucment</title>
    <meta charset="utf-8">
    <style type="text/css">
        .box{
            font-size: 40px;
            color: #ff0000;
            background-color: rgb(255, 222, 111);
            width: 400px;
            height: 200px;
        }

        .miss{
            text-indent: 2em;
            text-align: right;
        }

        .G{
            font-size: 200px;
            color: blue;

        }

        .o1{
            font-size: 200px;
            color: #990000;
        }

        .o2{
            font-size: 200px;
            color: orange;
        }

        .g{
            font-size: 200px;
            color: blue;
        }

        .l{
            font-size: 200px;
            color: #009900;
        }

        .e{
            font-size: 200px;
            color: orange;
        }
    </style>
</head>
<body>

    <div class="box miss">AAAAA</div>
    <div>BBBBB</div>

    <p class="box">CCCCC</p>
    <p>DDDDD</p>

    <span class="box">EEEEE</span>

    <br>
    <br>
    <br>

    <span class="G">G</span>
    <span class="o1">o</span>
    <span class="o2">o</span>
    <span class="g">g</span>
    <span class="l">l</span>
    <span class="e">e</span>

</body>
</html>
  • ID 选择器  #自定义名称{属性: 值; 属性: 值}

    • 特点

      • 一个 ID 选择器在一个页面只能使用一次, 如果使用 2 次或者 3 次以上, 不符合 w3c 规范, JS 调用会出问题
      • 一个标签只能调用一个 ID 选择器
      • 一个标签只可以同时调用类选择器和 ID 选择器
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <style type="text/css">
        #box{
            font-size: 40px;
            color: rgb(0, 0, 255);
            background-color: rgb(255, 255, 0);
        }

        #miss{
            text-align: center;
        }

        .box{
            text-indent: 2em;
        }
    </style>
</head>
<body>

    <div id="box" class="box">AAAAA</div>
    <div>BBBBB</div>

    <p>CCCCC</p>
    <p>DDDDD</p>

</body>
</html>
  • 通配符选择器(不推荐使用)  *{属性: 值; 属性: 值}

    • 特点:  给所有的标签都使用相同的样式
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <style type="text/css">

        *{
            font-size: 100px;
            color: red;

        }

    </style>
</head>
<body>

    <div>AAAAA</div>
    <div>BBBBB</div>

    <p>CCCCC</p>
    <p>DDDDD</p>

    <span>EEEEE</span>

</body>
</html>
  • 交集选择器  标签(选择器) + 选择器{属性: 值}

    • 特点:  既要满足使用了标签(选择器), 还要满足使用了类(ID)选择器
<head>
    <meta charset="utf-8">
    <title></title>

    <style type="text/css">
        .box{
            font-size: 50px;
        }

        div.box{
            color: red;
        }

        #miss{
            color: orange;
        }

        div#miss{
            width: 400px;
            height: 300px;
            background-color: green;
        }

        .box#miss{
            width: 400px;
            height: 400px;
            background-color: orange;
        }
    </style>
</head>
<body>

    <div class="box" id="miss">AAAAA</div>

    <p class="box">BBBBB</p>

    <div id="miss">CCCCC</div>

</body>
</html>
  • 后代选择器  选择器(标签) + 空格 + 选择器(标签){属性: 值}

    • 特点:  可以无限次隔代  只要能代表标签, 标签 类选择器 ID
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .box{
            font-size: 40px;
            color: red;
        }

        div p span{
            font-size: 50px;
        }

        .box span{
            background-color: blue;
        }

        .box .miss{
            color: red;
        }
    </style>
</head>
<body>

    <div class="box">
        <p>
            <span class="miss">AAAAA</span>
        </p>
    </div>

    <div class="box">
        <span>BBBBB</span>
    </div>

</body>
</html>
  • 子代选择器  选择器>选择器{属性: 值}

    • 特点:  选中的直接下一代元素
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">

        div>span{
            color: red;
            font-size: 40px;
        }

        p>span{
            color: green;
            font-size: 40px;
        }

    </style>
</head>
<body>

    <div>
        <p>
            <span>AAAAA</span>
        </p>

        <span>BBBBB</span>
    </div>

</body>
</html>
  • 并集选择器  选择器,选择器,选择器{属性: 值}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .box,#miss,span,h1{
            font-size: 100px;
            color: #fff;
            background-color: green;
        }
    </style>
</head>
<body>

    <div class="box">AAAAA</div>

    <p id="miss">BBBBB</p>

    <span>CCCCC</span>

    <h1>DDDDD</h1>

</body>
</html>
时间: 02-26

网页开发学习笔记三: HTML选择器的相关文章

网页开发学习笔记九: css 页面布局

文档流 块元素独占一行 行内元素在一行上显示 自上而下 浮动 float 用法 float: left | right; 特点 浮动起来 不占位置(脱标) 如果多个盒子都使用了浮动, 会在一行上显示 尽量用 display: inline-block; 来转 行内块 作用 文本绕图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title>

android开发学习笔记(三)Activity跳转以及传值

一:步骤: 1创建Intent对象,参数中指定将要跳转到的class 2通过Intent对象的putExtra()方法指定要传到下一个页面的数据.方法参数用键值对. 3通过调用startActivity(Intent intent)方法或者startActivityForResult(Intent intent,int requestCode)方法启动跳转. startActivtyForResult():Activity A跳转到Activity B,Activity B可以返回数据给Acti

网页开发学习笔记四: HTML样式表

内嵌样式 只作用于当前文件, 没有真正实现结构表现分离 <head> <style type="text/css"> 样式表写法 </style> </head> 外链样式 作用范围是当前站点, 范围广, 真正实现结构表现分离 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></ti

前端开发学习笔记三

把慕课的首页临摹了一下,感觉还不错. 顺便推荐一个前端编辑器,Adobe出的Brackets,可以实时预览,再也不用老是切换加f5了,可以极大的提高编写速度. 下载地址: http://brackets.io/

【web开发学习笔记】Structs2 Action学习笔记(三)action通配符的使用

action学习笔记3-有关于通配符的讨论 使用通配符,将配置量降到最低,不过,一定要遵守"约定优于配置"的原则. 一:前端htm <前端代码html> </head> <body> <a href="<%=context %>/actions/Studentadd">添加学生</a> <a href="<%=context %>/actions/Studentdel

【Android开发学习笔记】【第三课】Activity和Intent

首先来看一个Activity当中启动另一个Activity,直接上代码说吧: (1)首先要多个Activity,那么首先在res-layout下新建一个 Other.xml,用来充当第二个Activity的布局文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&qu

【web开发学习笔记】Structs2 Result学习笔记(三)带参数的结果集

Result学习笔记(三)带参数的结果集 第一部分:代码 //前端 <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030" /> <title>Insert title here</title> </head> <body> <ol> <li><a href="

VSTO学习笔记(三) 开发Office 2010 64位COM加载项

原文:VSTO学习笔记(三) 开发Office 2010 64位COM加载项 一.加载项简介 Office提供了多种用于扩展Office应用程序功能的模式,常见的有: 1.Office 自动化程序(Automation Executables) 2.Office加载项(COM or Excel Add-In) 3.Office文档代码或模板(Code Behind an Office Document or Template) 4.Office 智能标签(Smart Tags) 本次我们将学习使

Django Web开发学习笔记(4)

第四章 模板篇 上一章的内容,我们将HTML的代码和Python代码都混合在了在view.py的文件下.但是这样做的坏处无疑是明显的,引用DjangoBook的说法: 对页面设计进行的任何改变都必须对 Python 代码进行相应的修改. 站点设计的修改往往比底层 Python 代码的修改要频繁得多,因此如果可以在不进行 Python 代码修改的情况下变更设计,那将会方便得多. Python 代码编写和 HTML 设计是两项不同的工作,大多数专业的网站开发环境都将他们分配给不同的人员(甚至不同部门