CSS选择器
前言
CSS的主要使用场景就是网页，布局页面的
CSS是层叠样式表（Cascading Style Sheets）的简称，有时我们也会称之为CSS样式表或级联样式表。CSS也是一种标记语言
CSS基础选择器
标签选择器
p{
color:green;
}
类选择器
<div class="red">变红色</div>
.red{
color:red;
}
类选择器-多类名
<div class="red red2">内容</div>
ID选择器
#id名{
属性1：属性值1;
....
}
通配符选择器
*{
属性：属性值;
...
}
复合选择器
后代选择器
元素1 元素2{ 样式声明 }
上述语法表示选择元素1里面所有元素2(后代元素)
子选择器
元素1>元素2{
样式声明
}
上述语法表示选择元素1里面所有直接后代子元素
并集选择器
元素1,元素2{
样式声明
}
上述语法表示选择元素1和元素2 元素之间用逗号隔开
伪类选择器
链接伪类选择器
| 值 | 作用 |
|---|---|
| a:link | 选择所有未被访问的链接 |
| a:visited | 选择所有已被访问的链接 |
| a:hover | 选择鼠标指针位于其上的链接 |
| a:active | 选择活动链接.鼠标按下未弹起的链接 |
focus 伪类选择器
input:focus{
background-color
}
复合选择器总结
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及作用 |
|---|---|---|---|---|
| 后代选择器 | 用来选择后代元素 | 可以是子孙后代 | 较多 | 符号是空格.nav a |
| 子代选择器 | 选择最近一级元素 | 只选亲儿子 | 较少 | 符号是大于 .nav>p |
| 并集选择器 | 选择某些相同样式的元素 | 可以用于集体声明 | 较多 | 符号是逗号.nav,header |
| 链接伪类选择器 | 选择不同状态的链接 | 根链接相关 | 较多 | 重点记住a{}和a:hover实际开发的写法 |
| :focus选择器 | 选择获得光标的表单 | 跟表单相关 | 较少 | input:focus |
