css选择器

选择器的使用格式：/* 选择器{
    属性:值;
    属性:值;
} */

 一、基本选择器

/* 1、元素选择器 根据元素名字做选择 */

/* div {
    color: blue;
    background: purple;
} */

/* 2、属性选择器 根据属性做选择 [属性名] */

/* 特例：结合选择器 */

/* [id]有id属性的元素
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: blue;
    background: purple;
} */

/* 3 id选择器 # */

/* div#xx {
    color: blue;
    background: purple;
} */

/* 4、class选择器. */

/* div.xx {
    color: blue;
    background: purple;
} */

/* 5、包含选择器 选择器1 选择器2 强调包含*/

/* h1.aa {
    color: blue;
    background: purple;
} */

/* 6、子选择器 选择器1>选择器2 强调必须父子 */

/* h1>.aa {
    color: blue;
    background: purple;
} */

/* 7、兄弟选择器 选择器1~选择器2 选择器2为*表示找所有弟弟*/

/*.php~* {
    color: blue;
    background: purple;
} */

/* 8、选择器组合 选择器1,选择器2,选择器3 或 */

/* div,
p,
.java,
h1 span {
    color: blue;
    background: purple;
} */

/* *选择所有 */

/* * {
    color: blue;
    background: purple;
} *
 
二、伪元素选择器 

/* 首字母 */

/* div::first-letter {
    color: pink;
    font-size: 50px;
} */

/* 首行 适用于块级元素*/

/* div {
    单词裂开
    word-break: break-all;
} */

/* div::first-line {
    color: pink;
    font-size: 50px;
} */

/* 往前添加内容 */

/* div::before {
    content: "aaaa";
    background: yellow;
} */

/* 往前添加内容 */

/* div::after {
    content: "cccc";
    background: yellow;
} */

三、伪类选择器

/* 结构性伪类选择器 */

/* nth-child(n) 正着数 nth-last-child(n)倒着数 认数字
n可以是数字 从1开始 可以是英文单词 odd奇数个 even偶数个 也可以是表达式 3n+1 2n-2 n从0开始

first-child第一个 last-child最后一个
*/

/* nth-of-type(n) nth-last-of-type(n)倒着数 某类型下的第n个
n可以是数字 从1开始 可以是英文单词 odd奇数个 even偶数个 也可以是表达式 3n+1 2n-2 n从0开始
first-of-type第一个 last-of-type最后一个
*/

/* ul li:nth-child(2) {
    color: blue;
    background: purple;
} */

/* ul li:last-of-type {
    color: blue;
    background: purple;
} */

/* UI状态伪类选择器 */

/* :hover鼠标悬停
:focus焦点状态
:checked选中状态
*/

/* ul li:hover {
    color: blue;
    background: purple;
} */

input:focus {
    background: red;
}

input:checked {
    box-shadow: 5px 5px 5px red;
}

/* 排除选择器 :not() */

/* ul li:not(.java):not(.php) {
    color: blue;
    background: purple;
} */

/* css选择器优先级 */

/* 规则1：选择器写的越长（准确），优先级越高 */

/* 规则2：id选择器>class选择器>元素选择器*/

/* 规则3：同样级别同长度，按照顺序执行 */

/* 规则4：特殊场景自行测试 */