笔记很全,自己看。
/* 选择器 {
属性: 值;
属性1: 值1;
} */
/* 选择器 */
/* 一、基本选择器 */
/* 1、元素选择器 用元素名称做选择器 E{} 特例*{} *表示所有元素 */
/* div {
color: red;
background: yellow;
font-size: 30px;
} */
/* 2、属性选择器E[attr]{}
div[id]有id属性的div元素
div[id=xx]有id属性,且id属性值为xx的div元素
div[id*=xx]有id属性,且id属性值包含xx的div元素
div[id^=xx]有id属性,且id属性值以xx开头的div元素
div[id$=xx]有id属性,且id属性值以xx结尾的div元素
*/
/* div[id$=xx] {
color: red;
background: yellow;
font-size: 30px;
} */
/* 3、id选择器 */
/* #xx {
color: red;
background: yellow;
font-size: 30px;
} */
/* 特例:结合选择器 */
/* p#aa {
color: red;
background: yellow;
font-size: 30px;
} */
/* 4、class选择器 */
/* .aa {
color: red;
background: yellow;
font-size: 30px;
} */
/* 特例:结合选择器 */
/* p.aa {
color: red;
background: yellow;
font-size: 30px;
} */
/* 5、包含选择器 selector1 selector2{} 强调包含关系 不一定是父子,也可能是祖孙 弱的包含关系*/
/* div p {
color: red;
background: yellow;
font-size: 30px;
} */
/* 6、子选择器 selector1>selector2{} 强的包含关系,必须是父子*/
/* div>p {
color: red;
background: yellow;
font-size: 30px;
} */
/* 7、兄弟选择器 selector1~selector2{} 匹配selector1对应的元素后边能匹配selector2的兄弟节点
所有弟弟:selector2为 * */
/* .php~* {
color: red;
background: yellow;
font-size: 30px;
} */
/* 8、选择器组合 selector1,selector2,selector3...{}*/
/* div a,
span,
p,
h3 {
color: red;
background: yellow;
font-size: 30px;
} */
/* 二、伪元素选择器 */
/* 1、首字母 块级元素*/
/* p::first-letter {
color: red;
font-size: 30px;
} */
/* 2、首行 块级元素*/
/* word-break单词裂开? keep-all保持完整 break-all裂开*/
/* p {
word-break: break-all;
}
p::first-line {
color: red;
font-size: 30px;
} */
/* 只针对第一行或第一个元素,应用于块级元素 */
/* 3、往前加东西::before */
div::before {
/* 添加的内容 */
content: "aaa";
background: pink;
color: blue;
}
/*4 、往后加东西::after */
div::after {
/* 添加的内容 */
content: "bbb";
background: yellow;
color: purple;
}
/* 三、伪类选择器 */
/* 1、结构性伪类选择器
:nth-child() 括号里可以加数字,数字从1开始;表达式,2n+1 3n+2..;n从0开始;也可以是odd(奇数) even(偶数)
找第一个: :nth-child(1) :first-child
:nth-last-child() 括号里可以加数字,数字从1开始;表达式,2n+1 3n+2..;n从0开始;也可以是odd(奇数) even(偶数)
当值为一的时候: :nth-last-child(1) 相当于:first-child
*/
/* 同类型的第n个
:nth-of-type() 括号里可以加数字,数字从1开始;表达式,2n+1 3n+2..;n从0开始;也可以是odd(奇数) even(偶数)
:nth-of-type(1) :first-of-type
倒着数
:nth-last-of-type()括号里可以加数字,数字从1开始;表达式,2n+1 3n+2..;n从0开始;也可以是odd(奇数) even(偶数)
:nth-last-of-type(1)相当于:last-of-type
*/
/* 2、 UI状态伪类选择器
:hover鼠标放上去(悬停状态)
:focus焦点状态(输入框输入)
:checked选中状态(单选框、复选框)
*/
/* h3 div:hover{
background: yellow;
color:purple
} */
/* input{
background: pink;
}
input :hover{
background: yellow;
}
input:focus{
background: purple;
} */
/* input:checked{
box-shadow: 2px 2px 3px pink;
} */
/* 3、其他伪类选择器 not()排除 */
/* h3 div:not(.java):not(.php){
background: yellow;
color: purple;
} */
/* css选择器优先级 */
/* 规则一:选择器写的越准确(越长)优先级越高 */
/* 规则二:优先级高低 id选择器>class选择器>元素选择器 */
/* 规则三:同级别同长度下,css代码按顺序执行,后边的代码把前边的代码覆盖掉(同一样式覆盖,不同样式效果叠加) */
/* 规则四:以上规则适用于绝大多数场景,若有特殊场景不适用,自行测试 */