6.CSS介绍选择器
2024-04-13 18:10:07
文章目录
- 1.CSS
- 1.1简介
- 1.2语法结构
- 1.3引入方式
- 1.直接书写
- 2.外部引入
- 3.行内书写
- 1.4css注释
- 2.基本选择器
- 2.1标签选择器
- 1.介绍
- 2.格式
- 3.演示
- 2.2id选择器
- 1.介绍
- 2.格式
- 3.演示
- 2.3类选择器
- 1.介绍
- 2.格式
- 3.演示
- 2.4通用选择器
- 1.介绍
- 2.格式
- 3.演示
- 3.组合选择器
- 3.1后代选择器
- 1.介绍
- 2.格式
- 3.演示
- 1.标签组合
- 2.id组合
- 3.类名组合
- 4.混合组合
- 3.2儿子选择器
- 1.介绍
- 2.格式
- 3.演示
- 3.3毗邻选择器
- 1.介绍
- 2.格式
- 3.演示
- 3.4弟弟选择器
- 1.介绍
- 2.格式
- 3.演示
- 1.指定弟弟标签演示
- 2.所有弟弟标签演示
- 4.集合选择器
- 4.1交集选择器
- 1.介绍
- 2.格式
- 3.演示
- 4.2并集选择器
- 1.介绍
- 2.格式
- 3.演示
- 1.同类型选择器
- 2.不同类型选择器
- 5.序列选择器
- 5.1不同类型序选择器
- 1.介绍
- 2.格式
- 3.演示
- 1.序选择器
- 2.唯一选择器
- 3.奇偶选择器
- 4.公式条件
- 5.2同类型序列选择器
- 1.介绍
- 2.格式
- 3.演示
- 1.序列选择器_区分类型
- 6.属性选择器
- 6.1匹配属性
- 1.介绍
- 2.格式
- 3.演示
- 6.2匹配属性与值
- 1.介绍
- 2.格式
- 3.演示
- 7.条件匹配
- 7.1以什么开头
- 1.介绍
- 2.格式
- 3.演示
- 7.2以什么结尾
- 1.介绍
- 2.格式
- 3.演示
- 7.3属性值包含某个值
- 1.介绍
- 2.格式
- 3.演示
- 8.伪类选择器
- 8.1作用
- 8.2演示
- 9.伪元素选择器
- 9.1作用
- 9.2演示
1.CSS
1.1简介
CSS 是一种描述 HTML 文档样式的语言。
作用:为HTML便签添加样式，让它变的好看。html的作用是添加语义。
css的作用是添加样式。
css学习选择器和属性。
1.2语法结构
选择器 (属性1:值; 属性2:值; 属性3:值;) --> 声明块选择器:指向您需要设置样式的 HTML 元素/标签。声明块:包含一条或多条,用分号分隔的声明。每条声明都包含一个CSS属性名称和一个值，以冒号分隔。多条CSS声明用分号分隔，声明块用花括号括起来。
1.3引入方式
HTML代码渲染样式需要先引用css代码.
引用的方式有三种:1.HTML文档中style标签内直接书写 (临时使用)2.使用link标签引用外部css文件 (最正规的方式,解耦合)3.在HTML标签的style属性中书写 (临时使用，不推荐使用)
1.直接书写
在head标签内使用style标签.
内部直接书写（临时使用）
<head>
···<style type="text/css">选择器（标签）{属性:值;key:value;···}</style>
</head>
分号不要省略。
style 标签中，默认带有 type="text/css" 告诉浏览器这个是css文件,可以省略不写。
2.外部引入
link便签引用外部css文件
<link rel="stylesheet" href="01.css">
3.行内书写
在HTML标签的style属性中书写 可以称为 行内式
<h1 style="color: chartreuse">书写样式1</h1>
这个方式是最不推荐的,html只需要为文字添加语意就可以了,
css才是设置样式的.分工明确!
1.4css注释
/* 单行注释 */ /*
多行注释1
多行注释2
/*
通常使用css样式的时候也会用来注释划定样式区域，
（因为HTML代码多，对应的css代码也很多）/* 博客园首页的css样式文件 */
/* 顶部导航条样式 */
···
/* 左侧菜单栏样式*/
···
/* 右侧菜单栏样式 */
···
2.基本选择器
css 为标签设置样式,需要先通过选择器来匹配标签,在设置样式.
基本选择器:1.标签选择器2.id选择器3.类选择器4.通用选择器
2.1标签选择器
1.介绍
依据标签的名字找到标签。
标签选择器会选后，当前页面的所有该标签都被选中。
2.格式
标签名称 {属性:值;
···
}
3.演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>标签签选择器</title><style>h1 {color: red; /* 设置标签的文字的颜色 */}h3 {color: aqua;}</style>
</head>
<body><h1>石灰吟</h1><h6>作者:于谦</h6><h3>千锤万凿出深山，烈火焚烧若等闲。</h3><h3>粉骨碎身浑不怕，要留清白在人间。</h3>
</body>
</html>
2.2id选择器
1.介绍
依据标签的id属性值找到标签。
在html中id属性的值可以当做是唯一的标识.注意:
1.id选择器需要加上#号。
2.每个标签都有id属性，同一个页面中id不能重复。
3.id值只能由字母/数字/下划线组成，不能以数字开头，也不能与标签名重名。
4.一般情况下不会使用id，在前端中id是留给js使用的。
2.格式
#id {属性: 值;
}
3.演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>id选择器</title><style>#d1 {color: red; /* 设置标签的文字的颜色 */}#d2 {color: aqua;}</style>
</head>
<body><h1>石灰吟</h1><h6>作者:于谦</h6><h3 id="d1">千锤万凿出深山，烈火焚烧若等闲。</h3><h3 id="d2">粉骨碎身浑不怕，要留清白在人间。</h3>
</body>
</html>
2.3类选择器
1.介绍
依据标签的class属性值找到标签。
一般用于批量设置.注意:
1.类选择器需要加上.号。
2.每个标签都有class属性，类名可以重复。
3.类名只能由字母/数字/下划线组成，不能以数字开头，也不能与标签名重名。
4.类名是给标签设置样式的，CSS使用。
5.标签可以绑定多个类名，类名之间用空格隔开。<标签 class="类名1 类名2 ···">
2.格式
.类名 {属性:值;
}
3.演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>类选择器</title><style>.c1 {color: red; /* 设置标签的文字的颜色 */}.c2 {color: aqua;}.typeface {font-family: '楷体'; /* 设置标签的文字的字体 */}</style>
</head>
<body><h1>石灰吟</h1><h6 class="c1">作者:于谦</h6><h3 class="c2 typeface">千锤万凿出深山，烈火焚烧若等闲。</h3><h3>粉骨碎身浑不怕，要留清白在人间。</h3>
</body>
</html>
2.4通用选择器
1.介绍
为当前页面所有的标签设置属性。注意:
1.使用*通配符,找到当前html的所有标签.(也被称为通配符选择器.)
2.使用后会遍历所有的标签，当标签比较多的时候，性能会变差，开发者一帮不会去使用。
（后续学习其他的方案去解决这些问题。）
2.格式
* {属性:值;
}
3.演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>通配符选择器</title><style>* {color: red; /* 设置标签的文字的字体 */}</style>
</head>
<body><h1>标题</h1><p>1</p><p>2</p><ul><li><p>3.1</p><p>3.2</p></li></ul>
</body>
</html>
3.组合选择器
在前端将便签的嵌套用亲戚关系来描述层级。
嵌套的关系定义:
1.后代选择器 空格
2.儿子选择器 >
3.毗邻选择器 +
4.弟弟选择器 ~
3.1后代选择器
1.介绍
后代标签包括了儿子标签，孙子标签 ···
后代选择器可以指定特定的后代标签.(默认是所有)注意点:
1.后代选中器使用空格隔开。
2.标签名称 id 类可以进行任意组合。
3.顺序-->: 标签名称 #id .类名.
2.格式
格式:
标签名称 #id .类名 {属性:值;
}
3.演示
1.标签组合
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>后代选择器(标签组合)</title><style>ul li p { color: red;}body p {font-size: 30px;}</style>
</head>
<body><p>段落一</p><p>段落二</p><ul><li><p>段落三</p></li></ul>
</body>
</html>
2.id组合
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>后代选择器(id组合)</title><style>#d1 #d2 {color: #04ff00;}#d11 #d12 #d13 {color: red;}</style>
</head>
<body><p>段落一</p><ul id="d1"><li id="d2"><p>段落二</p></li></ul><ul id="d11"><li id="d12"><p id="d13">段落三</p></li></ul>
</body>
</html>
3.类名组合
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>后代选择器(类组合)</title><style>.c1 .c2 .c3 {color: red;}</style>
</head>
<body><p>段落一</p><p>段落二</p><ul class="c1"><li class="c2"><p class="c3">段落三</p></li></ul></body>
</html>
4.混合组合
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>后代选择器(混合组合)</title><style>ul #d1 .c1 {color: red;}</style>
</head>
<body><p>段落一</p><ul><li id="d1"><p class="c1">段落二</p></li></ul></body>
</html>
3.2儿子选择器
1.介绍
为标签的儿子标签，设置属性。注意点:
1.子元素之间需要使用>号。
2.选择器可以是 标签/id/类 名称 任意组合。
2.格式
父标签>儿子标签{属性: 值;
}
3.演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>后代选择器(标签组合)</title><style>ul > li > p {color: red;}body > p {font-size: 30px;}</style>
</head>
<body><p>段落一</p><ul><li><p>段落二</p></li></ul><p>段落三</p>
</body>
</html>
3.3毗邻选择器
1.介绍
同级紧跟在自己标签后面的第一个标签。(CSS2)注意:
1.相邻兄弟选择器必须使用+号连接。
2.格式
标签+标签 {属性: 值;
}
3.演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>毗邻选择器</title><style>h1 + p {color: red;}</style>
</head>
<body><h1>标题</h1><p>第一段落</p><p>第二段落</p><p>第三段落</p>
</body>
</html>
3.4弟弟选择器
1.介绍
同级自己标签后面的所有选中的标签。(CSS3)注意:
1. 通用兄弟选择器必须使用~号连接。
2.格式
标签~标签 { /* 指定的弟弟 */属性: 值;
}
标签~* { /* 所有的弟弟 */属性: 值;
}
3.演示
1.指定弟弟标签演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>弟弟选择器</title><style>h1 ~ p { /* 指定 弟弟p标签 */color: red;}</style>
</head>
<body><h1>标题</h1><p>第一段落</p><p>第二段落</p><p>第三段落</p><spa>xxx</spa>
</body>
</html>
2.所有弟弟标签演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>弟弟选择器</title><style>span ~ * { /* 指定 所有弟弟标签 */color: red;}</style>
</head>
<body><h1>标题</h1><span>123</span><p>第一段落</p><p>第二段落</p><p>第三段落</p></body>
</html>
4.集合选择器
集合选择器:
1.交集选择器
2.并集选择器
4.1交集选择器
1.介绍
找到多个标签中,属性相同的的标签.注意:
1.选择器中间没有符号。
2.选择器可以是 标签/id/类 名称 任意组合。
2.格式
选择器1选择器2 { /* 连写 */属性:值;
}
3.演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>交集选择器</title><style>p.c1 {color: red;}.c1#d1 {color: aqua;}</style>
</head>
<body><h1 class="c1" id="d1">标题</h1><p>第一段落</p><p class="c1">第二段落</p><p>第三段落</p><p class="c1">第四段落</p><p>第五段落</p>
</body>
</html>
4.2并集选择器
1.介绍
选中的多个标签设置一个属性。注意点:
1.并集选择器使用,号连接.
2.选择器可以是 标签/id/类 名称 任意组合.
2.格式
选择器1, 选择器2 {属性: 值;
}
3.演示
1.同类型选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>并集选择器1</title><style>.c1, .c2 {color: red;}</style>
</head>
<body><h1 class="c1">标题</h1><p class="c2">第一段落</p><p>第二段落</p><p>第三段落</p>
</body>
</html>
2.不同类型选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>并集选择器2</title><style>#d1, .c1, span p span{color: red;}</style>
</head><body><div id="d1">div</div><p class="c1">p</p><span>span<p>p<span> p内span </span></p></span></body>
</html>
5.序列选择器
CSS3中新增加且具有代表性的选择器。
序列选择器: (同类型指定的相同的标签)
1.不同类型序列选择器 (不区分类型)
2.同类型序列选择器 (区分类型)
5.1不同类型序选择器
1.介绍
其父元素的第几个标签.注意:
1.使用冒号:分隔.
2.冒号前面的标签必须和序号对上才满足条件.(设置的样式只针对冒号前面的标签)
2.不区分类型.
2.格式
其父元素的第一一个子元素标签:first-child {属性:值;}
其父元素的最后一个子元素标签:last-child {属性:值;}
其父元素的第n个标签标签:nth-child(n) {属性:值;}
其父元素的倒数第n个标签标签:nth-last-child(n) {属性:值;}
父元素中只存在唯一一个标签标签:only-child {属性:值; }
父元素中所有奇数标签标签:nth-child(odd) {属性:值;}
父元素中所有偶数标签标签:nth-child(even) {属性:值;}
公式条件nth-child(xn+y) {属性:值;} x 与 y 为自定义数字,n为数字从0开始递增。2n+0 2*0+0 = 0 2n+1 2*0+1 = 12n+0 2*1+0 = 2 2n+1 2*1+1 = 3
3.演示
1.序选择器
p标签直接写在body标签下last-child不行,写在一个div标签内测试.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>序选择器</title><style>p:first-child { /*其父元素的第一一个子元素*/color: red;}p:last-child { /* 需要嵌套在div标签内才能生效*/color: gold;}p:nth-child(2) { /*其父元素的第n个标签*/color: greenyellow;}span:nth-last-child(4) { /*其父元素的倒数第n个标签*/color: aqua;}</style>
</head>
<body><div><p>p1</p><p>p2</p><p>p3</p><span>s1</span><p>p4</p><p>p5</p><p>p6</p></div>
</body>
</html>
2.唯一选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>唯一选择器</title><style>p:only-child {color: red;}</style>
</head>
<body><p>1段落</p><ul><li><p>2.1段落</p> <!--不区分类型,父元素中只存在唯一一个p标签--></li></ul>
</body>
</html>
3.奇偶选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>奇偶选择器</title><style>p:nth-child(odd) {color: red;}p:nth-child(even) {color: blue;}</style>
</head>
<body><div><p>p1</p><p>p2</p><p>p3</p><p>p4</p><p>p5</p><p>p6</p><span>s1</span><span>s2</span></div>
</body>
</html>
4.公式条件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>公式条件</title><style>p:nth-child(2n+1) {color: red;}</style>
</head>
<body><div><p>p1</p><p>p2</p><p>p3</p><p>p4</p><p>p5</p><p>p6</p></div>
</body>
</html>
5.2同类型序列选择器
1.介绍
其父元素的第一一个子元素注意:
1.使用冒号:分隔.
2.冒号前面的标签必须和序号对上才满足条件.
3.区分类型。
2.格式
其父元素下同级同类型的第一个标签标签:first-fo-tyoe {属性:值;}
其父元素下同级同类型的最后一个标签标签:last-fo-tyoe {属性:值;}
其父元素下同级同类型的第n个标签标签:nth-fo-type(n) {属性:值;}
其父元素下同级同类型的倒数第n个标签标签:nth-last-fo-type(n) {属性:值;}
父元素中同类型标签只存在一个only-of-type {属性:值;}
3.演示
1.序列选择器_区分类型
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>序列选择器_同类型下</title><style>p:first-of-type { /*其父元素下同级同类型的第一个标签*/color: red;}p:last-of-type { /*其父元素下同级同类型的最后一个标签*/color: #ffaa00;}p:nth-of-type(2) { /*其父元素下同级同类型的第n个标签*/color: #04ff00;}p:nth-last-of-type(2) { /*其父元素下同级同类型的倒数第n个标签*/color: blue;}</style>
</head>
<body><div><span>s1</span><p>p1</p><p>p2</p><p>p3</p><p>p4</p><p>p5</p><span>s2</span><p>p6</p></div>
</body>
</html>
2.唯一选择器_区分类型
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>唯一选择器</title><style>p:only-of-type {color: red;}</style>
</head>
<body><p>1段落</p><ul><li><p>2.1段落</p> <!--区分类型,父元素中只存在唯一一个p标签--></li></ul>
</body>
</html>
6.属性选择器
标签中包含属性:
1.只匹配属性
2.匹配属性与值
6.1匹配属性
1.介绍
标签中只包含属性即可.
2.格式
标签 [属性] {属性:值;
}
3.演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>只包含属性</title><style>p[id] {color: red;}</style>
</head>
<body><p id="d1">1</p><p>2</p><p id="d2">3</p><p>4</p><p id="d3">5</p>
</body>
</html>
6.2匹配属性与值
1.介绍
标签中包含属性=值.
2.格式
标签 [属性=值] {属性:值;
}
3.演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>属性=值</title><style>p[class=c1] {color: red;}</style>
</head>
<body><p class="c1">1</p><p>2</p><p class="c1">3</p><p>4</p><p class="c2">5</p>
</body>
</html>
7.条件匹配
条件匹配选择器:
1.属性的取值以什么开头
2.属性的取值以什么结尾
3.属性的取值包含某个值
7.1以什么开头
1.介绍
属性的取值以什么开头.
2.格式
CSS2[属性|=值] {属性:值;}CSS3 替代上面这个[属性^=值] {属性:值;}区别:CSS2中的只能找到value开头，并且value是被-隔开的。CSS3中的只能找到value开头的都可以找到。
3.演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>以什么值开头</title><style>img[alt^=abc] {color: red;}img[alt|=abc] {font-size: 30px;}</style>
</head>
<body><img src="" alt="abc-1"> <!--符合--><img src="" alt="abc2"> <!--符合--><img src="" alt="abc 3"> <!--符合--><img src="" alt="xxx">
</body>
</html>
7.2以什么结尾
1.介绍
属性的取值以什么结尾
2.格式
CSS3
[属性$=值] {属性:值;
}
3.演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>以什么值结尾</title><style>img[alt$=a] {color: red;}</style>
</head>
<body><img src="" alt="1-a"> <!--符合--><img src="" alt="2 a"> <!--符合--><img src="" alt="3a"> <!--符合--><img src="" alt="xa"> <!--符合--><img src="" alt="xx">
</body>
</html>
7.3属性值包含某个值
1.介绍
属性的取值包含某个值
2.格式
CSS2
[属性~=值] {属性:值;
}
CSS3 替代上面这个
[属性*=值] {属性:值;
}区别:
CSS2中的只能找到独立的单词，左右两边被空格隔开。
CSS3中的只要是包含value就能找到。
3.演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>包含某个值</title><style>img[alt*=abc] {color: red;}img[alt~=abc] {font-size: 30px;}</style>
</head>
<body><img src="" alt="qqq abc xxx"> <!--符合--><img src="" alt="www-abc-xxx"> <!--符合--><img src="" alt="abcdef"> <!--符合--><img src="" alt="qqqabc"> <!--符合--><img src="" alt="xxxxx">
</body>
</html>
8.伪类选择器
8.1作用
1. :link 访问前的样式设置，在一个浏览器调开过一次就失效了，换一个浏览器获取换一个网址。
2. :hover 悬浮的样式设置
3. :active 点击的样式设置
4. :visited 访问后的样式设置
5. :focus input框获取焦点（光标在输入框内）
8.2演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪类选择器</title><style>a:link{ /*访问之前的状态*/color: red;}a:hover{ /*鼠标悬浮态*/color: green;}a:active{ /*激活态 鼠标点击不松开态*/color: blue;}a:visited{ /*访问之后的状态*/color: dimgrey;}p:hover{color:hotpink;}input:focus{ /* input框获取焦点（光标在输入框内）*/background-color: greenyellow;}</style>
</head>
<body><!-- a标签为链接标签 --><a href="https://www.jd.com"> 在不在 </a><p>效果展示</p>姓名:<input type="text">
</body>
</html>
9.伪元素选择器
9.1作用
1. :first-letter 作用于文本的第一个文字。
2. :before 在文本首部插入文本，文本不可选中。
3. :after 在文本尾部插入文本，文本不可选中。before 与 after 通常是用来清除浮动的影响:父标签塌陷问题。
4. font-size:48px; 字体大小设置
9.2演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪元素选择器</title><style>p:first-letter{font-size: 22px; /*设置字体大小 22像素*/color: red;}p:before{content: '我自问:'; /*在文本开头插入文本内容，鼠标无法选中*/color: blue;}p:after{content:'睡吧，明天在学习！';color: darkgray;}</style>
</head>
<body><p>今天学习了吗？</p>
</body>
</html>
6.CSS介绍选择器相关推荐
- 【狂神css笔记】CSS介绍选择器
css是什么 Cascading Style Sheet:层叠级样式表 CSS:表现(美化网页) 字体,颜色,边距,高度,宽度,背景图片,网页定位,网页浮动...... css优势: 1.内容和表现分 ...
- CSS基础知识(表单标签、事件、CSS介绍、选择器、伪类选择器案例、样式、盒子模型、定位)...
一. 表单标签 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
- CSS介绍/音视频标签/字体/文本/选择器
7.css介绍 1.什么是css? Cascading Style Sheets 通常称为css样式表.层叠样式表和级联样式表 , 给页面设置样式. 2.css引入方式--行间样式 概述: 通过HTM ...
- css选择器优先级顺序是什么？css基本选择器优先级的介绍
css的选择器有很多种,那么,自然而然的就会有优先级这一概念出现,所以,css选择器优先级顺序是怎样的呢?本篇文章将来给大家介绍css选择器优先级的排序,话不多说,我们来直接看正文内容. 打造全网we ...
- css选择器优先级顺序是什么？css基本选择器优先级的介绍-前端教程
css的选择器有很多种,那么,自然而然的就会有优先级这一概念出现,所以,css选择器优先级顺序是怎样的呢?本篇文章将来给大家介绍css选择器优先级的排序,话不多说,我们来直接看正文内容. 在看css选 ...
- 陈力：传智播客古代 珍宝币 泡泡龙游戏开发第八讲：DIV+CSS中类选择器、id选择器和html选择器介绍
陈力:传智播客古代 珍宝币 泡泡龙游戏开发第八讲:DIV+CSS中类选择器.id选择器和html选择器介绍 陈力:传智播客古代 珍宝币 泡泡龙游戏开发第七讲:DIV+CSS入门.在贵阳网站建设中,经常 ...
- css class选择器用法,CSS类选择器用法简明介绍
你对CSS类选择器的使用是否熟悉,这里向大家描述一下,在CSS中,CSS类选择器通常以一个点号显示,需要注意一点的就是不要使用数字起始类名!因为它无法在Mozilla或Firefox中起作用. CSS ...
- css介绍css选择器
一.css简介 css 层叠样式表:网页是一个多层的结构,css可以给每一层结构做样式,最终你看到的是最上面一层 二.css书写位置 第一种方式:内联样式/行内样式 书写位置:开始标签,style属性 ...
- CSS节选——选择器
CSS,cascading style sheet,层叠样式表,请留意层叠概念. css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类--:hover,:link,:active,:targ ...
最新文章
- MongoDB探索之路（二）——系统设计之CRUD
- 深入分析Linux内核源码oss.org.cn/kernel-book/
- python创意小作品代码-Python学习，给自己的代码做个合集，定制自己的桌面软件！...
- python利器怎么编程-C++和Python混合编程的利器
- echarts饼图扇区添加点击事件
- 软件工程---17.分布式软件工程
- 【转】Kotlin 新版来了，支持跨平台！
- django-阻止某一个IP访问某一个页面
- 动软代码生成器之模板功能介绍
- python的aes的ecb加密_AES ECB PKCS5/PKCS7 加密 python实现 支持中文
- tomcat 配置https 访
- 电力系统仿真软件python_电力系统PSS@E仿真软件
- 用H5STEAM实现大华摄像头的WEB开发
- 产品经理如何设计网页导航菜单
- 解决mysql报Lock wait timeout exceeded； try restarting transaction的问题
- 期末作业代码网页设计代码——网站商城后台通用模板(30页) 大学生后台模板网页作品商城网页设计作业模板 学生网页制作源代码下载
- ubuntu20 下从linux 5.14.0-1045 源码编译 linux-5.15.56 内核
- 粒子群算法在物流中心选址中的应用
- 清理Ubuntu虚拟机磁盘空间
- Android10读写权限