关于 CSS 选择器

今天刚开通博客，先自我介绍一下，Mike，大学没填志愿就跑到某培训机构学了两年，2012年出道，工作历程可谓坎坷，就不多说了，反正最终选择从 事web前端的工作。结合出道至今的工作以及学习，写下今天这篇博文，与大家分享，并希望各位指点一二，感激不尽。当年语文没学好，文采不好，我就直奔主题了。（主要写一下属性以及伪类吧）1、元素选择器。这个东西最简单，也最常见，就是以元素为选择器来添加样式例：html {color:black;} //设置html元素颜色blackdiv {color:gray;} //设置div元素颜色grayh1 {color:silver;} //设置h1元素颜色gray

就是说，你想让某个元素使用某个样式，就直接写 元素{样式} 即可。

2、选择器分组分组就是把某几个元素写一起设置相同的样式即可例：div,p,strong{color:#FF0} //设置div,p,strong它们的颜色色值为 FF0.part_one div a,.part_two a,.part_three p{color:#FFF} //设置.part_one div a 和 .part_two a 和 .part_three p 的文本颜色值为 FFF

3、类选择器即元素中带有属性class在设置样式的时候可以使用 .classname{style} 这种方式来设置样式例：<div class="mydiv">This is content.</div>.mydiv{color:#F00;}这样就设置了class为mydiv的元素的文本颜色值为 F00

4、ID 选择器即元素中带有属性id在设置样式的时候可以使用 #idname{style} 这种方式来设置样式例：<div id="mydiv1">This is content.</div>#mydiv1{color:#F00;}这样就设置了id为mydiv的元素的文本颜色值为 F00(其实跟类选择器没有什么大的区别，只是权重的区别，同一个元素id选择器的样式会覆盖类选择器的样式，这里就不做详细讲解了，)

5、后代选择器这个也是很常见的一个选择器，只是可能名称听起来有点不太熟悉举个例子大家就明白了例：div ul{color:#FF0}这就是一个简单的后代选择器，就是谁下面的谁，就是这样了

6、子元素选择器这个选择器，在最开始的时候，莫名其妙的就被我忽略了，知道后来，突然间看到了一个案例，才又想起来 - -、还是用例子说话比较好例：div > h1{color:red;}<div><h1>my h1</h1></div>//这个有效<div><div><h1>li h1</h1></div></div>//这个有效<div><ul><li><h1>li h1</h1></li></ul></div>

这个例子中只会选择到第一行和第二行div中的h1而不会选择到第三行里面的h1，因为这个子元素选择器只会选择它直属的子元素而不会选择它的孙子级别，或者孙子级别以下的元素，而第三行里面的h1就属于li的直属子元素，而非div的直属子元素了，所以就不起效

7、相邻兄弟选择器选择紧接在另一个元素后的元素,且二者有相同的父元素h1 + p {color:red;}<h1>header</h1><p>text</p><p>text</p>这里会选择到h1下面的第一个p，而选择不到第二个p，因为第二个p并不是紧接在h1后面

li + li {font-weight:bold;}<ul> <li>li1</li> <li>li2</li> <li>li3</li> </ul> <ol> <li>li1</li> <li>li2</li> <li>li3</li> </ol>这个样式，只能应用到ul和ol里面的第二、三个li元素，因为第一个li它的上面已经没有紧接着的li了，所以就不会有效果

8、伪类听起来很高大上，但是如果说起来a:link,a:visited,a:hover,a:active 这些都是伪类的一种的话，是不是就比较亲民了，其实这个a的叫伪锚类（这名字就更高大上了。。）:focus这个比较实用，可以用在input text 里面设置背景input:focus{background-color:yellow;}<input type="text" name="fname" /><input type="text" name="lname" /><input type="submit" value="Submit" />这样的话，按钮点下去的时候也会背景变黄，这就有点不爽了，可以随便扩展一下如：input[type="text"]:focus{background-color:yellow;}这样submit按钮就点下去的时候不会变黄了

:first-child必须声明 DOCTYPE，这样 :first-child 才能在 IE 中生效。p:first-child {font-weight: bold;}li:first-child {font-weight: bold;}

<p>test Words1</p><ul><li>li1</li><li>li2</li><li>li3</li></ul><ul><p>test words ul p</p><li>li1</li><li>li2</li><li>li3</li></ul><p>test words2</p><p>test words3<p>test words4</p></p>first-child伪类，刚开始理解的时候有点无奈，总是以为是谁下面的第一个元素，搞半天，才弄明白，原来是第一个这个元素就想上面的html一样css会选择到的是 第一个p 即：<p>test words1</p>，和第二个ul中的p <p>test words ul p</p>，剩余的p都不会被选择同样会选择到每个ul中的第一个li，因为他们拥有不同的父级注：如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 :focus 伪类。

:lang说实话，这个，我还真搞不明白什么时候用它比较好 - -、 希望哪个看到的大大同样能为大家解答一下，tks~！:lang 类为带有值为 "no" 的 lang 属性的 q 元素定义引号的类型q:lang(no){quotes: "~" "~" }<p>text <q lang="no">what？</q></p>

9、伪元素（这块我使用到的比较少，查了一下用法，给大家上写实例吧）:first-letter向文本的第一个字母添加特殊样式（只能用于块级元素）p:first-letter{color:#ff0000;font-size:xx-large;}这样就设置了p中的首字母颜色 F00 字体大小为 xx-large

伪元素可以与 CSS 类配合使用：p.article:first-letter{color: #FF0000;}<p class="article">This is a paragraph in an article。</p>上面的例子会使所有 class 为 article 的段落的首字母变为红色。

下面的属性可应用于 "first-letter" 伪元素：fontcolorbackgroundmarginpaddingbordertext-decorationvertical-align (仅当 float 为 none 时)text-transformline-heightfloatclear

:first-line向文本的首行添加特殊样式这个我自己感觉没什么用，挺少见有只给首行加不同样式的p:first-line{color:#0000ff;}

:before在元素之前添加内容这种我经常用在清楚浮动上面，效果挺不错div:after{clear:both;content:".";display:block;height:0;visibility:hidden;font-size:0;}下面是网上的案例：h1:before{content:url(images/logo.gif)}在h1之前添加一个图片

:after在元素之后添加内容h1:after {content:url(images/logo.gif)}在h1之后添加一个图片

10、属性选择器对于 IE8 及更早版本的浏览器中的 [attribute=value]，必须声明 <!DOCTYPE>。下面列举出来属性选择器的用法[attribute]用于选取带有指定属性的元素。例：[title]{color:F00;}<h1 title="hello css">hello h1~!</h1><h2>hello h2~!</h2>这样就可以设置元素带有title属性的文本颜色为 F00 ,即h1的颜色将会被设置为 F00 ，但h2的将不被控制*[title]{color:F00;}//设置带有title属性的元素文本颜色为 F00 a[title]{color:F00;}//设置带有title属性的a元素颜色为 F00 .mydiv ul li a[title]{color:F00;}//设置类名为mydiv下面的ul下面的li下面的带有title属性的a元素颜色为 F00#mydiv ul li a[title]{color:F00;}//设置id名为mydiv下面的ul下面的li下面的带有title属性的a元素颜色为 F00

[attribute=value]用于选取带有指定属性和值的元素。这个功能在某些特定情况下是很实用的，比如高亮，就不用使用jq或者后台程序来判断，只用css来就可以实现例：a[target="_blank"]{color:yellow;}//这样就设置了所有target属性值为_blank的a元素的颜色为yellowh1[title="mytitle"]{color:yellow;}//这样就设置了所有title属性值为mytitle的h1元素的颜色为yellow上面两个例子看过之后，是否就会想出在某些特定情况下的高亮实现方法了呢？

[attribute~=value]用于选取属性值中包含指定词汇的元素。这种用法，第一次见到的时候还是在wordPRess里面，这里就以一个简单的例子来看一下img[title~="first"]{border:3px solid yellow}//这样就设置了下方图片title 属性中包含单词first的图片会带有黄色边框

<img src="a.jpg" title="this is first img" /><img src="b.jpg" title="this is second img" />

[attribute|=value]用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。

[class|=my]{background:yellow;}<h1 class="my-header">this is header</h1><p class="my-text">this is text</p><p class="my-content">this is content</p><p class="my">this is content</p><p class="my content">this is content</p><p class="mycontent">this is content</p><p class="my_content">this is content</p>只有前四个才会应用样式，后三个都不行。但是我不明白为什么第五个就也不行，希望有能为为大家解答的大大出现

[attribute^=value]匹配属性值以指定值开头的每个元素。这个用法也是在wordpress里面常见的，控制性很强大div[class^="my"]{background:#FF0;}<div class="my">this is first</div>//这个会有效果<div class="my_first">this is first</div>//这个会有效果<div class="my-first">this is first</div>//这个会有效果<div class="second">this is second</div><div class="third_my">this is third</div>

[attribute$=value]匹配属性值以指定值结尾的每个元素。这个功能就跟上面的差不多了，上一个是开头，这个是结尾div[class$="my"]{background:#ffff00;}<div class="my_first">this is first</div><div class="second">this is second</div><div class="third_my">this is third</div>//这个会有效果<div class="third-my">this is third</div>//这个会有效果<div class="my">this is third</div>//这个会有效果

[attribute*=value]匹配属性值中包含指定值的每个元素。上面两个，一个开头，一个结尾，这个就是包含了div[class*="my"]{background:#ffff00;}div[class$="my"]{background:#ffff00;}<div class="my_first">this is first</div>//这个会有效果<div class="second">this is second</div><div class="secmyond">this is second</div>//这个会有效果<div class="sec-my-ond">this is second</div>//这个会有效果<div class="third_my">this is third</div>//这个会有效果<div class="third-my">this is third</div>//这个会有效果<div class="my">this is third</div>//这个会有效果

这些东西，不知道在博客园里面会有多少人能看到，我就当是记录自己的一些东西吧。这篇博文并不深入，而且我自己的见解并不多，还有很多要学习的，只是在我工作学习中看到、使用到的一些总结，如果有错误的地方，还希望大家能为我指点出来，互相学习感激不尽。

最后，发现写这个东西还挺累，真不知道那些几百几千篇博文的大大们，咋写的，膜拜一下他们，哈哈！

补充：

element1~element2选择器

该选择器可以选择在同一父元素中的element1元素之后的所有element2元素（element2不必须跟element1同级）

例：

p~ul{color:red}

这样将会设置p后面的3个ul里面的文本颜色为红色

<p>p1</p><ul> <li>1</li> <li>2</li> <li>3</li></ul>

<h2>h2</h2><ul> <li>4</li> <li>5</li> <li>6</li><ul> <li>7</li> <li>8</li> <li>9</li></ul></ul>