css选择器
内容：
基础选择器
复合选择器
伪元素选择器
基础选择器
*通配符选择器
*{
-border: 1px solid red; } [href]属性选择器
[href]{
color: red; } 属性选择器
[href="#"]{
color: green; }///找到带#的样式 [href^="https"]{
color: yellow; } ///找到开头https的样式 ^正则里面的 [href$=".cn"]{
color: skyblue; } ///找尾部.cn的样式 $正则里面的 代表寻找尾部 [href*="qq"]{
color: pink; } ///搜索所有属性包含qq的样式 [class~="aa"]{
border: 1px solid red; } //查找class所有类都包含在内aa的类的样式 [type="password"]{
background-color: red; } //查找type属性里面值为password的样式 复合选择器
并集选择器
并集选择器 用，分隔开 a,li,ul,h2,h5{
border:2px solid #008000; } 后代选择器
后代选择器 用空格表示 ul li{
color: red; } 子元素选择器
使用子元素选择器>表示 ul>li{
border: 2px solid yellow; } 相邻兄弟选择器
相邻兄弟选择器：与第一个元素相邻的第二个元素相匹配 #aa li{
color: blue; } //只能匹配#aa中的兄弟第一个li元素 普通兄弟选择器
5.普通兄弟选择器 #aa~li{
color: #FF1493;
} //匹配#aa下所有兄弟li元素
伪元素选择器
p::first-line{ color: red; } //选中P标签第一行元素
p::first-letter{
color: blue;
} //选择p标签第一个字
p::before{
content: "你好";
} //在P元素最前面添加文子为你好 content必须有
p::after{
content: "我不好";
} //在P元素最后面添加文子为我不好
结构性伪类
:root {
border: 1px solid red;
} //根元素选择器 不怎么使用
ul > li:first-child {
color: red;
} //选中子元素的第一个元素
ul > li:last-child {
color: red;
} //选中子元素的最后一个元素
ul > li:only-child {
color: red;
}
//选择只有一个子元素的那个子元素。
div > p:only-of-type {
color: red;
}
//选择只有一个指定类型的子元素的那个子元素
ul > li:nth-child(n) {
color: red;
}
//指定子元素的第n个元素
ul > li:nth-last-child(n) {
color: red;
} //指定子元素的倒数第n个元素
动态伪类选择器
-
link
a:link { color: red; } //表示鼠标未访问的链接 -
visited
a:visited { color: orange; }//表示已访问过的连接 -
hover
a:hover { color: blue; } //表示鼠标悬停在超链接上。 -
active
a:active { color: green; } //表示鼠标按下激活超链接时候 -
focus
input:focus { border: 1px solid red; }//表示获得焦点时