首先,CSS3 给我们新增了选择器,可以更加便捷,更加自由的选择目标元素,共增加了三种:
属性选择器、结构伪类选择器、伪元素选择器,接下来我为大家分别介绍一下
一、属性选择器:
按照字面意思,都是根据标签中的属性来选择元素。共有五种:
1.E[att] 选择具有att属性的E元素
2.E[att="val"] 选择具有att属性且属性值等于val的E元素
3.E[att^="val"] 匹配具有att属性且值以val开头的E元素
4.E[att$="val"] 匹配具有att属性且值以val结尾的E元素
5.E[att*="val"] 匹配具有att属性且值中含有val的E元素
二、结构伪类选择器:
1. E:first-child 匹配父元素的第一个子元素E
<head>
<style>
/* 选择ul里面的第一个孩子 小li */
ul li:first-child {
background-color: pink;
}
</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>
</body>
2. E:last-child 匹配父元素中最后一个E元素
<head>
<style>
/* 选择ul里面的最后一个孩子 小li */
ul li:last-child {
background-color: red;
}
</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>
</body>
3.E:nth-child(n) 匹配到父元素的第n个元素
<head>
<style>
/* 选择ul里面的第2个孩子 小li */
ul li:nth-child(2) {
background-color: skyblue;
}
/* 选择ul里面的第6个孩子 小li */
ul li:nth-child(6) {
background-color: skyblue;
}
</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>
</body>
4.E:first-of-type 指定类型E的第一个
<head>
<style>
ul li:first-of-type {
background-color: pink;
}
</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>
</body>
5. E:last-of-type 指定类型E的最后一个
<head>
<style>
ul li:last-of-type {
background-color: red;
}
</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>
</body>
6. E:nth-of-type(n) 指定类型E的第n个
<head>
<style>
ul li:nth-of-type(even) {
background-color: skyblue;
}
</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>
</body>
7.重点:E:nth-child 与 E:nth-of-type 的区别
E:nth-child(n) 匹配父元素的第n个子元素E,也就是说,nth-child 对父元素里面所有孩子排序选择(序号是固定的) 先找到第n个孩子,然后看看是否和E匹配
E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E,也就是说,对父元素里面指定子元素进行排序选择。 先去匹配E ,然后再根据E 找第n个孩子
三、伪元素选择器:
1.::before 在元素内部的前面插入内容
2.::after 在元素内部的后面插入内容
注意:
before 和 after 创建一个元素,但是属于行内元素
新创建的这个元素在文档树中是找不到的,所以我们称为伪元素 语法: element::before {}
before 和 after 必须有 content 属性
before 在父元素内容的前面创建元素,after 在父元素内容的后面插入元素
伪元素选择器和标签选择器一样,权重为 1
<head>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
/* div::before 权重是2 */
div::before {
/* 这个content是必须要写的 */
/* display: inline-block; */
content: '我';
/* width: 30px;
height: 40px;
background-color: purple; */
}
div::after {
content: '小猪佩奇';
}
</style>
</head>
<body>
<div>是</div>
</body>
以上就是我的分享了,希望大家可以有所收获