css的选择器

css的选择器：

• 常用选择器

• 基本选择器

• 层级选择器

• 伪类选择器

• 属性选择器

1）常用选择器：

1.标签：以标签作为查询依据 例如 div{ background: #ccc;}

2.id:以标签作为查询依据  例如  #imgid{background: #ccc;}

3.类id:以标签作为查询依据  例如  .imgcls{background: #ccc;}

4.关联: 有所关联，例如父子关系查询  . div .imgcls{background: #ccc;}

5.组合: 同时选中两个元素赋予一样的样式 . div1 .imgcls,.div2 .imgcls{background: #ccc;}

2）基本选择器

1. :first-child:将查询到的第一个元素赋予样式，例如有4个img标签，img:first-child:{background: #ccc;}只会给第一个img标签样式。
2. :first-letter：查询到标签或者类里面的第一个字符，如p:first-letter{front-size:50px;}
3. :first-line：查询到标签或者类里面的第一行，如p:first-line{front-size:50px;}
4. :last-child：将查询到的最后一个元素赋予样式
5. :nth-child(2) ：设置查询到第2个元素赋予样式

3）层级选择器

1. a,b ，组合
2. a b 空格，所有的后代元素
3. a>b >子元素
4. a+b  +找到a后面的b

4）伪类选择器

1. :hover    img:hover{background:#ccc},鼠标悬停背景变成灰色
2. :focus    username:focus{background:#ccc},获得鼠标焦点是username文本框背景变为灰色
3. ::selection  p::selection{background:#ccc},使鼠标范围选中的颜色由默认的蓝色变为灰色

5）属性选择器

1. [id]
2. [id=use1]
3. [name~=us]
4. [name|=en]
通过属性查找