正文

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

小小聪明屋  2022-02-07  281

关键词：

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

标签选择器　　标签{属性: 值; 属性:值;}

<!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>

csscss3学习笔记——选择器(代码片段)

...子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。✨课程链接【狂神说Java】CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili✨学习笔记——选择器我的第一... 查看详情

html之css选择器语法学习笔记

相关内容：css选择器的用法：选择器的语法标签选择器类选择器id选择器选择器的分组嵌套选择属性选择器子标签选择器相邻兄弟选择器参考资料：w3school 首发时间：2018-03-0223:54 css选择器的用法：css选择器的语法：cs... 查看详情

html学习笔记css(选择器2)

CSS类选择器类选择器允许以一种独立于文档元素的方式来指定样式CSS类选择器类选择器允许以一种独立于文档元素的方式来指定样式该选择器可以单独使用也可以和其他元素结合使用提示只要适当的标记文档后才能使用这些选择... 查看详情

html学习笔记jquery（选择器）

学习前端也有一段时间了，今天终于进入到JQuery阶段了，对于新手来讲，JQuery的选择器类型之多功能之强大实在不是一天两天能够记得完的。现在，就采用边学边记录的方式。以后要是忘了的话，也有一个地方能够迅速找到。今... 查看详情

html学习笔记css(选择器4)

CSS后代选择器后代选择器（descendantselector）又称为包含选择器。后代选择器可以选择作为某元素后代的元素。根据上下文选择元素我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结... 查看详情

前端三件套——css基础网页开发必备知识(代码片段)

文章目录🍓前言导读1.CSS引入方式1.1内嵌式1.2外联式1.3行内式2.基础选择器2.1标签选择器2.2类选择器2.3id选择器2.4通配符选择器3.字体与文本样式3.1font字体样式3.2text字体样式3.3文本修饰3.3line-height行高🍓前言上文笔者对HTM... 查看详情

html学习笔记css(选择器3)

CSS属性选择器属性选择器可以根据元素的额属性以及属性值来选择元素例子1如果你希望把包含title的所有元素变成红色*[title]{color:red}例子2与上面类似可以只对有href属性的锚应用样式a[herf]{color:red}例子3还可以根据多个属性进行... 查看详情

web前端开发笔记——第三章css语言第二节css选择器(代码片段)

目录前言一、CSS选择器（一）标签选择器（二）id选择器（三）类别选择器二、针对标签的选择器嵌套三、集体声明和全局声明（一）集体声明（二）全局声明结语前言CSS代码由选择器和一... 查看详情

jquery层级选择器学习笔记

html文档中的所有节点构成的拓扑结构类似于家谱，节点与节点之间存在着类似于父子、兄弟、祖孙这样的关系，层级选择器就是用于处理html文档中节点与节点之间的关系。如下介绍四种层级选择器：1.子选择器$(‘parent>child‘... 查看详情

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

内嵌样式只作用于当前文件,没有真正实现结构表现分离<head><styletype="text/css">样式表写法</style></head> 外链样式作用范围是当前站点,范围广,真正实现结构表现分离<!DOCTYPEhtml><html><head><metacharset... 查看详情

强哥css学习笔记

html嵌套css样式：1.外部（推荐）2.内部3.内联（不推荐）css优先级1.内联2.id选择器3.class选择器4.标签css长度单位：1.px2.em(14px)css选择器：常用选择器基本选择器层级选择器伪类选择器属性选择器常用选择器：1.标签2.id3.class4.关联.di... 查看详情

loadrunner基础学习笔记三

运行时设置：打开运行时设置：任务窗格中-选择回放-点击运行时设置按钮 1重复执行次数：=22步：控制迭代时间间隔3日志设置：指出要在运行测试期间记录的信息量4思考时间：可以在controller中设置，在回放时可以忽略... 查看详情

jquery学习笔记-选择器-

选择器的简单使用<%--CreatedbyIntelliJIDEA.User:cxspaceDate:16-8-25Time:下午2:29TochangethistemplateuseFile|Settings|FileTemplates.--%><%@pagecontentType="text/html;charset=UTF-8"language="java"%>< 查看详情

css学习笔记

CSS的使用方式style属性---> style标签--->head标签里面link--->三种基础选择器的区别html标签选择器：所有的html标签都可以当做选择器无论标签藏多深都会被选中选择的是所有的标签而不是某个具体的标签id选择器：任何的... 查看详情

css3与页面布局学习笔记——概要选择器特殊性与刻度单位

web前端开发者最最注的内容是三个：HTML、CSS与JavaScript，他们分别在不同方面发挥自己的作用，HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。当然内容与用户资源也是不能忽视的。尽量不... 查看详情

css-学习笔记

id和class选择器HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义。类选择器以一个点"."号显示层叠次序1、浏览器缺省设置2、外部样式表3、内部样式表（位于<head>标签内部）4、内联样式（在HTML元素内部）当... 查看详情

java学习笔记第十三章css

...新建css文件mystyle.css在html文件中通过link导入css【4】实际开发中常用第三种方式，这种方式真正做到了元素页面和样式分离【5】三种方式的优先级：就近原则13.2选择器和样式13.2.1基本选择器【4】优先级别：id选择器&g 查看详情

html+css学习笔记

上次我们说到了建立CSS的三种方式，这一次我们开始将目光放在具体的实现细节上。我们知道，CSS样式规则有两个主要部分，选择器决定将格式化应用到哪些元素上，而声明则定义要应用的格式化，这一次，我们重点关注如何定... 查看详情