CSS 常用选择器

前言：本文如有欠缺请告知，我会及时修改，文章中介绍的都是对于我来说使用频率较高的选择器；如果有不懂不了解的地方欢迎来评论

1.通配符选择器

在CSS中，“ * ”符号为通配符选择器的定义，它表示选取页面中所有元素

例子：

*{
	margin: 0;   定义外边距为0
	padding: 0;  定义内边距为0
}

注意点：在企业开发中不建议使用通配符选择器，它会遍历页面中所有的元素，降低了代码的运行速度

2.元素选择器

定义：通过元素名称来选择修改所有该元素的样式

例子：

p{
	text-align: center;  定义p元素中的文字居中对齐
	font-size: 13px;  定义p元素中的文字大小为13px
}

这段代码表示的是 所有p元素中的文字大小都为13px的大小

3.id选择器

定义：id选择器通过html元素中的id属性来选择

<p id="text">123</p>

/* 如果id名字为text，则在css中在text前添加“#”符号即可 */
#text{
	font-size: 13px;
}

补充：元素的id是唯一性，有些朋友可能有疑惑，具体讲解可以看此链接：

https://blog.csdn.net/sinat_36521655/article/details/80693167

注意点：id名称不能以数字开头

4.类选择器

例子：

<span class="word">Not found</span>

/* 如果class名字为word，则在css中在word前添加”.“符号即可 */
.word{
	font-size: 20px;
}

类选择器是可以多次使用的，html元素中class可以包含多个名字
小tip：建议类选择器用于css中，id选择器则用于Javascript
注意点：class名称不能以数字开头

5.选择器分组

在开发过程中我们可能会遇到一个情况，一个页面中有多个元素具有相同的样式定义

例子：

<p>1</p>
<h1>2</h1>
<h2>3</h2>

p{
	font-size: 13px;
	color: red;
}
h1{
	font-size: 13px;
	color: red;
}
h2{
	font-size: 13px;
	color: red;
}

使用分组选择器只需在元素选择器的基础上加上逗号
类选择器和id选择器也可以使用下例句式

p，h1，h2{
	font-size: 13px;
	color: red;
}

6.标签属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。
例子：

/* 匹配html中有class属性的标签 */
div[class]{
	background-color: blue;
}
/* 匹配html中class属性中为a的标签 如果标签的class有两个值，例如class=“a b”则不会应用该样式*/
div[class='a']{
	font-size: 30px;
}

7.伪类选择器：

:hover

当鼠标指针悬停在该元素上面时，设置其样式
例：

div{
    height: 100px;
    width: 100px;
    background-color: red;
    }
div:hover{
   background-color: black;
}

如图所示：

:nth-child（n）

属于其父元素下的第某个元素的每个p标签的背景色
例：

p{	
	background-color: blue;
}
p:nth-child（1）{
	background-color: red;
}

如图所示：

完。
鸽太久了，现在才写完，感觉漏了挺多知识点的，写的都是自己常用的选择器，有兴趣可以去百度。