css选择器笔记

1基础选择器：

01.通配选择器

• 作用：可以用来选中页面中的所有的元素
• 语法

​
*{
	background-color:skyblue;
}

​

02.id选择器：

• 作用：通过元素的id属性值选择唯一的一个元素
• 语法

#p1{
	background-color:skyblue;
}

03.类选择器：

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

.p1{
	background-color:skyblue;
}

04.标签选择器:

作用：选中当前页面中所有符合标签

语法：

h1 {
            color: rgb(32, 27, 28);
        }

2.包含选择器

1. 子代元素选择器

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

 ul>li {
            background-color: pink;
        }

2.后代元素选择器

• 作用：选中指定元素的指定后代元素，css样式表存在层叠性，后边的会将前边的覆盖掉
• 语法：祖先元素 后代元素{ }

ul li {
            background-color: aqua;
        }

        ul div>li {
            background-color: brown;
        }

3.逗号选择器：

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

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

 div,
        p,
        h1 {
            background-color: aqua;
        }

4.属性选择器：

1. 作用：可以根据元素中的属性或属性值来选取指定元素
2. 语法：

• [属性名]：选取含有指定属性的元素

​
type的属性值里包含e的input元素 
        
        input[type*="e"] {
            background-color: blueviolet;
        }

        input[type^="p"] {
            background-color: chartreuse;
        }

        input[type$="l"] {
            background-color: red;
        }

​

• 5伪类选择器：

• 1.链接伪类
• :link表示普通的链接（没访问过的链接）

​
a:link{
	color:skyblue;
}

​

• :visited表示访问过的链接
• :target表示一个特殊的元素，它的id是URI的片段标识符

a:visited{
	color:pink;
}

2.动态伪类：

hover表示鼠标移入的状态

 a:hover+div {
            color: pink;
        }

active表示的是被点击的状态

a:active {
            background-color: pink;
        }

        div:hover {
            background-color: pink;
        }

3.表单伪类：

enabled表示可编辑的表单

input:enabled{
	background-color:skyblue;
}

disabled表示被禁用的表单

input:disabled{
	background-color:skyblue;
}

checked表示被选中的表单

input:checked{
	width:200px;
	height:200px;
	background-color:skyblue;
}

focus表示的是获取焦点

input:focus{
	background-color:skyblue;
}

6.结构伪类选择器：

 <style>
        /* 先找.father，然后对所有的子元素进行排序，找到对应序号的子元素，然后再去看子元素是否满足条件（.son） */
        .father .son:nth-child(2) {
            background-color: pink;
        }


        /* 先找.father，再找.father里的.son，然后对.son进行排序 */
        .father .son:nth-of-type(2) {
            background-color: aqua;
        }
    </style>

7.伪元素选择器：

first-letter表示的是为第一个字符设置一个特殊的样式

p::first-letter{
	background-color:skyblue;
}

first-line表示的是为第一行设置一个特殊的样式

p::first-line{
	background-color:skyblue;
}

selection表示的是选中的内容

p::selection{
	background-color:skyblue;
}

before表示元素最前边的部分

p::before{
	content: "我会出现在整个段落的最前边";
	color:skyblue;
}

after表示元素最后边的部分

p::after{
	content: "我会出现在整个段落的最前边";
	color:skyblue;
}

补充：优先级的规则

内联样式1，0，0，0

id选择器0，1，0，0

类和伪类选择器0，0，1，0

元素选择器0，0，0，1

通配选择器0，0，0，0