index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
</body>
</html>index.css
css选择器 分类
一、基本选择器
1、元素选择器
E{} element
/* selector{property:value;property2:value2;....} */
/* 选择器{属性：值；属性：值；}
/* p {
background: red;
} */
/* div {
background: red;
} */
/* 特例：*{}代表所有 */
/* * {
background: red;
} */
2、属性选择器
E[attr]{} 是元素选择器的强化 attr 所有的属性都可以（自己造的也可以）
/* div[id] { 有id属性的div
background: red;
} */
/* div[id=xx] { = 有id属性，并且id 属性等于xx的div
background: red;
} */
div[id*=xx] {
/**=有id属性，并且id 属性值包含xx的div*/
background: red;
}
/* div[id ^=xx] { ^= 有id属性，并且id 属性值以xx开头的div
background: red;
} */
/* div[id $=xx] {$= 有id属性，并且id 属性值以xx结尾的div
background: red;
} */
/* 可以用有没有该属性做限制，用属性值做限制，也可以用属性的位置做限制 */
3、ID选择器
/* #xx { id是xx的元素
background: red;
} */
/* 特例：结合选择器 注：中间没有空格*/
/* p#xx {
background: red;
} */
/* 看成在不同维度上给元素加别名
id:唯一标识符
class:类 */
4、Class选择器
/*
.xx {
background: red;
} */
/*
p.xx {
background: red;
} */
5、包含选择器
selector1 selector2....{} 不一定是父子关系 祖孙关系 弱的包含关系*/
/* div p {
background: red;
} */
/* .qcby li a {
background: red;
} */
6、子选择器
selector1>selector2>.... 必须是父子*/
/* .qcby>li>a {
background: red;
} */7、兄弟选择器
selector1~ selector2
兄弟：具有共同父元素的元素们叫兄弟[亲兄弟]
匹配selector1对应的元素后边能匹配 selector2的兄弟节点 【弟】
/*
#php~.java {
background: red;
} */
/* 找哥哥：整体 - 弟弟 */
/* .java {
background: red;
}
#php~.java {
background: white;
} */
8、选择器组合
selector1,selector2,selector3....{}
/* p {
background: red;
}
span {
background: red;
}
div {
background: red;
} */
/* 选择器组合：有限的，能够枚举出来的元素 ，样式相同的*/
/* p,
span,
div {
background: red;
} */
/* *代表所有，加表面看不出来的样式，通用的样式 */
二、伪选择器
1、伪元素选择器
/* ::first-letter(第一个字母)，::first-line(第一行)，使用时依赖的元素必须是块级元素 */
/*
div::first-letter {
color: red;
font-size: 40px;
font-weight: 600;
}
*/
/* ::after ::before */
/*
div::after {
content: url("../images/1.jpg");
background: red;
color: white;
font-size: 40px;
}
*/
/*
div::before {
content: "555";
background: green;
color: white;
font-size: 40px;
}
*/
2、伪类选择器
/* :nth-child() 括号中可以使用数字，代表第几，从1开始；预定义词 odd(奇数) even(偶数) 表达式:例如2n+1,n从0开始
:nth-last-child() 括号中可以使用数字，代表第几，从1开始；预定义词 odd(奇数) even(偶数) 表达式:例如2n+1,n从0开始
:nth-child(1) 等价于 :first-child
:nth-last-child(1) 等价于 :last-child
.zy li:nth-last-child(1) {
color: red
}
.zy li:nth-last-child(2) {
color: blue
}
.zy li:nth-last-child(even) {
color: red
}
.zy li:nth-last-child(-n+4) {
color: red
}
*/
/* :nth-of-type重在于类型(是p、h、ul等) :nth-child()重在于位置（在第几行） */
/*
:nth-of-type() 括号中可以使用数字，代表第几，从1开始；预定义词 odd(奇数) even(偶数) 表达式:例如2n+1,n从0开始
:nth-last-of-type() 括号中可以使用数字，代表第几，从1开始；预定义词 odd(奇数) even(偶数) 表达式:例如2n+1,n从0开始
:nth-of-type(1) 等价于 ：first-of-type
:nth-last-of-type(1) 等价于 ：last-of-type
.zy li:nth-of-type(1) {
color: red
}
*/3、第二类UI状态伪类选择器
/* 悬停状态 */
/*
.zy li {
background: blue;
}
.zy li:hover {
background: red;
}
table tr td {
background: green;
}
table td:hover {
background: red;
}
*/
/* 文本框 */
input {
background: green;
}
input:hover {
background: red;
}
/* 焦点状态 */
input:focus {
background: yellow;
}
/* 选中状态 */
input:checked {
box-shadow: 10px 20px 3px red;
}
三、第三类选择器
排除选择器
.zy li:not(.java):not(#php) {
color: red
}
![[openGL] qt5版本+mingw编译Assimp库+调用](https://img-blog.csdnimg.cn/direct/df217120553a4b9aad11db6e18bc7fbf.png)
