CSS3 - 新特性（一）

最新推荐文章于 2022-05-09 14:41:23 发布

学习中的小菜鸟.

最新推荐文章于 2022-05-09 14:41:23 发布

阅读量129

点赞数

分类专栏： CSS 文章标签： css css3

本文链接：https://blog.csdn.net/qq_33962481/article/details/117331762

版权

CSS 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的各种选择器，包括属性选择器、结构伪类选择器、nth-child(n)选择器及其与nth-of-type(n)的区别，以及伪元素选择器的使用，如:before和:after。通过实例展示了如何利用这些选择器实现页面元素的精准定位和样式美化，如创建字体图标、仿土豆效果和清除浮动等。

摘要由CSDN通过智能技术生成

文章目录

一、新增选择器

一、新增选择器

属性选择器

属性选择器可以根据元素特定的属性来选择元素

语法

E[att]    /* 选择具有att属性的E元素 */
E[att="val"]	/* 选择具有att属性且属性值等于val的E元素 */
E[att^="val"]	/* 匹配具有att属性且值以val开头的E元素 */
E[att$="val"]	/* 匹配具有att属性且值以val结尾的E元素 */
E[att*="val"]	/* 匹配具有att属性且值中含有val的E元素 */

使用

/* 必须是input 但是同时具有value这个属性  */
input[value] {
    color: pink;
}
/* 选择div, 必须具有class, 且class的值是以icon开头的 */
div[class^="icon"] {
	color: red;
}

结构伪类选择器

结构伪类选择器主要根据文档结构来选择元素, 常用于根据父级选择器里面的子元素
在这里插入图片描述

使用

/* 选择ul中的第一个子元素, 并且子元素为li */
ul li:first-child {
    color: red;
}

/* 选择ul中的最后一个子元素, 并且子元素为li */
ul li:last-child {
    color: green;
}

/* 选择ul中的第二个子元素, 并且子元素为li */
ul li:nth-child(2) {
    color: yellow;
}

nth-child(n) 选择器

n 如果是数字, 就选择第n个子元素, 里面数字从1开始
n 可以是关键字 : even偶数, odd表示奇数

/* 把所有偶数的孩子选出来 */
ul li:nth-child(even) {
    background-color: red;
}

/* 把所有奇数的孩子选出来 */
ul li:nth-child(odd) {
    background-color: pink;
}

n可以是公式

在这里插入图片描述

/* 选择偶数 */
ul li:nth-child(2n) {
    background-color: red;
}

ul li:nth-child(2n+1) {
    background-color: green;
}

nth-child(n) 和 nth-of-type(n) 的区别

....
section div:nth-child(1) {
	background-color: red;
}

section div:nth-of-type(1) {
	background-color: red;
}
....
<body>
	<section>
		<p></p>
		<div></div>
		<div></div>
	</section>
</body>

nth-child会把所有的子元素都排序, 执行的时候首先看 :nth-child(1) , 然后看指定的 div , 结果第一个子元素是p而不是div, 所以这个选择器就没有生效.
nth-of-type(1) 会把指定的子元素都排序, 然后选出指定的元素.

伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素, 而不需要HTML标签.

before 和 after 创建一个元素, 但是属于行内元素
新创建的这个元素在文档树中是找不到的, 所以我们称为伪元素
语法 : element::before{}
before 和 after必须有 content属性
伪元素的权重为1.

::before

在元素内部的前面插入内容

:: after

在元素内部的后面插入内容

伪元素选择器的基本使用

div::before {
    content: '我';
}

伪元素的使用场景 : 伪元素字体图标

p::before {
	position: absolute;
	right: 10px;
	top: 20px;
	content: '\e91e';
}

伪元素的使用场景 : 仿土豆效果

<!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>
        .nav {
            width: 448px;
            height: 252px;
            background-image: url(./images/tudou.jpg);
            margin: 100px auto;
        }

        .nav::before {
            position: absolute;
            display: none;
            content: '';
            width: 448px;
            height: 252px;
            background: rgba(0, 0, 0, 0.5) url(./images/arr.png) no-repeat center;
        }

        .nav:hover::before {
            display: block;
        }
    </style>
</head>

<body>
	<div class="nav">
	
	</div>
</body>
</html>

伪元素的使用场景 : 清除浮动

.clearfix:after {
	content: "";	/* 伪元素必须写的属性 */
	display: block;	/* 插入的元素必须是块级 */
	height: 0;		/* 不要看见这个元素 */
	clear: both;	/* 核心代码清除浮动 */
	visibility: hidden;	/* 隐藏元素 */
}