高级选择器及伪类
1. 回顾基础选择器
ID选择器 #id
类名选择器 .class
标签选择器 tagname
通配符选择器 *
.组合(多元素)选择器 .class,#id
后代选择器 .class #id
子元素选择器 .class>#id
毗邻选择器 .class+#id (同层级)
关联后选择器 .class~#id (同层级)
10.多选择器 div.aa.bb#cc(之间并且的关系)
2. 属性选择器
E[attr]匹配具有attr属性的E元素
a[href]{ color:red; }
[href]{border:1px sold blue}/*只要具有href属性的元素*/
E[attr=val匹配所有attr属性等于“val”的E元素
a[href=”www.baidu.com”]{ color:red; }
~= 就是某个属性包含或者等于属性值
E[attr~=val]匹配所有attr属性包含“val”或者等于“val”的E元素
img[src ~= “images aa”]{ margin:10px;}
<style>
[class~=box] {
width: 100px;
height: 100px;
border: 10px solid red;
}
</style>
</head>
<body>
<div class="box aa">
BOX
</div>
</body>
|= 就是属性以‘val’整个开头或'val-'的元素
E[attr|=val]匹配所有attr属性以“val”整个开头或'val-'的E元素
img[alt |= buy]{width:300px; }
<style>
[class|= box] {
width: 100px;
height: 100px;
border: 10px solid red;
}
</style>
</head>
<body>
<div class="box-1">
BOX
</div>
</body>
<style>
[class|= box] {
width: 100px;
height: 100px;
border: 10px solid red;
}
</style>
</head>
<body>
<div class="box-daa ee">
BOX
</div>
</body>
E[attr1][att2=val]匹配所有拥有attr1属性同时具有attr2等于'val'的元素
a[href][title='图片']{text-decoration:underline;}
^=就是以什么字符开头
E[attr^=val]匹配所有attr属性以“val”开头E元素
img[src^='image'] {width:300px; }
<style>
[class^= box] {
width: 100px;
height: 100px;
border: 10px solid red;
}
</style>
</head>
<body>
<div class="boxdaa">
BOX
</div>
</body>
$=就是以什么字符结尾
E[attr$=val] 匹配所有attr属性以“val”结尾E元素
img[src$='image'] {width:300px; }
<style>
[class$= e] {
width: 100px;
height: 100px;
border: 10px solid red;
}
</style>
</head>
<body>
<div class="box-daa ee">
BOX
</div>
</body>
<style>
[src$= jpg] {
width: 100px;
height: 100px;
border: 10px solid red;
}
</style>
</head>
<body>
<img src="img/1.jpg" alt="">
<img src="img/2.png" alt="">
</body>
E[attr*=val] 匹配所有attr属性包含“val”E元素
img[src*='image'] {width:300px; }
<style>
[src*= mg] {
width: 100px;
height: 100px;
border: 10px solid blue;
}
</style>
</head>
<body>
<img src="img/1.jpg" alt="">
<img src="img/2.png" alt="">
</body>
3. CSS3新增的结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.box {
width: 600px;
margin: 20px auto;
}
.box>div {
width: 600px;
box-shadow: 0 0 10px 0 #000;
/*盒阴影*/
}
p {
width: 100px;
height: 100px;
margin: 10px auto;
box-shadow: 0 0 10px 0 #000;
font-size: 14px;
text-align: center;
color: #000;
}
p:last-child {
background-color: skyblue;
/*结构伪类选择器 父级中最后一个元素*/
}
</style>
</head>
<body>
<div class="box">
<div class="box1">box1
<p>p11</p>
<p>p12</p>
<p>p13</p>
</div>
<div class="box2">box2
<p>p21</p>
<p>p22</p>
<p>p23</p>
</div>
</div>
</body>
</html>
-
p:first-of-type选择p，这些p必须为它们各自父级的所有p子元素的第1个
p:last-of-type
选择p，这些p必须为它们各自父级的所有p子元素的最后1个p:only-of-type
选择p，这些p必须为它们各自父级的唯一的p（父级中还有其他类型元素）p:first-child
选择p，这些p必须为它们各自父级的第一个子元素p:last-child
选择p，这些p必须为它们各自父级的最后一个子元素p:only-child
选择p，这些p必须为它们各自父级的唯一子元素 (父级中再无其他元素)p:nth-child(2)
选择p，这些p必须为它们各自父级的第2个子元素 （p:nth-last-child(2)
选择p，这些p必须为它们各自父级的倒数第2个子元素 没有其他标签用 找所有孩子p:nth-of-type(2)
选择p，这些p必须为它们各自父级的所有p子元素的第2个 有其他标签用 只找pp:nth-last-of-type(2)
选择p，这些p必须为它们各自父级的所有p子元素的倒数第2个E：first-line
表示E元素中的第一行E：first-letter
表示E元素中的第一个字符-
p:empty选择没有内容的p
-
p:target选择当前被锚点激活的p，（点击就被激活）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.box {
width: 600px;
margin: 20px auto;
}
.box>div {
width: 600px;
box-shadow: 0 0 10px 0 #000;
/*盒阴影*/
}
p {
width: 100px;
height: 100px;
margin: 10px auto;
box-shadow: 0 0 10px 0 #000;
font-size: 14px;
text-align: center;
color: #000;
}
p:target {
background-color: purple;
/*点击锚点激活p标签*/
}
</style>
</head>
<body>
<a href="#bb">点击</a> <!-- 锚点点击激活 -->
<div class="box">
<div class="box1">
<span>box1</span>
<p>p11</p>
<p>p12</p>
<p>p13</p>
</div>
<div class="box2">
<span>box2</span>
<span>box2</span>
<p>p21</p>
<p>p22</p>
<p id="bb">p23</p> <!-- 锚点点击激活 -->
</div>
</div>
</body>
</html>
-
p:not(.on)
选择除了.on的p，括号中选选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.box {
width: 600px;
margin: 20px auto;
}
.box>div {
width: 600px;
box-shadow: 0 0 10px 0 #000;
/*盒阴影*/
}
p {
width: 100px;
height: 100px;
margin: 10px auto;
box-shadow: 0 0 10px 0 #000;
font-size: 14px;
text-align: center;
color: #000;
}
p:not(.aa){
background-color:pink
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<span>box1</span>
<p>p11</p>
<p class="aa"></p>
<p>p13</p>
</div>
<div class="box2">
<span>box2</span>
<span>box2</span>
<p>p21</p>
<p>p22</p>
<p>p23</p>
</div>
</div>
</body>
</html>
E:nth-child(odd)
匹配奇数行 同p:nth-child(2n-1)
E:nth-child(even)
匹配偶数行 同p:nth-child(2n)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.box {
width: 600px;
margin: 20px auto;
}
.box>div {
width: 600px;
box-shadow: 0 0 10px 0 #000;
/*盒阴影*/
}
p {
width: 100px;
height: 100px;
margin: 10px auto;
box-shadow: 0 0 10px 0 #000;
font-size: 14px;
text-align: center;
color: #000;
}
p:nth-child(even){
background-color:pink
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<span>box1</span>
<p>p11</p>
<p class="aa"></p>
<p>p13</p>
<p>p14</p>
</div>
<div class="box2">
<span>box2</span>
<span>box2</span>
<p>p21</p>
<p>p22</p>
<p>p23</p>
<p>p24</p>
</div>
</div>
</body>
</html>
-
E:first-line首行状态 -
E::selection被选中的文本的样式被修改(两个冒号)
.text::selection{
color:red;
}
和表单有关的伪类
- :focus 处于被聚焦的状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input:focus {
border: 2px solid red;
}
.info {
display: none;
}
input:focus+.info {
/* 获取焦点.info显示 */
display: block;
}
</style>
</head>
<body>
<input type="text">
<div class="info">请输入内容</div>
</body>
</html>
- :checked 表单被勾选的状态(几乎只有表单可以记录状态)
- :disabled 选择不能被操作的input框
- :enabled 选择能被操作的input框
4. 伪元素的使用
一个盒子(非单标签)有两个伪元素,叫before/after
正常的元素（标准的标签）是在标签的嵌套中使用添加内容，伪元素在content中添加内容，伪元素都是行内元素
4.1 伪元素的写法
E::before{
content: ""; /* 激活伪元素 一定要有，内容可以为空“”*/
}
E::after{
content:"";
}
<style>
div::before {
content: "大";
color: red;
font-size: 26px;
}
div::after {
content: "有点不容易";
/* display:block;伪元素都是行内元素 */
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<div>前端学习</div>
</body>
小三角
<style>
div::after {
content: "";
display: block;
width: 0;
height: 0;
border: 30px solid transparent;
border-right-color: red;
}
</style>
</head>
<body>
<div>前端学习</div>
</body>
content:（一定要加！！！）
content是伪元素的内容样式,必须写
string: 在节点之前插入文字
attr(attrname): 在节点中插入元素属性的值
url(媒体文件): 比如图片
content: url(https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png);
4.2 伪元素和伪类的区别:
伪元素是元素,伪类是状态/条件
4.3 伪元素和普通元素的区别
锦上添花(本意是替换空标签,比如加小三角)
几乎没有区别
写法不一样,(css添加的)
需要css渲染完成才知道有无伪元素,不影响布局结构,
百度爬虫爬不到伪元素，百度对空标签不友好
4.4 伪元素性质:
行内元素
before在标签正文内容前,可以理解为标签开始内容的前面的元素
after在标签的结尾之前,可以理解为正文内容之后
具有文本属性,
CSS创建的抽象元素,是个虚拟的容器
多用于清除浮动
伪元素清除浮动
<style>
div {
width: 500px;
border: 3px solid red;
}
p {
float: left;
width: 100px;
height: 50px;
background-color: skyblue;
font-size: 30px;
margin: 0 20px;
text-align: center;
}
/* span{
display:block;
clear:both;
} */
div::after {
/* 伪元素解决高度塌陷 清除浮动*/
content: '';
display: block;
clear: both
}
</style>
</head>
<body>
<div>
<p></p>
<p></p>
<p></p>
<!-- <span></span>之前解决高度塌陷在元素最后加一个块元素 ，这里把span变成块了 -->
</div>
</body>
背景及圆角
1. 复习元素背景
背景属性background
1.1. 背景颜色 background-color
属性值:
- 颜色单词 red
- 十六进制 #f00
- rgb
r:redg:greenb:blue取值范围都是0-255 - rgba
a:Alpha取值范围0-1,(透明度) -
HSLH:Hue色调 取值范围0-360S:Saturation饱和度 取值范围0%-100% L:Lightness亮度 取值范围0%-100% .HSLA` Alpha透明度。 取值0~1之间。 - transparent: 默认,透明,不继承
-
currentcolor: 当前色,currentcolor等于当前的color值
background-color:currentcolor;
1.2. 背景图片 background-image
属性值:
- url(“图片路径“)
- none 不使用背景图片(初始默认值)
多背景写法:
多个背景 以“，”隔开，不限个数
background-image: url(“1”) , url(“2”) ;
图片格式:
-
.jpg不支持动画,不支持透明,渐进显示,颜色丰富,有损 -
.png不支持动画,支持透明度, 颜色更丰富,无损 -
.gif支持动画,256种颜色,2种透明度,渐进显示 -
.webp支持动画,高压缩率,高加载速率,点个赞
background-image:url('图片路径');
1.3. 背景图片平铺 background-repeat
属性值:
-
no-repeat不平铺,背景图片只显示一次 -
repeat-x水平方向平铺 -
repeat-y垂直方向平铺 -
repeat默认值(水平垂直方向都平铺)
可以分解成两个属性:
- background-repeat-x
- . background-repeat-y
background-repeat: repeat-x;
1.4. 背景图片位置 background-position
可以设置两个值,如果只设置一个值,另一个默认为center
属性值:
关键词
top / right / bottom / right / center属性值是两个关键词,一个的话第二个就是默认center
-
百分数 (水平% 竖直%) 百分比相对于父级容器
如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为50%
像素值 (水平px 竖直px)
可以分解成两个属性:
- background-position-x
- background-position-y
background-position:20px 30px;
1.5. 背景图片大小 background-size
属性值:
像素值,有两个,如果写一个,第二个就默认auto
百分数,按原始比例缩放; 百分比相对于父级容器
-
cover 图片缩放,直到整个背景图片占满背景框
保持宽高比不变，保证占满盒子，但是不一定能看到全部图
-
contain 图片缩放,直到背景图片有一边触碰到背景边框就停止缩放
保持宽高比不变，保证看清全图，但是不一定占满盒子
数值可以写一个可以写两个,如果只有一个第二个就是默认
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.main {
width: 400px;
margin: 50px auto;
background-color: #f3f3f3;
}
.main p {
height: 40px;
font-size: 20px;
text-align: center;
line-height: 50px;
}
.main div {
width: 300px;
height: 300px;
box-shadow: 0 0 20px 0 blue;
background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F411%2F0616111FP6%2F1106161FP6-0.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652491360&t=b8a95b24ff4a24125001e09027ba8514) no-repeat;
margin: 10px auto;
}
.main div:nth-of-type(2) {
background-size: 100px 50px;
}
.main div:nth-of-type(3) {
background-size: 50% 50%;
}
.main div:nth-of-type(4) {
background-size: cover;
}
</style>
</head>
<body>
<div class="main">
<p>默认背景图片</p>
<div></div>
<p>background-size:100px 50px 的背景</p>
<div></div>
<p>background-size:50% 50% 的背景</p>
<div></div>
<p>background-size:cover的背景</p>
<div></div>
</div>
</body>
1.6. 背景图片关联 background-attachment
属性值:
- scroll 默认值,背景图片随着页面滚动而滚动,背景图片附着在容器里
- fixed 固定值,背景图片不随着页面滚动而滚动,背景图片附着在浏览器窗口里
<style>
body {
padding-left: 180px;
background: url('http://www.hshkyl.com/uploads/allimg/20/1-20091H01623638.jpg') no-repeat 0 0/contain;
background-attachment: fixed; /* 背景图片固定 */
}
</style>
</head>
<body>
<div>
<p>这是p标签1</p>
<p>这是p标签2</p>
<p>这是p标签3</p>
<p>这是p标签4</p>
<p>这是p标签5</p>
<p>这是p标签6</p>
<p>这是p标签100</p>
</div>
1.7. 背景图片显示基点(起始域) background-origin
属性值:
- padding-box 默认值，从padding区域起始
- content-box 从内容部分起始
- border-box 从border区域起始
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.main {
width: 400px;
margin: 50px auto;
background-color: #f3f3f3;
}
.main p {
font-size: 20px;
text-align: center;
line-height: 50px;
}
.main div {
width: 300px;
height: 300px;
box-shadow: 0 0 20px 0 blue;
background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F411%2F0616111FP6%2F1106161FP6-0.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652491360&t=b8a95b24ff4a24125001e09027ba8514) no-repeat;
margin: 10px auto;
border: 30px dashed deeppink;
padding: 20px;
}
.main div:nth-of-type(2) {
background-origin: content-box;
background-size: 100% 100%;
}
.main div:nth-of-type(3) {
background-origin: border-box;
}
.main div:nth-of-type(4) {
background-size: cover;
}
</style>
</head>
<body>
<div class="main">
<p>background-origin默认背景图片的起始域为padding-box</p>
<div></div>
<p>background-origin从内容区content-box显示背景</p>
<div></div>
<p>background-origin从内容区border-box显示背景</p>
<div></div>
</div>
</body>
1.8. 背景图片裁剪区域 background-clip
属性值:
- border-box 默认值，从border区域开始显示背景,背景被裁剪到盒子边框
- content-box 从内部区域开始显示背景.背景被裁剪到内容区域
- padding-box 从padding区域开始显示背景,背景被裁剪到内边距
- text 相对于文本
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.main {
width: 400px;
margin: 50px auto;
background-color: #f3f3f3;
}
.main p {
font-size: 20px;
text-align: center;
line-height: 50px;
}
.main div {
width: 300px;
height: 300px;
box-shadow: 0 0 20px 0 blue;
background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F411%2F0616111FP6%2F1106161FP6-0.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652491360&t=b8a95b24ff4a24125001e09027ba8514) no-repeat;
margin: 10px auto;
border: 30px dashed deeppink;
padding: 20px;
}
.main div {
background-origin: border-box;
background-size: 80% 80%;
}
.main div:nth-of-type(1) {
background-clip: border-box;
}
.main div:nth-of-type(2) {
background-clip: padding-box;
}
.main div:nth-of-type(3) {
background-clip: content-box;
}
</style>
</head>
<body>
<div class="main">
<p>background-clip从border默认</p>
<div></div>
<p>background-clip从padding</p>
<div></div>
<p>background-clip从content</p>
<div></div>
</div>
</body>
/*text相对于文本*/
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.main {
width: 400px;
margin: 50px auto;
background-color: #f3f3f3;
}
.main p {
font-size: 20px;
text-align: center;
line-height: 50px;
}
.main div {
width: 300px;
height: 300px;
box-shadow: 0 0 20px 0 blue;
background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F411%2F0616111FP6%2F1106161FP6-0.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652491360&t=b8a95b24ff4a24125001e09027ba8514) no-repeat;
margin: 10px auto;
border: 30px dashed deeppink;
padding: 20px;
}
.main div {
background-origin: border-box;
background-size: 80% 80%;
}
.main div:nth-of-type(1) {
background-clip: text;
-webkit-background-clip: text;
color: transparent;
font-size: 100px;
text-align: center;
font-weight: bolder;
/* transition: 3s; */
animation: run 3s infinite alternate;
}
/* .main div:nth-of-type(1):hover{
background-position: -30px 0;
} */
@keyframes run {
0% {
background-position: 20px 0;
}
100% {
background-position: -30px 0;
}
}
</style>
</head>
<body>
<div class="main">
<p>background-clip从border默认</p>
<div>你好</div>
</div>
</body>
1.9. 背景的综合样式
background:color image repeat position/size attachment origin clip;
省略部分会被默认值替代,
position和size之间要用/分割
