css-选择器

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"]