CSS选择器详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45709134/article/details/111476291

CSS常用选择器

HTML:展示网页
CSS:美化网页
JS:动态展示网页

1.推荐软件

HBuilder

官网下载
 使用教程
HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。

2.CSS

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。

2.1使用CSS

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS

<head>
	<style type="text/css">
		/* css代码 */
	</style>
</head>

外部引用 - 使用外部 CSS 文件

<head>
	<!-- Link标签有两个作用 一是定义文档与外部资源的关系、二是链接样式表 -->
	<!-- rel 该属性规定当前文档与被链接文档之间的关系。 -->
	<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

2.2常用CSS选择器

1. 元素选择器

作用：通过元素选择器可以选则页面中的所有指定元素
语法：标签名 {}

	p{
		color: red;
	}
	
	h1{
		color: red;
	}

2. id选择器

作用：通过元素的id属性值选中唯一的一个元素
语法：#id属性值 {}

#p1{
		font-size: 20px;
	}

3. 类选择器

作用：通过元素的class属性值选中一组元素
语法：.class属性值{}

	.p2{
			color: red;
		}
		
		.hello{
			font-size: 50px;
		}

4. 选择器分组(并集选择器)

作用：通过选择器分组可以同时选中多个选择器对应的元素
语法：选择器1,选择器2,选择器N{}

#p1 , .p2 , h1{
		background-color: yellow;
		}

5. 通配选择器

作用：他可以用来选中页面中的所有的元素
语法：*{}

	*{
		color: red;
	}

6. 复合选择器（交集选择器）

作用：可以选中同时满足多个选择器的元素
语法：选择器1选择器2选择器N{}

	span.p3{
		background-color: yellow;
	}
	/* 对于id选择器来说，不建议使用复合选择器 */
	
	p#p1{
		background-color: red;
	}

7. 后代元素选择器

作用：选中指定元素的指定后代元素
语法：祖先元素后代元素{}

  /* 选中id为d1的div中的p元素中的span元素 */
			#d1 span{
				color: greenyellow;
			}

8. 子元素选择器

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

	  /* IE6及以下的浏览器不支持子元素选择器 */
	div > span{
		background-color: yellow;
	}

9. 元素之间的关系

父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素

10.属性选择器

作用：可以根据元素中的属性或属性值来选取指定元素
语法：
- [属性名] 选取含有指定属性的元素
- [属性名=“属性值”] 选取含有指定属性值的元素
- [属性名^=“属性值”] 选取属性值以指定内容开头的元素
- [属性名$=“属性值”] 选取属性值以指定内容结尾的元素
- [属性名*=“属性值”] 选取属性值以包含指定内容的元素

p[title]{
				background-color: yellow;
			}
/* 为title属性值是hello的元素设置一个背景颜色为黄色 */
p[title="hello"]{
				background-color: yellow;
			}
 /* 为title属性值以ab开头的元素设置一个背景颜色为黄色 */
 p[title^="ab"]{
				background-color: yellow;
			}

11.伪类选择器

伪类专门用来表示元素的一种的特殊的状态

语法：
- ：属性名

/* 为没访问过的链接设置一个颜色为绿色 */
			a:link{
				color: yellowgreen;
			}
/* 为访问过的链接设置一个颜色为红色 */
			a:visited{
				color: red;
			}
/* :hover伪类表示鼠标移入的状态 */
			a:hover{
				color: skyblue;
			}
/* :active表示的是超链接被点击的状态 */
			a:active{
				color: black;
			}
/* 文本框获取焦点以后，修改背景颜色为黄色 */
			input:focus{
				background-color: yellow;

12.兄弟元素选择器

作用：可以选中一个元素后紧挨着的指定的兄弟元素
语法：前一个 + 后一个|前一个 ~ 后边所有

/* 为span后的一个p元素设置一个背景颜色为黄色 */
			span + p{
				background-color: yellow;
			}
/* 选中后边的所有兄弟元素 */
			span ~ p{
				background-color: yellow;
			}

13.选择器的优先级

优先级的规则
* 内联样式，优先级 1000
* id选择器，优先级 100
* 类和伪类，优先级 10
* 元素选择器，优先级 1
* 通配* ，优先级 0
* 继承的样式，没有优先级

CSS常用选择器

目录

CSS常用选择器

1.推荐软件

2.CSS

2.1使用CSS

2.2常用CSS选择器

1. 元素选择器

2. id选择器

3. 类选择器

4. 选择器分组(并集选择器)

5. 通配选择器

6. 复合选择器（交集选择器）

7. 后代元素选择器

8. 子元素选择器

9. 元素之间的关系

10.属性选择器

11.伪类选择器

12.兄弟元素选择器

13.选择器的优先级