CSS 选择器 - 带实例

前端css选择器种类繁多，今天作了一下整理，不过该文章只适合前端小萌新，老油条请绕道。

1. 常见选择器

1. 元素选择器

a,p,div,li,ul{
	color:red;
}
/*页面上全部的a,p,li,ul都会将字体颜色设置为红色，不过优先级最低*/
复制代码

2. id选择器

<p id="test">我会红</p>
<style> #test{ color:red; } /*id选择器经过id属性来绑定一个惟一id，样式经过# + ‘id’来实现关联，优先级较高*/ </style>
复制代码

3. 类选择器

<p class="test">我会红</p>
<style> .test{ color:red; } /*类选择器经过class属性来绑定一个类名，样式经过. + ‘class’来实现关联，优先级低于id选择器*/ </style>
复制代码

4. 属性选择器

<a class="test" src='/test.html'>我会红</a>
<style> [src^="test"]{ color:blue; } .test[src]{ color:red; } /*属性选择器经过[attr=*]来选择具备该属性的元素，属性值支持通配符(不作具体详解)形式，优先级较低，多种选择器能够结合使用，上例中，后者优先级高于前者，因此呈现的字体为红色。*/ </style>
复制代码

2.子元素和后代元素选择器

<p>我不会变色</p>
<ul>
   <li>我是子元素<span>我是子子元素</span></li>
   <li>我是第二个子元素</li>
   <li>
   	<li>我是li里面的li</li>
   </li>
</ul>
<p>我会变红</p>
<style> ul li{ margin-left:20px; } /*经过空格隔开的方式选择全部子元素，这样，ul里面的全部li都会应用到左边距20px的样式,包括li里面的li*/ ul>li{ padding-left:20px; } /*经过选择器 > 选择器 来选择直接子元素，意思是说，只有第一级的li会被应用成左内边距20px,而li里面的li不会被应用到。*/ ul + p{ background-colo:red; } /*经过 选择器 + 选择器 来选择兄弟元素，这样让下面的p元素的背景色为红色，而第一个p标签的背景色不会变。*/ </style>
复制代码

3伪类选择器

伪类专门用来表示元素的一种的特殊的状态。 好比：访问过的超连接，好比普通的超连接，好比获取焦点的文本框。 当咱们须要为处在这些特殊状态的元素设置样式时，就可使用伪类。

:link,表示普通的连接（没访问过的连接） :visited,表示访问过的连接 :hover,表示鼠标移入的状态 :active,表示的是超连接被点击的状态 :focus,表示文本框获取焦点 ps: :hover和:active也能够为其余元素设置(ie6不支持)

说明：普通标签支持:hover,:focus,其余伪类只有一些特定的标签才支持，好比说：a标签支持:visited,:active,link；button支持:active,:focus。举例：

<a class="test" src='/test.html'>我是链接</a>
<button>点我我就绿</button>
<style> a:link{ color:blue; } /*链接未被访问过，为blue颜色*/ a:visited{ color:red; } /*访问以后，变成红色*/ a:hover{ font-size:40px; } /*鼠标一上去，字体变大*/ button:focus{ color:green; } /*点击按钮，按钮聚焦，会变成绿色*/ button:active{ color:red; } /*点击按钮的过程当中，按钮颜色会变红*/ </style>
复制代码

4伪元素选择器

p:first-letter 做用：选择p中第一个字符 p:first-line,选择p中的第一行 :before,表示元素最前边的部分， 通常before都须要结合content这个样式一块儿使用，经过content能够向before或after的位置添加一些内容 :after,表示元素的最后边的部分

5子元素伪类选择器

:first-child 能够选中第一个子元素 :last-child 能够选中最后一个子元素 :nth-child(XXX) 能够选中任意位置的子元素,该选择器后边能够指定一个参数，指定要选中第几个子元素,even 表示偶数位置的子元素,odd 表示奇数位置的子元素。 :first-of-type、:last-of-type、:nth-of-type和:first-child这些很是的相似，只不过child，是在全部的子元素中排列，而type，是在当前类型的子元素中排列

6优先级

很明显，上面多种选择器直接，会存在交叉和冲突，不少地方库，咱们在引入的时候，须要覆盖原来的样式，这时候能够利用选择器优先级来覆盖原来库里面的样式。 元素选择器 < 属性选择器 < 类名选择器 < id选择器。给样式增长!important,会提升样式的优先级，不过不建议使用。若是是相同的优先级，则后写的样式会覆盖前面写的样式。子选择器的优先级低于直接选择的优先级。多个类名的组合的优先级会高于单个类名的优先级。多级的子选择器会比一级的子选择器优先级高。

写在最后： 想看更多文章，能够关注个人我的公众号：