网页前端第三次培训-CSS选择器

Hacker liu

已于 2022-02-06 21:34:31 修改

阅读量564

点赞数

文章标签：前端 css jquery

于 2022-02-05 14:16:38 首次发布

本文链接：https://blog.csdn.net/weixin_63710451/article/details/122789061

版权

1.学习视频：

【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili

2.学习笔记：

 一、CSS的定义
	选择器名{
		属性名:属性值;
		属性名:属性值;
		...
	}
	注意点：
		1.声明需要使用{}括起来，每个声明以分号;结尾
		2.一行建议一个声明
		3.如果样式的属性由多个单词组成，则用引号引起来
		
二、CSS的注释
	/*注释内容*/
	/* 设置所有的h2标签的文本为红色 */
三、CSS的三种使用方式：
	1.行内样式
		直接写在标签上的样式，在标签上通过style属性定义的样式
	2.内部样式
		定义在style标签中的样式，style标签一般设置在head标签中
		<head>
			<meta charset="utf-8">
			<title>CSS选择器</title>
			<style>
					/* 设置所有的h2标签的文本为红色 */
				h2{
					color: red;
					font: "arial black";
				}
			</style>
		</head>
		
	3.外部样式
		定义在外部的CSS文件中，通过link标签引入
		<link rel="stylesheet" type="text/css" href="css文件的路径" />
	注：当有多重样式时，越精准越优先(就近原则)(行内样式最先)
四、CSS基本选择器
	1.通用选择器  *
		*{
			属性名:属性值;
			...
		}
		
			例：	/* 通用选择器 */
					*{
					color: aqua;
				}
	2.元素选择器 
		元素名/标签名{
			属性名:属性值;
			...
		}
		
			例：/* 元素选择器 */
			div {
				font-size: 30px;
			}
	3.ID选择器  #
		#id属性值{
			属性名:属性值;
			...
		}
		
			例：/* ID选择器 # */
			#p1{
				background-color: antiquewhite;
			}
		
	4.类选择器  .
		.class属性值{
			属性名:属性值;
			...
		}
		
			例：/* 类选择器 . */
			.cls1{
				font-family: 楷体;
			}
	5.分组选择器
		选择器1,选择器2,选择器3...{
			属性名:属性值;
			...
		}
		
			例：/* 分组选择器 */
			#p1,.cls1,font{
				text-decoration: line-through;
			}
五、组合选择器
	1.后代选择器
		选择指定元素的所有指定后代元素，以空格隔开
		选择器 指定元素{
			属性名:属性值;
			...
		}
		例：
			.food li{
				border: #9ACD32 solid 1px;
			}
	2.子代选择器
		选择指定元素的第一代子元素，以大于号>隔开
		选择器 > 指定元素{
			属性名:属性值;
			...
		}
		例：
			.food2 > li{
				border: palegoldenrod dotted 1px;
			}
	3.相邻兄弟选择器
		选择指定元素的下一个指定元素(只会找一个) ，两者有相同的父元素，以加号+隔开
		选择器 + 指定元素{
			属性名:属性值;
			...
		}
		例：
			#mydiv + div{
				background-color: #808080;
			}

	4.普通兄弟选择器
		选择指定元素后面的所有指定元素，两者具有相同的父元素，以波浪号~隔开
		选择器 ~ 指定元素{
			属性名:属性值;
			...
		}
		例：
			#mydiv2 ~ div{
				background-color: #FA8072;
			}

Hacker liu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页前端第三次培训-CSS选择器

1.学习视频：【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili2.学习笔记：一、CSS的定义选择器名{ 属性名:属性值; 属性名:属性值; ... } 注意点： 1.声明需要使用{}括起来，每个声明以分号;结尾 2.一行建议一个声明 3.如果样式的属性由多个单词组成，则用引号引起来二、CSS的注释 /*注释内容*/ /* 设置所有的h2标签的文本为红色 *
复制链接

扫一扫