css学习选择器

最新推荐文章于 2022-09-22 19:37:04 发布

时光不老 ζ

最新推荐文章于 2022-09-22 19:37:04 发布

阅读量571

点赞数

分类专栏： css学习

本文链接：https://blog.csdn.net/qq_49934059/article/details/108316011

版权

css学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

常用选择器

元素选择器：
语法：标签名{}
例子：p{} h1{} div{}

id选择器：
语法：#id属性值{}
例子：#box{} #red{}

类选择器：(class是一个标签属性，它和id类似,不同的是class可以重复使用。可以通过class属性来为元素分组。可以同时为一个元素指定多个class属性)
语法：.class属性值{}

通配选择器：
作用：选中页面所有元素
语法：*{}

复合选择器

交集选择器：
作用：选中同时复合多个条件的元素
语法：选择器1选择器2选择器n{}（简单点说，就是选中既要满足选择器1又要满足选择器2，同时还要满足选择器n的元素，这就是为什么要叫“交集”选择器的原因）
注意：交集选择器中如果有元素选择器，必须使用元素选择器开头

选择器分组（并集选择器）
作用：同时选择多个选择器对应的元素
语法：选择器1,选择器2,选择器n{}（简单来说，就是同时选中满足选择器1的元素，满足选择器2的元素，和满足选择器n的元素，这也是为什么叫“并集”选择器的原因）

关系选择器

子元素选择器：
作用：选中指定父元素的指定子元素
语法：父元素>子元素

后代元素选择器：
作用：选中指定元素内的指定后代元素
语法：祖先后代

选择下一个兄弟元素：
语法：前一个 + 后一个

选择下边所有的兄弟元素：
语法：兄 ~ 弟

属性选择器

[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定元素和属性值的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值中含有某值的元素

伪类选择器

:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(x) 选中第数x个子元素（如果写n，就是全部选中。2n或even表示选中偶数位的元素。2n+1或odd表示选中奇数位的元素）
——以上这些伪类都是根据所有的子元素进行排序
:first-of-type
:last-of-type
:nth-of-type()
——这几个伪类和上述的类似，不同的是他们在同类型元素中进行排序
:not()将符合条件的元素从选择器中去除

超链接伪类

:link 用来表示没访问过的链接（正常的链接）
a:link{}

:visited 用来表示访问过的链接
a:visited{}

:hover 用来表示鼠标移入的状态
a:hover{}

:active 用来表示鼠标点击的状态
a:active{}

伪元素

::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容

::before 元素的开始
::after 元素的最后
——before和after必须结合content（添加的内容无法被选中）属性来使用
例子：

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<style type="text/css">
			div::before {
				content: '《';
				color: red;
			}
			div::after{
				content: '》';
				color: red;
			}
		</style>
		</script>
	</head>

	<body>
		<div>
			123456789
		</div>

	</body>

</html>

时光不老 ζ

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css学习选择器

常用选择器元素选择器：语法：标签名{}例子：p{} h1{} div{}id选择器：语法：#id属性值{}例子：#box{} #red{}类选择器：(class是一个标签属性，它和id类似,不同的是class可以重复使用。可以通过class属性来为元素分组。可以同时为一个元素指定多个class属性)语法：.class属性值{}通配选择器：作用：选中页面所有元素语法：*{}复合选择器交集选择器：作用：选中同时复合多个条件的元素语法：选择器1选择器2选择器n{}（简单点说，就
复制链接

扫一扫