css 选择器

笔记很全，自己看。

/* 选择器 {
    属性: 值;
    属性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代码按顺序执行，后边的代码把前边的代码覆盖掉（同一样式覆盖，不同样式效果叠加） */
/* 规则四：以上规则适用于绝大多数场景，若有特殊场景不适用，自行测试 */