CSS3选择器

属性选择器

在CSS3中，增加了三个属性选择器：[att*=val]、[att^=val]和[att$=val]。

[att*=val]属性选择器

[att*=val]属性选择器的含义是：如果元素用att表示的属性之属性值中包含用val指定的字符的话，则主元素使用这个样式。

<div id="section1" class="divYellow">示例文本1</div>
<div id="subsection1-1">示例文本1-1</div>
<div id="subsection1-2">示例文本1-2</div>
<div id="section2">示例文本2</div>
<div id="subsection2-1">示例文本2-1</div>
<div id="subsection2-2">示例文本2-2</div>

示例代码中，如果使用[att*=val]属性选择器，则页面中id为section1、subsection1-1、subsection1-2的div元素的背景色都变为黄色，因为这些元素的id属性中都包含section1字符。

[id*=section1]{
    background-color: yellow;
}

[att^=val]属性选择器

[att^=val]属性选择器的含义是：如果元素用att表示的属性之属性值的开头字符为用val指定的字符的话，则该元素使用这个样式。
示例代码中，如果使用[att^=val]属性选择器，并且将val指定为section，则页面中id为section1、section2的div元素的背景色都变为黄色，因为这些元素的id属性的开头字符都为section字符。

[id^=section1]{
    background-color: yellow;
}

[att$=val]属性选择器

[att$=val]属性选择器的含义是：如果元素用att表示的属性之属性值的结尾字符为用val指定的字符的话，则该元素使用这个样式。
示例代码中，如果使用[att$=val]属性选择器，并且将val指定为-1，则页面中id为subsection1-1、subsection2-1的div元素的背景色都变为黄色，因为这些元素的id属性的结尾字符都为-1字符。另外注意该属性选择器中必须在指定匹配字符前加上\这个转义字符。

[id$=\-1]{
    background-color: yellow;
}

结构性伪类选择器

CSS 中的类选择器及伪元素

什么是伪类选择器

在CSS中，可以使用类选择器把相同的元素定义成不同的样式，譬如针对一个p元素，我们可以做如下所示的定义。

p.right{text-align:right}
p.center{text-align:right}

然后在页面上对p元素使用class属性，来把定义好的样式指定给具体的p元素。

<p class="right">测试文字</ p>
<p class="center">测试文字</p>

除了上面所述的类选择器之外，还有一种伪类选择器，这种伪类选择器与类选择器的区别是，类选择器可以随便起名，但是伪类选择器是css中已经定义好的选择器，不能随便起名。

//a元素上的几种伪类选择器
a:link{color:#FFOOOO;text-decoration:none}
a:visited{color:#OOFFOO;text-decoration:none}
a:hover{color:#FFOOFF;text-decoration:underline}
a :active{color:#OOOOFF; text-decorationlunderline}

什么是伪元素选择器

所谓伪元素选择器，是指并不是针对真正的元素使用的选择器，而是针对css中已经定义好的伪元素使用的选择器。

选择器:伪元素{属性:值}
选择器 类名:伪元素{属性:值}

主要有如下四个伪元素选择器。

first-line伪元素选择器，用于为某个元素中的第一行文字使用样式。
first-letter伪元素选择器，用于为某个元素中的文字的首字母或第一个字使用样式。
before伪元素选择器，用于在某个元素之前插入一些内容。

//可以插入一段文字
<元素> :before{
content:插入文字
}
//也可以插入其他内容
<元素>:before{
content:url(test.wav)
}

after伪元素选择器，用于在某个元素之后插入一些内容。用法与before用法一样。

//first-line
p:first-line{color:#0000FF} 
<p>段落中的第一行。<br>段落中的第二行</p>
//first-letter
p:first-letter{color:#0000FF}  
<p>This is an english text。</p>
<p>这是一段中文文字。</p>
//before
li:before{content: ●}
<ul>
    <li>列表项目1</li>
    <li>列表项目2</li>
    <li> 列表项目3</li>
    <li> 列表项目4</li>
    <li> 列表项目5</li>
</ul>
</body>
//after
li:after{
    content: "(仅用于测试，请勿用于商业用途。)";
    font-size:12px;
    color:red;
}
<h1>电影清单</h1>
<ul>
    <li><a href="movie1.mp4">狄仁杰之通天帝国</a></li>
    <li><a href="movie2.mp4">精武风云</a></li>
    <li><a href="movie3.mp4">大笑江湖</a></li>
</ul>

选择器root、not、empty和target

root选择器

root选择器将样式绑定到页面的根元素中。所谓根元素，是指位于文档树中最顶层结构的元素，在HTML页面中就是指<html>部分。

:root{
    background-color: yellow;
}
body{
    background-color: limegreen;
}
<h1>选择器概述</h1>
<p>
    选择器是CSS3中一个重要的内容。首先需要说明的是，使用选择
器的目的是为了提高开发人员书写或修改样式表时的工作效率，因为在样式表中，一般会书写大量
的代码，在大型网站中，样式表中的代码可能会达到几千行。
</p>

not选择器

如果想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式时，可以使用not选择器。

body *:not(h1){
    background-color: yellow;
}

empty选择器

使用empty选择器来指定当元素内容为空白时使用的样式。

:empty{
    background-color: yellow;
}
<table border="1" cellpading="0" cellspacing="0">
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>D</td><td>E</td><td></td></tr>
</table>

target选择器

使用target选择器来对页面中某个target元素(该元素的id被当做页面中的超链撞来使用)指定样式，该样式只在用户点击了页面中的起链接，并且跳转到target元素后起作用。

:target{
    background-color: yellow;
}
<p id="menu">
    <a href="#text1">示例文字1</a> | 
    <a href="#text2">示例文字2</a> | 
    <a href="#text3">示例文字3</a> | 
    <a href="#text4">示例文字4</a> | 
    <a href="#text5">示例文字5</a> 
</p>
<div id="text1">
    <h2>示例文字1</h2>
    <p>...此处略去</p>
</div>
<div id="text2">
    <h2>示例文字2</h2>
    <p>...此处略去</p>
</div>
<div id="text3">
    <h2>示例文字3</h2>
    <p>...此处略去</p>
</div>
<div id="text4">
    <h2>示例文字4</h2>
    <p>...此处略去</p>
</div>
<div id="text5">
    <h2>示例文字5</h2>
    <p>...此处略去</p>
</div>

选择器：first-child 、last-child、nth-child和nth-Iast-child

单独指定第一个子元素、最后一个子元素的样式

要选中父元素中的第一个子元素、最后一个子元素，可以使用first-child和last-child。

li:first-child{
    background-color: yellow;
}
li:last-child{
    background-color: skyblue;
}
<h2>列表A</h2>
<ul>
    <li>列表项目1</li>
    <li>列表项目2</li>
    <li>列表项目3</li>
    <li>列表项目4</li>
    <li>列表项目5</li>
</ul>

对指定序号的子元素使用样式

如果使用nth-child选择器与nth-Iast-child选择器，不仅可以指定某个父元素中第一个子元素以及最后一个子元素的样式，还可以针对父元素中某个指定序号的子元素来指定样式。

li:nth-child(2){
    background-color: yellow;
}
li:nth-last-child(2){
    background-color: skyblue;
}
<h2>列表A</h2>
<ul>
    <li>列表项目1</li>
    <li>列表项目2</li>
    <li>列表项目3</li>
    <li>列表项目4</li>
    <li>列表项目5</li>
</ul>

对所有第奇数个子元素或第偶数个子元素使用样式

除了对指定序号的子元素使用样式以外，nth-child选择器与nth-Iast-child选择器还可以用来对某个父元素中所有第奇数个子元素或第偶数个子元素使用样式。

//所有正数下来的第奇数个子元素
nth-child (odd) {
//指定样式
}
//所有正数下来的第偶数个子元素
<子元素>:nth-child(even){
//指定样式
}
//所有倒数上去的第奇数个子元索
<子元素>:nth-last-child(odd){
//指定样式
}
//所有倒数上去的第偶数个子元素
<子元素>:nth-last-child(even){
//指定样式
}

这两个选择器用于某些元素时，会产生一些问题。

h2:nth-child(odd){
    background-color: yellow;
}
h2:nth-child(even){
    background-color: skyblue;
}
<div>
    <h2>文章标题A</h2>
    <p>文章正文。</p>
    <h2>文章标题B</h2>
    <p>文章正文。</p>
    <h2>文章标题C</h2>
    <p>文章正文。</p>
    <h2>文章标题D</h2>
    <p>文章正文。</p>
</div>

nth-child选择器在计算子元素是第奇数个元素还是第偶数个元素的时候，是连同父元素中的所有子元素一起计算的。
换句话说，h2:nth-child(odd)这句话的含义，并不是指"针对div元素中第奇数个h2子元素来使用"，而是指当div元素中的第奇数个子元素如果是h2子元素的时候使用"。

选择器: nth-of-type和nth-Iast-of-type

使用这两个选择器的时候， CSS3在计算子元素是第奇数个子元素还是第偶数个子元素的时候，就只针对同类型的子元素进行计算了。

h2:nth-of-type(odd){
    background-color: yellow;
}
h2:nth-of-type(even){
    background-color: skyblue;
}

循环使用样式

nth-child(xn+y)，x表示每次循环中共包括几种样式，y表示指定的样式在循环中所处的位置。

//4种背景色作为一组循环
li:nth-child(4n+1) {
background-color: yellow;
}
li:nth-child(4n+2) {
    background-color: limegreen;
}
li:nth-child(4n+3) {
    background-color: red;
}
li:nth-child(4n+4) {
    background-color: white;
}

only-child选择器

only-child选择器指定当某个父元素中只有一个子元素时才使用的样式。
与only-child选择器作用相同的用法还有：

<子元素>:nth-child(1):nth-last-child(1){}
<子元素>:nth-of-type(1):nth-last-of-type(1){}

UI元素状态伪类选择器

这些选择器的共同特征是：指定的样式只有当元素处于某种状态下时才起作用，在默认状态下不起作用。
在CSS3中，共有11种UI元素状态伪类选择器，分别是E:hover、E:active、E:focus、E:enabled、E:disabled、E:read-only、E:read-write、E:checked、E:default、E:indeterminate及E::selection。

选择器：E:hover、E:active和E:focus

E:hover选择器用来指定当鼠标指针移动到元素上面时元素所使用的样式。
E:active选择器用来指定元素被激活(鼠标在元素上按下还没有松开)时使用的样式。
E:focus选择器用来指定元素寂得先标焦点时使用的样式，主要是在文本框控件获得焦点并进行文字输入的时候使用。

input[type="text"]:hover{
        background-color: greenyellow;
}
input[type="text"]:focus{
        background-color: skyblue;
}
input[type="text"]:active{
        background-color: yellow;
}
<form>
<p>姓名：<input type="text" name="name" /></p>
<p>地址：<input type="text" name="address" /></p>
</form>

E:enabled伪类选择器与E:disabled伪类选择器

E:enabled伪类选锋器用来指定当元素处于可用状态时的样式。
E:disabled伪类选择器用来指定当元素处于不可用状态时的样式。

<script>
function radio_onchange(){    
    var radio=document.getElementById("radio1");
    var text=document.getElementById("text1");
    if(radio.checked)
        text.disabled="";
    else{
        text.value="";
        text.disabled="disabled";
    }
}
</script>
<style>
input[type="text"]:enabled{
    background-color:yellow; 
}
input[type="text"]:disabled{
    background-color:purple;
}
</style>
<form>
<input type="radio" id="radio1" name="radio" onchange="radio_onchange();">可用</radio>
<input type="radio" id="radio2" name="radio" onchange="radio_onchange();">不可用</radio><br/>
<input type=text id="text1" disabled />
</form>

E:read-only伪类选择器与E:read-write伪类选择器

E:read-only伪类选择器用来指定当元素处于只读状态时的样式。
E:read-write伪类选择器用来指定当元素处于非只读状态时的样式。

<style type="text/css">
input[type="text"]:read-only{
        background-color: gray;
}
input[type="text"]:read-write{
        background-color: greenyellow;
}
input[type="text"]:-moz-read-only{
        background-color: gray;
}
input[type="text"]:-moz-read-write{
        background-color: greenyellow;
}
</style>
<form>
    <p>名前：<input type="text" name="name" />
    <p>地址：<input type="text" name="address" value="江苏省常州市" readonly="readonly" /></p>
</form>

伪类选择器：E:checked 、E:default和E: indeterminate

E:checked伪类选择器用来指定当表单中的radio单选框或checkbox复选框处于选取状态时的样式。

<style type="text/css">
input[type="checkbox"]:checked {
    outline:2px solid blue;
}
input[type="checkbox"]:-moz-checked {
    outline:2px solid blue;
}
</style>
<form>
兴趣:<input type="checkbox">阅读</input>
<input type="checkbox">旅游</input>
<input type="checkbox">看电影</input>
<input type="checkbox">上网</input>
</form>

E:default选择器用来指定当页面打开时默认处于选取状态的单选框或复选框控件的样式。需要注意的是，即使用户将该单选框或复选框控件的选取状态设定为非选取状态，E:default选择器中指定的样式仍然有效。

<style type="text/css">
input[type="checkbox"]:default {
    outline:2px solid  blue;
}
</style>
<form>
兴趣:<input type="checkbox" checked>阅读</input>
<input type="checkbox">旅游</input>
<input type="checkbox">看电影</input>
<input type="checkbox">上网</input>
</form>

E:indeterminate伪类选择器用来指定当页面打开时，如果一组单选框中任何一个单选框都没有被设定为选取状态时整组单选框的样式，如果用户选取了其中任何一个单选框，则该样式被取消指定。

<style type="text/css">
input[type="radio"]:indeterminate{
        outline: solid 3px blue;
}
</style>
<form>
年龄：
<input type="radio" name="radio" value="male" />男
<input type="radio" name="radio" value="female" />女
</form>

E::selection伪类选择器

E::selection伪类选择器用来指定当元素处于选中状态时的样式。

<style type="text/css">
p::selection{
    background:red;
    color:#FFF;
}
p::-moz-selection{
    background:red;
    color:#FFF;
}
input[type="text"]::selection{
    background:gray;
    color:#FFF;
}
input[type="text"]::-moz-selection{
    background:gray;
    color:#FFF;
}
</style>
<p>这是一段测试文字。</p>
<input type="text" value="这是一段测试文字。"/><p/>

通用兄弟元素选择器

通用兄弟元素选择器用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式。

<子元素>~<子元素之后的同级兄弟元素> {
  //指定样式
}

这里的同级是指子元素和兄弟元素的父元素是同一个元素。

<style type="text/css">
div ~ p {background-color:#00FF00;}
</style>
<div style="width:733px; border: 1px solid #666; padding:5px;">
  <div>
    <p>p元素为div元素的子元素</p>
    <p>p元素为div元素的子元素</p>
  </div>
  <hr />
  <p>p元素为div元素的兄弟元素</p>
  <p>p元素为div元素的兄弟元素</p>
  <hr />
  <p>p元素为div元素的兄弟元素</p>
  <hr />
  <div>p元素为div元素的子元素</div>
  <hr />
  <p>p元素为div元素的兄弟元素</p>
</div>

使用选择器在页面中插入内容

使用选择器

在CSS2中，使用before选择器在元素前面插入内容，使用after选择器在元素后面插入内容，在选择器的content属性中定义要插入的内容。
为了让插入的文字具有美观效果，可以在选择器中加入文字的颜色、背景色、文字的字体等各种样式。

h2:before {
  content: 'test';
  color: white;
  background-color: orange;
  padding: 1px 5px;
  margin-right: 10px;
}
<h2>标题文字</h2>

指定个别元素不进行插入

将content的属性值设置为none，指定为不插入内容。还可以将content的属性值设置为normal，其作用和使用方法与none相同。

插入图像

h2.new:before {
  content: url(mark.png)
}

如果在content属性中通过attr(属性名)这种形式来指定attr属性值，可以将某个属性的属性值显示出来。

img:after {
  content: attr(alt);
  text-align: center;
  margin-top: 5px;
}

最后编辑于：2018.07.25 18:50:26

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 218,451评论 6赞 506
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 93,172评论 3赞 394
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 164,782评论 0赞 354
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,709评论 1赞 294
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,733评论 6赞 392
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,578评论 1赞 305
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,320评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,241评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,686评论 1赞 314
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,878评论 3赞 336
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,992评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,715评论 5赞 346
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,336评论 3赞 330
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,912评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 33,040评论 1赞 270
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,173评论 3赞 370
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,947评论 2赞 355