一、CSS基础
1、css简介
CSS全称为:层叠样式表(Cascading Style Sheets)。
CSS 也是一种标记语言,用于给HTML结构设计样式,例如:文字大小、颜色、元素宽高等等。
简单理解:css可以美化HTML,让HTML更漂亮
核心思想:HTML搭建结构,CSS添加样式,实现了,结构与样式的分离。
2、css编写位置
2.1 行内样式
写在标签的 style 属性中,(又称:内联样式)。
语法:
<h1 style="color: greenyellow;font-size: 80px;">欢迎光临!</h1>
注意点:
1)style属性的值不能随便写,写要符合CSS语法规范,是 名:值; 的形式。
2)行内样式表,只能控制当前标签的样式,对其他标签无效。
存在的问题:
书写繁琐、样式不能复用、并且没有体现:出结构与样式分离的思想,不推荐大量使用,只有对当前元素添加简单样式时,才偶尔使用。
2.2 内容样式
写在html页面内部,将所有的CSS代码提取出来,单独放在 <style> 标签中。
语法:
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>内部样式</title><style>h1{color: aqua;font-size: 80px;}h2{color: green;font-size: 60px;}p{color: blue;font-size: 40px;}img{width: 200px;}</style>
</head>
<body><h1>欢迎光临!</h1><h2>欢迎光临!</h2><p>欢迎光临!</p><img src="./imag/img8.jpg" alt="一个图片">
</body>
</html>
注意点:
1、<style> 标签理论上可以放在HTML文档的任何地方,但一般都放在<head>标签中。
2、此种写法:样式可以复用、代码结构清晰。
存在的问题:
1、并没有直接实现:结构与样式完全分离。
2、多个HTML页面无法复用样式。
2.3 外部样式
写在单独的 .css 文件中,随后在HTML文件中引入使用。
语法:
1)新建一个扩展名为 .css 的样式文件,把所有css代码都放入此文件中。
h1{color: aqua;font-size: 80px;
}
h2{color: green;font-size: 60px;
}
p{color: blue;font-size: 40px;
}
img{width: 200px;
}
2)在HTML文件中引入 .css 文件。
<link rel="stylesheet" href="./a.css">
注意点:
1、<link> 标签要写在 <head> 标签中
2、<link> 标签属性说明:
href :引入的文档来自于哪里。
rel:说明引入的文档与当前文档之间的关系。
3、外部样式的优势:样式可以复用、结构清晰、可触发浏览器的缓存机制,提高访问速度,实现了结构与样式的完全分离。
4、实际开发中,几乎都使用外部样式,这是最推荐的使用方式!
3、样式表的优先级
优先级规则:行内样式 > 内部样式 > 外部样式
1、内部样式、外部样式、,这二者的优先级相同,且:后面的会覆盖前面的(简记为 后来者居上)
2、同一个样式表中,优先级也和编写顺序有关,且:后面的会覆盖前面的。
分类 | 优点 | 缺点 | 使用频率 | 作用范围 |
行内样式 | 优先级最高 | 1、结构与样式未分离 2、代码结构混乱 3、样式不能复用 | 很低 | 当前标签 |
内部样式 | 1、样式可复用 2、代码结构清晰 | 1、结构与样式未彻底分离 2、样式不能多页面复用 | 一版 | 当前页面 |
外部样式 | 1、样式可多页面复用 2、代码结构清晰 3、可触发浏览器的缓存机制 4、结构与样式彻底分离 | 需要引入才能使用 | 最高 | 多个页面 |
4、CSS语法规范
CSS语法规范由两部分构成:
- 选择器:找到要添加样式的元素。
- 生命快:设置具体的样式(声明块是由一个或多个声明组成的),声明的格式为:属性名:属性值
备注1:最后一个声明后的分号理论上能省略,但最好还是写上。
备注2:选择器与生命快之间,属性名与属性值之间。均有一个空格,理论上能省略,但最好还是写上。
CSS中注释的写法:
h1 {/* 颜色为红色,大小为80 */color: brown;font-size: 80; }
5、CSS代码风格
展开风格 :开发时推荐,便于维护和调试。
h1 {/* 颜色为红色,大小为80 */color: brown;font-size: 80; }
紧凑风格:项目上线时推荐,可减小文件体积。
h1{color: brown;font-size: 80;}
备注:
项目上线时,我们会通过工具将 展开风格 的代码,变成 紧凑风格 ,这样可以减小文件体积,节约网络流量。同时也能让用户打开网页时速度更快。
二、CSS选择器
1、CSS基本选择器
- 通配选择器
- 元素选择器
- 类选择器
- id选择器
1.1 通配选择器
作用:可以选中所有的HTML元素。
语法:
* {
属性名:属性值
}
举例:
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>通配选择器</title><style>* {color: cornflowerblue;}</style>
</head>
<body><h1>欢迎来到土味官网,土的味道我知道</h1><br><h2>土味情话</h2><h3>作者:优秀的网友们</h2><p>万水千山总是情,爱我多点行不行!</p><p>草莓、蓝莓、蔓越莓,今天你想我了没?</p><p>我心里给你留了一块地,我的死心塌地!</p>
</body>
</html>
备注:目前来看通配选择器优点鸡肋,但后面清楚样式时,会对我们有很大的帮助,后面会详细讲。
1.2 元素选择器
作用:为页面中某种元素统一设置样式。
语法:
标签名 {
属性名:属性值;
}
举例:
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>元素选择器</title><style>h1 {color: brown;}h2 {color: chocolate;}h3 {color: darkgoldenrod;}p {color: darkorchid;}</style>
</head>
<body><h1>欢迎来到土味官网,土的味道我知道</h1><br><h2>土味情话</h2><h3>作者:优秀的网友们</h2><p>万水千山总是情,爱我多点行不行!</p><p>草莓、蓝莓、蔓越莓,今天你想我了没?</p><p>我心里给你留了一块地,我的死心塌地!</p><br><h2>反土味情话</h2><h3>作者:更优秀的网友们</h3><p>一寸光阴一寸金,劝你死了这条心!</p><p>西瓜、南瓜、哈密瓜,把你打成大傻瓜!</p><p>我心里只有一块地,我的玛莎拉蒂!</p>
</body>
</html>
元素选择器无法实现差异化设置,例如上面的代码中,所有的p元素效果都一样。
1.3 类选择器
作用:根据元素的class值,来选中某些元素。
class翻译过来有:种类、类别的含义,所以class值,又称:类名
语法:
.类名 {属性名:属性值}
举例:
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>类选择器</title><style>.speak {color: limegreen;}.answer {color: slateblue;}.big {font-size: 100px;}</style>
</head>
<body><h1>欢迎来到土味官网,土的味道我知道</h1><h2>土味情话</h2><h3>作者:优秀的网友们</h2><p class="speak big">我对你说:万水千山总是情,爱我多点行不行!</p><p class="speak">我对你说:草莓、蓝莓、蔓越莓,今天你想我了没?</p><p class="speak">我对你说:我心里给你留了一块地,我的死心塌地!</p><br><h2>反土味情话</h2><h3>作者:更优秀的网友们</h3><p class="answer">你回答我:一寸光阴一寸金,劝你死了这条心!</p><p class="answer">你回答我:西瓜、南瓜、哈密瓜,把你打成大傻瓜!</p><p class="answer">你回答我:我心里只有一块地,我的玛莎拉蒂!</p>
</body>
</html>
注意点:
1、元素的class属性值不带 . ,但CSS的类选择器腰带 .
2、class值,是我们自定义的,按照标准:不要使用纯数字、不要使用中文、尽量使用英文与数字的组合,若由多个单词组成,使用 - 做连接,例如:left-menu ,且命名要有意义,做到“见名知意”。
3、一个元素不能写多个class 属性,下面是错误示例:
<h1 class="speak" class="big">你好啊</h1>
4、一个元素的class属性,能写多个值,要用空格隔开,例如:<h1 class="speak big">你好啊</h1>
1.4 id选择器
作用:根据元素的id属性值,来精准的选中某个元素。
语法:
#id值 {属性名:属性值;}
举例:
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>ID选择器</title><style>#earthy {color: brown;}#turn-earthy {color: blue;}</style>
</head>
<body><h1>欢迎来到土味官网,土的味道我知道</h1><h2 id="earthy">土味情话</h2><h3>作者:优秀的网友们</h2><p>我对你说:万水千山总是情,爱我多点行不行!</p><p>我对你说:草莓、蓝莓、蔓越莓,今天你想我了没?</p><p>我对你说:我心里给你留了一块地,我的死心塌地!</p><br><h2 id="turn-earthy">反土味情话</h2><h3>作者:更优秀的网友们</h3><p >你回答我:一寸光阴一寸金,劝你死了这条心!</p><p >你回答我:西瓜、南瓜、哈密瓜,把你打成大傻瓜!</p><p >你回答我:我心里只有一块地,我的玛莎拉蒂!</p>
</body>
</html>
注意:
1、id属性值:尽量由字母、数字、下划线(_)、短杠(-)组成,最好以字母开头、不要包含空格、区分大小写。
2、一个元素只能拥有一个id属性,多个元素的id属性值不能相同。
3、一个元素可以同时拥有 id 和 class属性。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>ID选择器</title><style>#earthy {color: brown;}#turn-earthy {color: blue;}</style>
</head>
<body><h1>欢迎来到土味官网,土的味道我知道</h1><h2 id="earthy">土味情话</h2><h3>作者:优秀的网友们</h2><p>我对你说:万水千山总是情,爱我多点行不行!</p><p>我对你说:草莓、蓝莓、蔓越莓,今天你想我了没?</p><p>我对你说:我心里给你留了一块地,我的死心塌地!</p><br><h2 id="turn-earthy">反土味情话</h2><h3>作者:更优秀的网友们</h3><p >你回答我:一寸光阴一寸金,劝你死了这条心!</p><p >你回答我:西瓜、南瓜、哈密瓜,把你打成大傻瓜!</p><p >你回答我:我心里只有一块地,我的玛莎拉蒂!</p>
</body>
</html>
1.5 基本选择器总结
基本选择器 | 特点 | 用法 |
通配符选择器 | 选中所有标签,一般用于清除样式 | *{color:red} |
元素选择器 | 选中所有同种标签,但是不能差异化选择 | h1{color:red} |
类选择器 | 选中所有特定类名(class值)的元素 -- 使用频率很高。 | .say{color:red} |
ID选择器 | 选中特定 id 值的那个元素(唯一的) | #earthy{color:red} |
2、CSS复合选择器
css选择器整体分类两大类:
一、基本选择器:
1)通配选择器
2)元素选择器
3)类选择器
4)ID 选择器
二、符合选择器:
1)交集选择器
2)并集选择器
3)后代选择器
4)子元素选择器
......
1、复合选择器建立在基本选择器之上,由多个基础选择器,通过不同的方式组合而成。
2、复合选择器可以在复杂结构中,快速而准确的选中元素。
2.1 交集选择器
作用:选中同时符合多个条件的元素。
交集有并且的含义(通俗理解:即...又....的意思),例如:年轻且长得帅。
语法:选择器1选择器2选择器3...选择器n {}
举例:
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>交集选择器</title><style>/* 基本选择器有如下几种1、* {} 选择所有2、h1 {} 选择和h1标签相关的3、.class {} 选择类名相等的4、#id {} 选择id相等的实际上复合选择器就是对上述基本选择器的再次组合*//* 第一种方式 标签 + 类名 */p.zhangsan {color: darkgreen;}p.lisi {color: darkorange;}/* 第二种方式 类名 + 类名 */.zhangsan.friend {color: brown;}.lisi.friend {color: blue;}</style>
</head>
<body><h1 class="zhangsan">我是张三!</h1><h2 class="lisi">我是李四!</h2><hr><p class="zhangsan friend">我是张三的朋友!</p> <p class="lisi friend">我是李四的朋友!</p>
</body>
</html>
注意:
1、有标签名,标签名必须写在前面
2、id 选择器、通配符选择器,理论上可以作为交集的条件,但实际应用中几乎不用 -- 因为没有意义。3、交集选择器中不可能出现两个元素选择器,因为一个元素,不可能即是p元素又是span元素。
4、用的最多的交集选择器是:元素选择器配合类名选择器,例如:p.beauty
5、上述两种方式,但是也分优先级,并不是谁写在后面就用谁,后面会单独说优先级的问题。
2.2 并集选择器
作用:选中多个选择器对应的元素,又称:分组选择器。
所谓并集就是或者的含义(通俗理解为要么...要么...的意思),例如,给我转10万块钱或者我报警。
语法:选择器1,选择器2,选择器3, ... 选择器n {}
举例:
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>并集选择器</title><style>/* 基本选择器有如下几种1、* {} 选择所有2、h1 {} 选择和h1标签相关的3、.class {} 选择类名相等的4、#id {} 选择id相等的实际上复合选择器就是对上述基本选择器的再次组合 *//* 第一种并集 .class 并集*/.A,.a {color: blue;}.B,.b {color: brown;}/* 第二种并集,标签 与 .class 并集 */h1,.A {color: darkviolet;}/* 第三种并集,标签与标签的并集 */h1,p {color:cyan;}/* 第四种并集,标签与id的并集 */h1,#AA {color: lawngreen;}</style>
</head>
<body><h1 class="A" id="AA">我是字母A!</h1><h1 class="B">我是字母B!</h1><hr><p class="a">我是字母A的小写a!</p><p class="b">我是字母B的小写b!</p>
</body>
</html>
注意:
1、并集选择器,我们一版竖着写
2、任务形式的选择器,都可以作为并集选择器的一部分。
3、并集选择器,通常用于集体声明,可以缩小样式表体积。
2.3 HTML元素间的关系
分为:1、父元素 2、子元素 3、祖先元素 4、后代元素 5、兄弟元素
1、父元素:直接包裹某个元素的元素,就是该元素的父元素
2、子元素:被父元素直接包含的元素(简记:儿子元素)
3、祖先元素:父亲的父亲....,一直往外找,都是祖先。父元素也是祖先元素的一种。
4、后代元素:儿子的儿子...,一直往里找,都是后代。子元素也是后代元素的一种。
5、兄弟元素:具有相同父元素的元素,互为兄弟元素。
2.4 后代选择器
作用:选中指定元素中,符合要求的后代元素。
语法:选择器1 选择器2 选择器3 .... 选择器n {} (先写祖先,再写后代)
选择器之间用空格隔开,空格可以理解为 xxx中的 其实就是后代的意思,选择器可以是我们之前学的任何一种选择器。
举例:
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>后代选择器</title><style>/* 第一种 选中ul中所有li标签,不管是子代还是后代只要是 ul中被li标签包裹的都会被选中*/ul li {color: brown;}/* 选中ul中的li标签中的被a标签包裹的元素 */ul li a {color: blueviolet;}/* 第二种 选中 .subject类中被li标签包裹的元素 */.subject li {color: darkblue;}/* 第三种 包含id选择器,.subject类中id为web的元素 */.subject #web {color: aqua;}/* 第四种 嵌套并集选择器或者交集选择器 *//* 选中subject类下 li标签中并且id为web的元素 */.subject li#web {color: black;}/* 选中subject类下 li标签或者id为web的元素 */.subject li,#web {color:darkolivegreen;}</style>
</head>
<body><ul><li>抽烟</li><li>喝酒</li><li>烫头</li><div><li>踢球</li></div><span>打篮球</span><li><a href="#">打羽毛球</a></li><li><span>打羽毛球</span></li></ul><hr><ul class="subject"><li id="web">前端</li><li>Java</li><li>大数据</li><li>测试</li></ul></body>
</html>
注意:
1、后代选择器,最红选择的都是后代,不选中祖先
2、儿子、孙子、重孙子、都算是后代
3、结构一定要符合之前讲的HTML嵌套要求,例如,不能p中写h1-h6标签4、后代选择器可以与 并集选择器、交集选择器进行嵌套
2.5 子代选择器
作用:选中指定元素中,符合要求的子元素(儿子元素)。先写父,再写子,又称为子元素选择器、子选择器。
语法:选择器1>选择器2>选择器3>.....选择器n {}
选择器之间,用 > 隔开,>可以理解为:"xxx子代",其实就是儿子的意思。
选择器 1234...n,可以是我们之前学的任何一种选择器。
举例:
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>子类选择器</title><style>/* 只选择div子代中的a标签 */div > a {color:brown;}/* div子代中p标签子代中的a标签 */div > p > a {color: blueviolet;}/* foot类中子代a表中的元素 */.foot > a {color: darkgreen;}</style>
</head>
<body><div><a href="#">张三</a><a href="#">李四</a><a href="#">王五</a><p><a href="#">赵六</a><div class="foot"><a href="#">孙七</a></div></p></div>
</body>
</html>
注意:
1、子代选择器,最终选择的时子代,不是父级。
2、子、孙子、重孙子、重重孙子.....统称后代! 子就是指儿子。
2.6 兄弟选择器
相邻兄弟选择器:
作用:选中指定元素后,符合条件的相邻兄弟元素。
所谓相邻就是紧挨着它的下一个,简记 睡在我下铺的兄弟。
语法:选择器1 + 选择器2 {}。
示例:
/* 选择向下紧挨着div的p标签必须是紧紧相邻,隔着一个标签都不行*/div+p{color: blueviolet;}
通用兄弟选择器:
作用:选中指定元素后,符合条件的所有兄弟元素。简记 睡在我下铺的所有兄弟。
语法:选择器1~选择器2 {}
示例:
/* 选中div后面所有的兄弟p元素, */div~p{color: brown;}
注意:两种兄弟选择器,选择的是下面的兄弟
2.7 属性选择器
作用:选中属性值符合一定要求的元素。
语法:
1、[属性名] 选中具有某个属性的元素
2、[属性名 = "值"] 选中包含某个属性,且属性值等于指定值的元素。
3、[属性名^="值'] 选中包含某个属性,且属性值以指定的值开头的元素。4、[属性名$="值"] 选中包含某个属性,且属性值以指定的值结尾的元素。
5、[属性名*="值"] 选中包含某个属性,属性值包含指定值的元素。
举例:
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>属性选择器</title><style>/* 选中具有title属性的元素 */p[title] {color: brown;}/* 选中title属性值为2hello2的元素 */p[title="2hello2"] {color:blue;}/* 选中title属性以3开头的元素 */p[title^="3"] {color:blueviolet;}/* 选中title属性值以4结尾的元素 */p[title$="4"] {color:coral;}/* 选中title属性值包含g的元素 */p[title*="5"] {color:chartreuse;}</style>
</head>
<body><p title="1hello1">1你好1</p><p title="2hello2">2你好2</p><p title="3hello3">3你好3</p><p title="4hello4">4你好4</p><p title="5hello5">5你好5</p>
</body>
</html>
2.8 伪类选择器
作用:选中特殊状态的元素。伪类可以理解为,并不是一种具体的类,但不是类,是元素的一种特殊状态。
常用的伪类选择器:
一、动态伪类:
1、:link 超链接未被访问的状态
2、:visited 超链接访问过的状态。
3、:hover 鼠标悬停在元素上的状态
4、:active 元素激活的状态。激活就是按下鼠标不松开
注意点:遵循 LVHA 的顺序,即:link、visited、hover、active。
这四个状态不能乱写,要遵循这个顺序。顺序不对,效果会不奏效。因为当按下按钮时同时符合 link(未被访问)、hover(悬浮状态)、active(激活状态) 这三种状态,如果写的顺序不对,就会按照后来者居上的原则,展示最后的设置。所以顺序就是这样固定的,可以记为 LVHA (LV好!)
link、visited 是 a 标签所独有的两种状态,别的元素都不具备这两种状态。hover 和 active 是所有元素都能具备的状态。
5、:focus 获取焦点的元素。
表单元素才能使用:focus 伪类。
当用户:点击元素、触摸元素、或通过键盘的“tab” 键等方式,选择元素时,就是获得焦点。
就是说比如输入框中,点击输入框,然后输入元素的时候才会有作用。
举例:
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态伪类</title><style>/* link代表没有访问过的a标签 */a:link {color: brown;}/* visited代表访问过的a元素 */a:visited {color: blue;}/* hover代表鼠标悬浮状态的a元素 */a:hover {color: darkgreen;}/* 选中的是激活状态的a元素 */a:active {color: darkmagenta;}/* 选中的是悬浮在鼠标悬浮的span元素 */span:hover {color: darkorange;}/* 选中的是激活状态的span元素,就是被点击过的 */span:active {color: hotpink;}/* 选中的是获取焦点的input元素跟select元素,就是点击之后的表单元素 */input:focus,select:focus {color: cornflowerblue;background-color: chartreuse;}</style>
</head>
<body><a href="https://www.baidu.com">去百度</a><a href="https://www.jd.com">去京东</a><span>哪也不去</span><br><input type="text"><br><input type="text"><br><input type="text"><select><option value="beijing">北京</option><option value="shanghai">上海</option></select>
</body>
</html>
二、结构伪类:
常用的:
1、:first-child 所有兄弟元素中的第一个。注意强调的是第一个!
/* 选中div的第一个儿子p元素 注意 第一个,意思就是div下面的第一个儿子元素 且 必须是p元素才生效。一个条件不符合都不生效*/div>p:first-child {color: brown;}/* 选中div中的后代中的第一个p元素 注意 div后代 且 第一个p元素 ,意思就是说要满足时div的后代,且p标签必须是其父标签的第一个儿子,p标签的父级是谁无所谓。*/div p:first-child {color: brown;}/* 选中的是第一个p元素 注意 第一个p元素 ,意思就是说p标签必须是其父标签的第一个儿子,p标签的父级是谁无所谓。*/p:first-child {color: brown;}
2、:last-child 所有兄弟元素中的最后一个。
/* 选中div的最后一个儿子p元素注意是儿子元素 且 最后一个p元素, 如果不是最后一个或者最后一个标签不是p元素都不生效 */div>p:last-child {color: brown;}
3、nth-child(n) 所有兄弟元素中的第n个。
/* 选中的是div中的前5个p元素 关于n的值:官方推荐的写法是 an + b 的格式,就是说a和b是一个常数,可以是负数也可以是正数。n的值从 1 开始 到正无穷,算出来的值中有包含在内的元素值,就会被选中例如 -n + 5 代表着 (-1 * n + 5) n从1开始计算只有1、2、3、4、5 这5个元素在div标签包含的数量中,所以前五个会被选中*/div>p:nth-child(-n+5){color: blue;}
4、first-of-type 所有同类型兄弟元素中的第一个。
/* 选中的是div是儿子元素中 所有p元素中的第一个 */div>p:first-of-type{color: brown;}
5、last-of-type 所有同类型兄弟元素中的最后一个。
/* 选中的是div是儿子元素中 所有p元素中的第一个 */div>p:last-of-type{color: brown;}
6、:nth-of-type(n) 所有同类型兄弟元素中的第n个。n的用法与nth-child(n)一致
div>p:nth-of-type(n){color: blueviolet;}
关于n的值:
1. 0 或 不写 :什么都选不中 —— 几乎不用。2. n :选中所有子元素 —— 几乎不用。3. 1~ 正无穷的整数 :选中对应序号的子元素。4. 2n 或 even :选中序号为偶数的子元素。5. 2n+1 或 odd :选中序号为奇数的子元素。6. - n+3 :选中的是前 3 个。
不常用的(了解即可):
1、:nth-last-child(n) :所有兄弟元素中的倒数第n个。
/* 选中div中倒数第3个儿子p元素,与nth-child 相反 */div>p:nth-last-child(3){color: brown;}
2、:nth-last-of-type(n):所有同类型兄弟元素中的倒数第n个。
/* 选中div中所有p元素中的倒数第3个,与nth-of-type 相反 */div>p:nth-last-of-type(3){color: brown;}
3、:only-child 选择没有兄弟的元素(独生子女)。
/* 选中没有兄弟的p元素 */p:only-child {color: blue;}
4、:only-of-type 选择没有同类型兄弟的元素。
/* 选中没有同类型p元素的p元素,就是这个p元素只能有一个,可以有别的其他元素 */p:only-of-type{color: brown;}
5、:root 根元素。
/* 选中的是根元素,效果会将整个网页背景变成黑色 */:root {background-color: black;}
6、:empty 内容为空的元素(空格也算内容)
/* 选中没有内容的div元素 */div:empty{background-color: black;width: 200px;height: 200px;}
三、否定伪类
:not(选择器) 排除满足括号中条件的元素。
/* 选中div的儿子p元素,但是排除类名为fail的元素 */div>p:not(.fail){color: brown;}/* 选中div的儿子p元素,但是排除属性名title以你要加油开头的元素 */div>p:not([title^="你要加油"]){color: blue;}/* 选中的是div的儿子p元素,但排除第一个儿子p元素 */div>p:not(:first-child){color: blue;}
四、UI伪类: