一、属性选择器
属性选择器可以根据元素特定的属性来选择元素。 这样就可以不用借助于类或者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>属性选择器</title>
<style>
div{
width: 100px;
height: 50px;
background-color: #ccc;
margin-bottom: 10px;
}
/* 将所有 具有id属性的div标签 设置为红色*/
div[id]{
background-color: red;
}
/* 将所有 具有id属性而且该属性值为div-id3的div标签设置为 绿色 */
div[id="div-id3"]{
background-color: green;
}
/* 将所有具有class属性而且该属性值以box开头的div标签设置为蓝色 */
div[class^="box"]{
background-color: blue;
}
/* 将所有具有class属性而且该属性值以cl结尾的div标签设置为黄色 */
div[class$="cl"]{
background-color: yellow;
}
/* 将所有具有class属性而且该属性值中包含了mm的div标签设置为黑色 */
div[class*="mm"]{
background-color: black;
}
</style>
</head>
<body>
<div id="div-id1"></div>
<div id="div-id2"></div>
<div id="div-id3"></div>
<div id="div-id4"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="md1-cl"></div>
<div class="md2-cl"></div>
<div class="md3-cl"></div>
<div class="mm1"></div>
<div class="mm2"></div>
</body>
</html>
效果：
二、结构伪类选择器
1、概念
结构伪类选择器主要根据文档结构来选择元素， 常用于根据父级选择里面的子元素
2、first-child和last-child
案例：
<!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>
*{
padding: 0;
margin: 0;
}
ul{
width: 580px;
margin: 100px auto;
background-color: #ccc;
}
/*ul li 权重为02 */
ul li{
display: inline-block;
list-style: none;
width: 100px;
height: 200px;
background-color: green;
margin: 0px 10px 10px 0px;
}
/* ul li:first-child 权重为12 */
/* 结构伪类选择器 E:first-child用于匹配父元素中的第一个子元素E */
ul li:first-child{
background-color: red;
}
/* 结构伪类选择器 E:last-child用于匹配父元素中的最后一个子元素E */
ul li:last-child{
background-color: gray;
}
</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>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
效果：
3、nth-child(n)
nth-child（n） 选择某个父元素的一个或多个特定的子元素（重点）
- n 可以是数字，关键字和公式
- n 如果是数字，就是选择第 n 个子元素， 里面数字从1开始…
- n 可以是关键字：even 偶数，odd 奇数
- n 可以是公式：常见的公式如下 ( 如果n是公式，则从0开始计算，但是第 0 个元素或者超出了元素的个数会被忽略 )
案例：
<!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>
*{
padding: 0;
margin: 0;
}
ul{
width: 580px;
margin: 100px auto;
background-color: #ccc;
}
/*ul li 权重为02 */
ul li{
display: inline-block;
list-style: none;
width: 100px;
height: 200px;
background-color: green;
margin: 0px 10px 10px 0px;
}
ul li:nth-child(5n){
background-color: gray;
}
</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>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
效果：
4、first-of-type和last-of-type
用法与first-child、last-child差不多，此处就不再介绍
5、nth-of-child(n)与nth-of-type(n)的区别
- nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配
- nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子
案例：
<!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>
*{
padding: 0;
margin: 0;
}
/* nth-child 会把所有的盒子都排列序号 ，数字从1开始 */
/* 执行的时候首先看 :nth-child(1) 之后回去看前面的div */
/* 所以此时 <p>我是大哥</p> 就是 1 ，但是不匹配前面的div，所以该设置无效 */
section div:nth-child(1){
background-color: green;
}
/* nth-of-type 会把指定元素的盒子排序序号*/
/* 执行的时候首先看 div指定的元素 之后回去看 :nth-of-type(1) 第几个孩子*/
/* 所以 <div>我是二弟</div> 就是1，正好匹配指定的元素div */
section div:nth-of-type(1){
background-color: blue;
}
</style>
</head>
<body>
<section>
<p>我是大哥</p>
<div>我是二弟</div>
<div>我是三弟</div>
</section>
</body>
</html>
效果：
三、伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
注意：
- before 和 after 创建一个元素，但是属于行内元素
- 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
- 语法： element::before {}
- before 和 after 必须有 content 属性
- before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一样，权重为 1
1、应用场景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?k5r60y');
src: url('fonts/icomoon.eot?k5r60y#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?k5r60y') format('truetype'),
url('fonts/icomoon.woff?k5r60y') format('woff'),
url('fonts/icomoon.svg?k5r60y#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
.box{
/* 父元素相对定位 */
position: relative;
width: 250px;
height: 40px;
margin: 100px auto;
border: 1px solid #000;
}
.box::after{
position: absolute;
top: 10px;
right: 10px;
font-family: 'icomoon';
content: '\ea50';
font-size: 20px;
}
</style>
</head>
<body>
<div class="box"> </div>
</body>
</html>
效果：
2、应用场景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>
.box{
position: relative;
width: 400px;
height: 250px;
margin: 100px auto;
}
.box img{
width: 100%;
height: 100%;
}
.box::before{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
background: rgba(0, 0, 0, .3) url(./images/arr.png) no-repeat center;
content: '';
}
.box:hover::before{
display: block;
}
</style>
</head>
<body>
<div class="box">
<img src="./images/tudou.jpg" alt="">
</div>
</body>
</html>
效果：
3、应用场景3：伪元素清除浮动
1、清除浮动的几种方法
- 额外标签法也称为隔墙法，是 W3C 推荐的做法。
- 父级添加 overflow 属性
- 父级添加after伪元素
- 父级添加双伪元素
2、额外标签法也称为隔墙法，是 W3C 推荐的做法。
注意： 要求这个新的空标签必须是块级元素。
后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化。
扫一扫
264
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
