目录
一、基本选择器
1、元素选择器
2、属性选择器
3、id选择器
4、特例:结合选择器
5、包含选择器
6、子选择权
7、兄弟选择器
8、选择器组合
二、伪元素选择器
1、首字母伪元素选择
2、首行元素选择器
3、前插伪元素选择器
4、后插伪元素选择器
三、伪类选择器
1、结构性伪类选择器
2、UI状态伪类选择器
3、排除伪类选择器
一、基本选择器
1、元素选择器
div{color: red;background:pink;
}
用元素标签名称做选择
*{ color: red;background:pink;
}
直接选择全部元素2、属性选择器
div[id]{ 有元素id的div元素全部选中color: red;background:pink;
}
div[id=xx]{ id是xx的div元素全部选中color: red;background:pink;
}
div[id$=xx]{ id以xx结尾的div元素全部选中color: red;background:pink;
}
div[id^=xx]{ id以xx开头的div元素全部选中color: red;background:pink;
}
div[id*=xx]{ id包含xx的div元素全部选中color: red;background:pink;
}3、id选择器
#xx{ id属性为xx的元素全部选中，面向所有元素，并不局限于div元素,比如<div id="xx"></div> 或<p id="xx"></p>color: red;background:pink;
}
.xx{ class属性为xx的元素全部选中，面向所有元素，并不局限于div元素，比如<div class="xx"></div>color: red;background:pink;
}4、特例:结合选择器
h4.xx{ h4.xx之间不可有空格color: red;background:pink;
}5、包含选择器
div p{ 在div内部找p标签，中间用空格隔开，符合条件的被选中color: red;background:pink;
}
#father p{ 在id为father的标签内部找p标签，符合条件的被选中color: red;background:pink;
}包含选择器只强调包含在其内部，不论包含几级均可被选中
6、子选择权
形式如：selector1>seloctor2
必须是父子关系，selector1内部一级包含selector2才可被选中
7、兄弟选择器
形式如：selector1~seloctor2
.php~.java{color: red;background:pink;
}8、选择器组合
div,h3,p,span{ 同时选中标签为div,h3,p,span的元素color: red;background:pink;
}二、伪元素选择器
1、首字母伪元素选择
使用前提必须是块级元素
.zzz::first_letter {color:green;background:blue;
}2、首行元素选择器
使用前提必须是块级元素
.zzz::first_line {color:green;background:blue;
}3、前插伪元素选择器
使用前提必须有content元素才可以使用
content元素不仅可以插入并显示文本，还可以插入并显示图片
#zzz::before {content: "666";color:green;background:blue;
}
#zzz::before {content:url(tupian.png); 前插并显示图片width:20px;height:30px;color:green;background:blue;
}4、后插伪元素选择器
使用前提必须有content元素才可以使用
content元素不仅可以插入并显示文本，还可以插入并显示图片
#zzz::after {content: "666";color:green;background:blue;
}三、伪类选择器
1、结构性伪类选择器
<ul><li>first1</li><li>first2</li><li>first3</li></ul><ul><li>first4</li><li>first5</li><li>first6</li></ul>index.css
ul li:nth-child(3){color: pink;background: orange;
}:nth-child()正位置计数，括号内直接放数字，从1开始，代表元素顺序位置;括号内可以放两个预定义值odd(奇数) even( 偶数);括号内可以存放表达式，比如: 3n+1
:nth-1ast-child()倒位置计数括号内直接放数字，从1开始，代表元素顺序位置;括号内可以放两个预定义值odd(奇数) even( 偶数) ;括号内可以存放表达式，比如: 3n+1
:first-child等价与 :nth-child(1)
:last-child等价与 :nth-last-child(1)
2、UI状态伪类选择器
:hover悬停状态基本所有元素可以使用
:foucs焦点状态输入框元素等可以使用
3、排除伪类选择器
:not() 排除元素，若需排除多个元素，连续书写即可