07. CSS选择器

最新推荐文章于 2023-07-10 19:58:00 发布
最新推荐文章于 2023-07-10 19:58:00 发布
阅读量136 收藏
点赞数
分类专栏： 前端 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49111957/article/details/108633613
版权

CSS选择器

一、基本选择器

1、id选择器

#1、作用：
根据指定的id名称，在当前界面中找到对应的唯一一个标签，然后设置属性

#2、格式
id名称{
    属性:值;
}

#3、注意点：
1、企业开发中，仅仅为了设置样式一般不会使用id，（前端开发中id一般是留给js使用的）
2、每个标签都可以设置唯一一个id，id就像是一个生份证，因此同一界面的id不能重复使用
3、引用id要加#
4、id的命名只能由字符、数字、下划线组成，不能以数字开头，不能使用关键字如html、a、img等

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #p1 {
            color: red;
        }

        #p2 {
            color: green;
        }
    </style>
</head>
<body>
<p id="p1">两只黄鹂玩皮球</p>
<p id="p2">一行白鹭上西天</p>
</body>
</html>

2、类选择器

#1、作用：根据指定的类的名称，在当前界面中找到对应的标签，然后进行设置

#2、格式：
.类名称{
    属性:值;
}

#3、注意点：
1、类名就是专门用来给某个特定的标签设置样式的
2、每个标签都可以设置一个或者多个class（空格分隔），class就相当于人/标签的名称，因此同一界面内class可以重复
3、引用class一定要加.
4、class命名规则与id的一样

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .p1 {
            color: red;
        }
        .p2 {
            font-size: 30px;
        }
        .p3 {
            text-decoration: underline;
        }

    </style>
</head>
<body>
<p class="p2 p1">一行白鹭上西天</p>
<p class="p3 p2">两只黄鹂玩皮球</p>
<p class="p1 p3">一枝红杏出墙来</p>
</body>
</html>

3、标签选择器

#1、作用：根据指定的标签名称，在当前界面中找到所有该名称的标签，设置属性
#2、格式：
标签名称{
    属性:值;
}

#3、注意点：
1、只要是html的标签都能当做标签选择器
2、标签选择器选中的只是当前界面中的所有标签，而不能单独选中某一标签
3、无论嵌套多少层，标签选择器都能选中

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style type="text/css">
        p {
            color:red;
        }
    </style>
</head>
<body>
<p>两岸猿声啼不住</p>
<ul>
    <li>
        <ul>
            <li>
                <p>轻舟已过万重山</p>
            </li>
        </ul>
    </li>
</ul>
</body>
</html>
<!--(两句文字都是显示红色)-->

4、通配符选择器

#1、作用：选择所有标签

#2、格式：
* {
    属性:值;
}

#3、注意点：
企业开发中一般不使用通配符选择器，因为通配符选择器是设置界面上所有的标签的属性，所以在设置之前会会遍历所有的标签，性能和效率很差

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通配符选择器</title>
    <style>
        * {
            color:red;
        }
    </style>
</head>
<body>
    <h1>标题</h1>
<p>段落</p>
    <a href="#">点击带你去神秘的地方</a>
</body>
</html>

二、组合选择器

1、后代选择器

#1、作用：找到指定标签的所有后代标签，设置属性

#2、格式：
	标签名1 xxx {
        属性:值;
    }
#3、注意：
1、后代选择器必须用空格隔开
2、后代不仅仅是儿子，也包括孙子、重孙子...
3、后代选择器不仅仅可以使用标签名称，还可以使用其他选择器如id或者class
4、后代选择器可以通过空格一直延续下去

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style>
        div p {
            color:red;
        }
        div ul li a {
            color: green;
        }
    </style>
</head>
<body>
<p>111</p>
<div>
    <ul>
        <li>
            <p>222</p>
            <a href="#">点击1</a>
            <p>333</p>
            <ul>
                <li>
                   <p>444</p>
                </li>
            </ul>
            <a href="#">点击2</a>
        </li>
    </ul>
</div>
<p>555</p>
</body>
</html>
image-20200916170849568

2、子元素选择器

#1、作用：找到指定标签的所有特定的直接子元素，然后设置属性

#2、格式：
标签名1>标签名2 {
    属性:值;
}
先找到名称叫做"标签名称1"的标签，然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素

#3、注意点：
1、子元素选择器之间需要需要使用>连接，不能有空格（比如div >p会找div标签的所有后代标签，标签名为">p"）
2、子元素选择器只会查找儿子，不会查找其他嵌套的标签
3、子元素选择器不仅可以用标签名称，还可以使用其他选择器,比如id或class
4、子元素选择器可以通过>符号一直延续下去

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素选择器</title>
    <style>
        body>div>p {
            color:red;
        }
        .aaa>a {
            color:purple;
        }
    </style>
</head>

<body>
<p>111</p>
<div>
    <p>222</p>
    <ul>
        <li>
            <p>333</p>
        </li>
    </ul>
</div>
<ul>
    <li class="aaa">
        <a href="#">点击</a>
    </li>
</ul>
</body>
</html>
image-20200916172127388

3、毗邻选择器（/相邻兄弟选择器，CSS2推出）

#1、作用：选定紧邻其后的那个标签

#2、格式
选择器1+选择器2 {
    属性:值;
}
#3、注意点：
1、毗邻选择器必须通过+号链接
2、毗邻选择器只能选中紧跟其后的那个标签，不能选中被隔开的标签

4、弟弟选择器（/通用兄弟选择器，CSS3推出）

#1、作用：给指定选择器后面的所有选择器中国的所有标签设置属性
#2、格式：
选择器1~选择器2 {
    属性:值;
}
#3、注意点：
1、通用兄弟选择器必须用~来链接
2、通用兄弟选择器选中的是指选择器后面的某个选择器选中的所有标签（无论有没有被隔开，都可以被选中）

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>兄弟选择器</title>
    <style>
        h1 + p {
            font-size: 30px;
        }

        h3 ~ p {
            color: red;
        }
    </style>
</head>
<body>
<h1>锦瑟</h1>
<hr>
<p>李商隐</p>
<h3>唐</h3>
<p>此情可待成追忆</p>
<p>只是当时已惘然</p>
</body>
</html>
image-20200916173839188

三、交集选择器与并集选择器

1、交集选择器（不常用）

#1、作用：给所有选择器选中的标签内的相交的那部分标签设置属性】
#2、格式：
    选择1选择器2 {
            属性：值;
        }
#3、注意:
1、选择器与选择器之前没有任何连接符号
2、选择器可以使用标签名称、id、class
3、交集选择器在企业开发中并不多见，了解即可（因为：p.part1 完全可以用.part1取代）

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交集选择器</title>
    <style>
        p.part1 {
            color: red;
        }
        p#p1 {
            font-size: 30px;
        }
    </style>
</head>
<body>
<p class="part1">段落1</p>
<p>段落2</p>
<p id="p1">段落3</p>
<p>段落4</p>
</body>
</html>
image-20200916174904024

2、并集选择器

#1、作用：给所有满足条件的标签设置属性
#2、格式：
 	选择器1,选择器2 {
        属性：值;
    }
#3、注意：
1、选择器与选择器之间必须用逗号来链接
2、选择器可以使用标签名称、id、class

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>并集选择器</title>
    <style>
        p, .p1, a, h1 {
            color: red;
        }
    </style>
</head>
<body>
<h1>选择器</h1>
<h2>并集选择器</h2>
<p>111</p>
<p class="p1">222</p>
<ul>
    <li>
        <a href="#">点击</a>
    </li>
</ul>
</body>
</html>
image-20200916184848066

四、序列选择器

#1、作用：
CSS3中新推出的选择器中，最具代表性的10个，又被称为序列选择器，
过去的选择器中要选中某个必须加id或class，有了这10个后，不用加id或class，想选中同级别的第几个就选第几个

#2、格式
#2.1 同级别 (指定序列的必须还要是指定的类型，否则无法选中)
:first-child  		同级别的第一个
:last-child   		同级别的最后一个
:nth-child(n) 		同级别的第n个
:uth-last-child(n)  同级别倒数第n个
    
#2.2 同级别同类型
:first-of-type       同级别同类型的第一个
:last-of-type        同级别同类型的最后一个
:nth-of-type(n)      同级别同类型的第n个
:nth-last-of-type(n) 同级别同类型的倒数第n个
#2.3 其他
:only-of-type        同类型的唯一一个
:only-child          同级别的唯一一个

示例一：（同级别）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>序列选择器</title>
    <style>
        p:first-child {
            color: red;
        }
    </style>
</head>
<body>
<h1>序列选择器</h1>
<p>111</p>
<p>222</p>
<p>333</p>
<ul>
    <li>
        <p>444</p>
    </li>
</ul>
</body>
</html>
image-20200916191013312

示例二：（同级别同类型）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>序列选择器</title>
    <style>
        p:first-of-type {
            color: red;
        }
    </style>
</head>
<body>
<h1>序列选择器</h1>
<p>111</p>
<p>222</p>
<p>333</p>
<ul>
    <li>
        <p>444</p>
        <p>555</p>
    </li>
</ul>
</body>
</html>
image-20200916191216823

示例三：（only-of-type）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>序列选择器</title>
    <style>
        p:only-of-type {
            color: red;
        }
    </style>
</head>
<body>
<h3>序列选择器</h3>
<p>111</p>
<p>222</p>
<p>333</p>
<ul>
    <li>
        <p>444</p>
    </li>
</ul>
<ul>
    <li>
        <p>555</p>
    </li>
</ul>
</body>
</html>
image-20200916191812838

示例四：(only-child)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>序列选择器</title>
    <style>
        p:only-child {
            color: red;
        }
    </style>
</head>
<body>
<h4>同级别唯一一个</h4>
<p>111</p>
<ul>
    <li>
        <p>222</p>
    </li>
</ul>
<ul>
    <li>
        <p>333</p>
    </li>
</ul>
</body>
</html>
image-20200916192701106

五、属性选择器

#1、作用：根据指定的属性名称找到对应的标签，然后设置属性
	常用于input标签
#2、格式与具体用法
	[属性名]
    其他选择器[属性名]
    [属性名=值]
    [属性名^=值]
    [属性名$=值]
    [属性名*=值]
#3、示例：
1、找到所有包含id属性的标签
	[id]
2、找到所有包含id属性的p标签
	p[id]
3、找到所有class属性值为part1的p标签
	p[class="part1"]
4、找到所有href属性以“https”开头的a标签
	a[herf=^"https"]
5、找到所有src属性值以png结尾的img标签
	img[src$="png"]
6、找到所有class属性值中包含part2的标签
	[class*="part2"]

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        [id] {
            color:red;
        }
        p[id] {
            font-size: 30px;
        }
        p[class="part1"] {
            color: green;
        }
        a[href^="https"] {
            color:purple;
        }
        img[src$="png"] {
            width: 200px;
        }
        [class*="part"]
    </style>
</head>
<body>
<h1 id="id1">属性选择器</h1>
<p id="id2">段落1</p>
<p class="part1">段落2</p>
<p class="xx part2 yy">段落3</p>
<a href="#">点击</a>
<a href="http://www.baidu.com">百度</a>
<a href="https://www.baidu.com">百度一下</a>
<img src="aaa.png" alt="">
</body>
</html>
image-20200916195143933

六、伪类选择器

#1、常用的几种伪类选择器
#1.1 没有访问过的超链接a标签样式
a:link {
	color:blue;
}
    
#1.2 访问过的超链接a标签样式
a:visited {
    color:gray;
}

#1.3 鼠标悬浮在元素上应用样式：
a:hover {
    background-color: blue;
}
    
#1.4 鼠标点击瞬间的样式：
a:active {
    color: green;
}
    
#1.5 input输入框获取焦点时的样式
input:focus {
    outline: none;
    background-color: yellow
}
    
#2、注意：
1、a标签的伪类选择器可以单独出现，也可以一起出现
2、a标签的伪类选择器如果一起出现，有严格的顺序要求，否则失效
	link,visited, hover,active
3、hover是所有其他标签都能用的
4、focus只能给input标签使用

示例：

<style>
    a:link {
        color: red;
    }

    a:visited {
        color: #55BBBB;
    }

    a:hover {
        color: green;
    }

    a:active {
        color: red;
    }
    input:hover {
        outline:none;
        background-color: gray;
    }
</style>

七、伪元素选择器

#1、常用的伪元素：
#1.1 first-letter:  杂志文章首字母样式调整
示例：
p:first-letter {
    font-size: 40px;
}
#1.2 before
用于在元素的内容前面插入新内容
示例：在所有p标签内容前面加上一个红色的￥
p:before {
    content: "￥";
    color:red;
}
#1.3 after
用于在元素的内容后面插入新内容
例如：在所有p标签的内容后面加上一个绿色的$。
p:after {
    content:"$";
    color: green;
}

八、CSS三大特性

1、继承性

#1、定义：给某个元素设置一些属性，钙元素的后代也可以使用，这个我们称之为继承性

#2、注意：
	① 只有以color、font-、text-、line-开头的属性才可以继承
    ② a标签的文字颜色和下划线是不能继承别人的
    ③ h标签的文字大小是不能继承别人的，会变大，但是会在原来字体大小的基础上变大
    
    PS：打来浏览器审查元素可以看到一些inherited from... dse 属性
#3、应用场景：
	同常基于继承性统一设置网页的文字颜色、字体、文字大小等样式

2、层叠性

#1、指的是CSS处理冲突的一种能力，即如果有多个选择器选中了同一个标签那么就会有覆盖效果

#2、注意：
① 层叠性只有在多个选择器选中了同一个标签，然后设置了同样的属性，才会发生层叠性
② 通过Chrome浏览器可以查看到，一些属性被花掉了（被覆盖了）

3、优先级

# 定义：当多个选择器选中同一个标签，并且给同一个标签设置了相同的属性时，如何层叠就由优先级来确定

#优先级：
	整体优先级从高到低：行内样式>嵌入样式>外部样式

行内样式不推荐使用，所以以嵌入式为例介绍优先级

# 1、大前提：直接选中>间接选中(即继承而来的)

# 2、如果都是间接选中，那么谁离目标比较近，就使用谁的

# 3、如果都是直接选中，并且都是同类型的选择器，那么就是谁写的在后面就使用谁的

# 4、如果都是直接选中，并且是不同类型的选择器，那么会按照选择器的优先级来层叠
	id>类>标签>通配符（也算是直接选中）> 继承>浏览器默认（即没有任何属性设置）
    
# 5、优先级之 !important
	作用：强制指定的属性优先级提升为最高。 不推荐使用的原因：大量使用！important代码会打破原有的秩序，难以维护
    注意：
    - !important只能用于直接选中，不能用于间接选中
    - !important只能用于提升被指定属性的优先级，其他属性的优先级不会被提升
    - !important必须写在属性分号的前面
#6、优先级之权重计算
	- 强调：如果都是直接选中，并且混杂可一系列其他的选择器一起使用时，则需要通过计算机权重来判定优先级
    - 计算方式：
    ① id数多的优先级高
    ② id数相同，则判定类数多的优先级高
    ③ id数、类数均相同时，则判定标签数多的优先级高
    ④ id数、class数、标签数相同时，谁写在后面谁的优先级高
知行合一cc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS选择器.pdf
10-09
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 "CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。）
JSoup CSS选择器用法大全
最新发布
08-15
备查，搞爬虫开发者必备
前端必知：11.css选择器的使用以及选择器的优先级
qq_52799985的博客
07-10 1910
E m { css内容 } 通过E选择器 设置 E中的 m 选择器 的css内容，m可以是E的。E>M {css内容} 通过E选择器找到 E选择器的子级M选择器，设置css内容。E~M{css内容}通过E选择器找到 该元素之后所有选择器名为M的兄弟元素，并。a的伪类，伪类是css系统创建好的内部的类，用来对标签的某个时机设置样式。如果多种选择器所表达的css内容是相同的，则可以把他们写成群组选择器。假设后面的数字是权重的值，那么在比较的时候，只需把选择器的值。子级，也可以是E的后代中的某一个选择器。
css选择器有哪些？
weixin_47450807的博客
04-04 1万+
一、写在前面 css选择器有很多，但是常用到的也就几个，今天总结一下。 二、具体选择器 2.1、id选择器 #myId {} 2.2、类选择器 .myClass {} 2.3、标签选择器 p,h1 {} 2.4、后代选择器 div h1 {} 2.5、子选择器 div>h1 {} 2.6、兄弟选择器(所有的兄弟) ul~h1 {} 2.7、相邻兄弟选择器 ul+h1 {} 2.8、属性选择器 li[name='sss'] {} 2.9、伪类选择器 h1:hover {} 2.10 h
css的父选择器
Cribug8080的博客
05-22 4万+
css的父选择器 首先声明一点，目前没有css的父选择器。新出的css3也没有。但是已经有很多人有很多次提案了。 反向选择 在2008年Shaun Inman建议这种父选择器。 a < img{ border: none; } 这段css的目的是选择img元素的a标签。 parent Remy Sharp建议使用:parent a img:parent { background: ...
CSS选择器分类大全
m0_67859656的博客
11-05 6250
CSS选择器分类大全 基础选择器 一、基础选择器 二、复合选择器 三、CSS3选择器补充： （一）层级选择器： （二）属性选择器 （三）伪类选择器
CSS选择器优先级
热门推荐
qq_46133833的博客
04-30 5万+
CSS选择器优先级 （1）CSS选择器都有权重值，权重值越大优先级越高。 内联样式表的权重值最高，值为1000。 id选择器的权重值为100。 class选择器的权值为10。 类型（元素）选择器的优先级为1。 通配符选择器的优先级为0。 （2）当权值相等时，后定义的样式表要优于先定义的样式表。 （3）在同一组属性设置中表有**“!important"**规则的优先级最大。 后代选择器 CSS后代选择器指为某标签元素内的特定后代标签元素来定义其样式。在CSS后代选择器中，规则左边的选择器一端包含两个或多个
CSS 选择器支持列表
09-25
CSS 选择器支持列表 CSS 选择器是 CSS 中的一个重要组成部分，它允许开发者根据特定的规则来选择和应用样式到 HTML 元素上。下面是 CSS 选择器支持列表的详细解释： ### 一、基本选择器 * `E`：选择所有 HTML ...
CSS选择器.docx
07-15
关于css各类选择器的介绍，帮助我们更好的掌握css选择器对应的用处，也可以方便我们更快的进行查阅。
css选择器.xmind
07-28
脑图形式的css选择器和层叠规则整理，包括css选择器的类型以及css层叠规则的影响因素（重要性、来源、特殊性、顺序等等），属于前端基础技术的资源
05. body内常用标签
梅开二度，异常绚烂
09-15 490
body内的常用标签一、HTML语义化二、字符实体三、h系列标签四、p标签五、img标签六、a标签七、列表标签八、table标签1、语义：标记一段数据为表格2、表格属性3、设置细线表格的三种方式4、表格结构：5、单元格合并6、传统布局：九、form标签 一、HTML语义化 body中的标签是会显示到浏览器窗口中的，body中的标签只是用来标记语义的（即提示被标记的内容是用来做什么的） 对于那些只用来修改样式的标签将会被淘汰掉，比如以下标签都是没有语义的，只修改样式 # 1、<br> 换行 满园
08. CSS属性设置
梅开二度，异常绚烂
09-17 295
CSS属性设置一、字体设置1、font-weight：文字粗细2、font-style：文字风格3、font-size：文字大小4、font-family：文字字体5、文字属性简写6、color：文字颜色二、文本属性1、text-align：规定元素中的文本的水平对齐方式2、text-decoration：文本修饰3、text-indent：首行缩进4、line-height：行高三、背景属性1、背景属性类别2、背景缩写：3、背景图片与插入图片的区别4、rgba与opacity的区别5、精灵图四、盒子模型1
12. jQuery
梅开二度，异常绚烂
11-17 279
jQuery及其使用一、jQuery简介1、什么是jQuery?2、为何要使用jQuery3、jQuery版本二、基本使用1、引入2、jQuery对象3、文档就绪事件4、链式操作5、jQueryDOM和jsDOM三、选择器四、筛选器五、标签操作值样式操作六、标签操作值文本内容操作七、标签操之属性操作八、标签操作之文档处理 一、jQuery简介 1、什么是jQuery? #1、jQuery是一个高效、精简并且功能丰富的JavaScript工具库 #2、jQuery极大的简化了JavaScript编程 2、为
01. HTTP协议
梅开二度，异常绚烂
09-11 266
HTTP协议一、HTTP协议简介1、互联网2、HTTP协议3、HTTP/1.1详解3.1 Persistent Connection（keepalive连接）3.3 chunked编码传输3.4 字节范围请求二、HTTP协议之请求Request1、请求的URL2、request请求的格式3、HTTP请求方法（了解）三、HTTP协议之响应Response1、组成部分2、详解：3、HTTP响应状态码四、HTTP协议完整工作流程五、HTTP协议关键性总结六、自定义套接字分析HTTP协议 一、HTTP协议简介 1、
09. CSS网页布局
梅开二度，异常绚烂
09-22 240
网页布局一、网页布局方式1、什么是网页布局方式？2、网页布局/排版的三种方式二、标准流三、浮动流1、浮动流是一种半脱离标准版的排版方式1.1 什么是脱离文档流？1.2 什么是半脱离文档流？2、 浮动元素贴靠问题3、 浮动元素字围现象4、 浮动流排版5、浮动元素高度问题（父级塌陷）6、清除浮动6.1 方式一：设置高度防止塌陷6.2 方式二：clear6.3 方式三：隔墙法6.4 方式四：CSS伪元素法6.5 方式五：overflow:hidden四、定位流1、相对定位就是相对于自己以前在标准流中的位置来移动1
13. jQuery事件及其操作
梅开二度，异常绚烂
11-17 220
jQuery事件、事件操作一、事件介绍1、什么是事件？2、什么是事件流？二、事件操作1、常见事件2、事件绑定与解除绑定的方法3、事件对象4、事件冒泡的应用之事件委托 一、事件介绍 1、什么是事件？ //事件就是鼠标点击click、页面滚动onscroll、鼠标悬停mouseover等元素的操作等称之为事件，对HTML元素产生的事件可以被绑上具体的操作，称之为事件绑定，比如在点击某一个元素时，触发某个一个功能的执行 2、什么是事件流？ 由于html是一个树形嵌套结构，如下： html |
02. 开发环境——HTML发展史
梅开二度，异常绚烂
09-14 207
html标签介绍一、开发环境1、浏览器2、文件后缀名规范3、HTML发展史 一、开发环境 市面上有很多HTML编辑器可选，常见的有Hbuild、Sublime Text、Dreamweaver等，pycharm也支持HTML开发。 1、浏览器 - 浏览器在本地也能打开HTML文件，浏览器就像解释器一样，从上到下，从左到右 - 全球五大浏览器厂商：Chrome、IE、Firefox、Safari、presto - 浏览器内核不同，浏览器渲染引擎不同（后期要考虑兼容性问题），其他浏览器都是用的这5款浏览器的内核
11. JavaScript的BOM、DOM操作
梅开二度，异常绚烂
11-17 198
JavaScript的BOM、DOM操作一、BOM操作1、介绍2、 对象history、navigator、screen(了解)3、location对象4、弹出系统对话框1.5 打开关闭窗口1.6 浏览器窗口内部的高度和宽度1.7 定时器二、DOM操作2、介绍2、查找节点3、增加节点4、删除、替换节点5、修改/设置节点属性6、获取元素的标签7、class操作8、CSS操作9、事件 一、BOM操作 1、介绍 BOM: Browser Object Model，浏览器对象模型，BOM的结构图： #1、DOM对
04. head内常用标签
梅开二度，异常绚烂
09-14 193
head内常用标签一、head内常用标签1、meta相关2、非meta标签 一、head内常用标签 1、meta相关 #1、指定字符集 <meta charset="gbk"> #2、页面描述 <meta name="description" content="具体描述..."> #3、关键字：有助于搜索引擎SEC优化， <meta name="Keywords" content="网易,邮箱,游戏,新闻"> #4、固定时间后跳转网页（如3秒后跳转百度) <m
. css中有哪些选择器
05-27
CSS中有很多种选择器，包括： 1. 元素选择器（element selector）：根据元素的名称选择元素，如p、h1、a等。 2. 类选择器（class selector）：根据元素的class属性选择元素，如.class1、.class2等。 3. ID选择器...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值