css基本语法
选择器{属性名1:属性值;属性名2:属性值}
选择器(元素选择器)
五类:
- 简单
- 组合
- 伪类
- 伪元素
- 属性
简单选择器
- 元素:
div{} - id:
#id{} - 类:
.class{} - 通配:
*{} - 分组:
div, #id,.class{}
组合选择器
- 后代:
div h1,div元素内所有的h1元素 - 子选择器:
div>div>h1,div内的div内的h1 - 相邻兄弟:
div>div>h1+h2,div内的div内的h1紧邻的h2(不包含h1) - 通用兄弟:
div>div>h1~h2,div内的div内的h1后面所有h2(不包含h1)
伪类选择器
描述:根据元素状态来选择一组指定状态的元素
语法:元素:状态{属性名:属性值}
①
- :link,没有点击过的链接
- :visited,鼠标点击过的链接
- :hover,鼠标当前悬停的链接
- :active,鼠标当前选择的链接
②
- :focus,焦点元素
③
每个子元素在父元素的位置从1开始排序;
- p:first-child,位置是1的p子元素
- p:last-child,位置是最后一个的p子元素
- p:nth-child(n),位置是n的p子元素
伪元素选择器
属性选择器
- a[name="zhangsan"]
- a[name$="san"]
- a[name^="zhang"]
- a[name~="gs"]
- a[type="button"]