新增选择器:
Css3给我们新增了选择器,可以更加便捷,更加自由的选择目标元素。
1 属性选择器
属性选择器可以根据元素特定属性来选择元素,这样就可以不用借助于类或者ID选择器。
注意:类选择器、属性选择器、伪类选择器、权重为10
<!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>css3新增属性选择器
</title>
<style>
/* 必须是input 但是同时具有value这个属性 选择这个元素 */
/* input[value] {
color: pink;
} */
input[type=text] {
color: aquamarine;
}
/* 选择首先是div 然后 具有class属性 并且属性值必须是icon开头的这些元素 */
div[class^=icon] {
color: blueviolet;
}
section[class$=data] {
color: aquamarine;
}
</style>
</head>
<body>
<!-- 1 利用属性选择器就可以不用借助于类或者id选择器 -->
<!-- <input type="text" value="请输入用户名">
<input type="text">
<br> -->
<!-- 2 属性选择器还可以选择属性=值的某些元素 (重点)-->
<input type="text">
<input type="password">
<!-- 3 属性选择器可以选择属性值开头的某些元素 -->
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<!-- 4 属性选择器可以选择属性值结尾的某些元素 -->
<section class="icon1-data">woshi </section>
<section class="icon2-data">woshi </section>
<section class="icon3-dico">woshi </section>
</body>
</html>
2 结构伪类选择器
结构伪类选择器主要根据文档结构来选择元素,常用于根据父级选择器里面的元素。
Nth-child(n)选择某个父元素的一个或多个特定的子元素。
-
- N可以是数字,关键字和公式
- N如果是数字,就是选择第n个子元素,里面数字从1开始
- N可以是关键字:even偶数,odd奇数(表格隔行变色)
- N可以是公式:常见的公式如下(如果n是公式,则从0开始计算,但是第0个元素或者超出了元素的个数会被忽略)
区别:
1 nth-child对父元素里面所有的孩子排序选择(序号是固定的)先找到第n个孩子,然后看看是否和e匹配
2 nth-of-type对父元素里面指定的子元素进行排序选择。先去匹配e,然后再根据e找第几个孩子。
<!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>结构伪类选择器</title>
<style>
ul,
ol {
display: block;
width: 150px;
}
/* 1 选择ul里面的第一个孩子 */
ul li:first-child {
color: pink;
}
/* 2 选择ul里面的最后一个孩子 */
ul li:last-child {
color: aquamarine;
}
/* 3 选择ul里面的第n个孩子 */
ul :nth-child(5) {
color: blueviolet;
}
/* 4 把所有的偶数的孩子选出来 (even) 奇数时odd */
ul li:nth-child(even) {
background-color: aqua;
}
/* 5 :nth-child(n) 从0开始 每次加1 往后面计算 这里必须是字母n */
ol li:nth-child(n) {
background-color: aquamarine;
}
</style>
</head>
<body>
<ul>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
<li>我是第8个孩子</li>
</ul>
<ol>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
<li>我是第8个孩子</li>
</ol>
</body>
</html>
小结:
- 结构伪类选择器一般用于选择父级里面的第几个孩子
- Nth-child对元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子,然后看看是否和e匹配
- Nth-of-type对父元素里面指定子元素进行排序选择。先去匹配e,然后根据e找第n个孩子
- 关于nth-child(n)我们要知道n是从0开始计算的,要记住常用的公式
- 如果是无序列表,我们肯定用nth-child更多
- 类选择器、属性选择器、伪类选择器,权重为10
3 伪元素选择器
伪元素选择器可以帮助我们利用css创建新标签元素,而不需要HTML标签,从而简化HTML结构。
选择符 | 简介 |
::before | 在元素内部的前面插入内容 |
::after | 在元素内部的后面插入内容 |
注意:
- Before和after创建一个元素,但是属于行内元素
- 新创建的这个元素在文档中是找不到的,所以我们称为伪元素
- 语法:element::before{}
- Before和after必须有content属性
- Before在父元素内容的前面创建元素,after在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一样,权重为1
是
<!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>伪元素选择器before和after</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
/* div::after权重是2 */
div::before {
display: inline-block;
width: 30px;
height: 30px;
background-color: blueviolet;
/* 这个content属性是必须要写的 */
content: '我';
}
div::after {
content: 'balabala';
}
</style>
</head>
<body>
<div>
shi
</div>
</body>
</html>
伪元素选择器使用场景1:伪元素 字体图标
<!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>伪元素选择器使用场景-字体图标</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?rbgxhh');
src: url('fonts/icomoon.eot?rbgxhh#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?rbgxhh') format('truetype'),
url('fonts/icomoon.woff?rbgxhh') format('woff'),
url('fonts/icomoon.svg?rbgxhh#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
div {
position: relative;
width: 200px;
height: 30px;
margin: 100px auto;
border: 1px solid pink;
}
div::after {
position: absolute;
top: 5px;
right: 5px;
font-family: 'icomoon';
content: '\e980';
color: pink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
伪元素选择器使用场景2:仿土豆效果
<!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>仿土豆网</title>
<style>
.tudou {
position: relative;
width: 846px;
height: 472px;
background-color: aquamarine;
margin: 100px auto;
}
.tudou::before {
content: '';
/* 隐藏遮罩层 */
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .3) url(images/播放.png) no-repeat center;
}
/* 当我们鼠标经过了 土豆这个盒子 就让里面before遮罩层显示出来 */
.tudou:hover::before {
display: block;
}
</style>
</head>
<body>
<div class="tudou">
<img src="images/tb.jpg" alt="">
</div>
</body>
</html>
伪元素选择器使用场景3:伪元素清除浮动
1 额外标签法也称为隔墙法,是w3c推荐的做法
注意:要求这个新的空标签必须是块级元素
2 父级添加overflow属性
3 父级添加after伪元素
4 父级添加双伪元素