CSS3的新增选择器
一、兄弟选择器：选择E元素所有兄弟元素F。
<style>
p~p{ color:#f00;}
</style>
</head>
<body>
<div><!--该div是父元素-->
<p>中国十大杰出人物</p>
<p>①别人家的孩子</p>
<p>②别人家的爸爸</p>
<p>③别人家的妈妈</p>
<p>④别人家的老公</p>
<p>⑤别人家的老婆</p>
<p>⑥别人家的公公</p>
<p>⑦别人家的婆婆</p>
<p>⑧别人家的公司</p>
<p>⑨别人家的领到</p>
<p>⑩别人家的员工</p>
</div>
<!--注意:兄弟选择器选中的是【E标签之后】的所有兄弟F上面例子表示选中了第一个p标签后面的所有p标签-->
</body>
<style>
h4~p{ color:#f00;}
</style>
</head>
<body>
<div><!--该div是父元素-->
<p>中国十大杰出人物</p>
<p>①别人家的孩子</p>
<p>②别人家的爸爸</p>
<p>③别人家的妈妈</p>
<h4>④别人家的老公</h4>
<p>⑤别人家的老婆</p>
<p>⑥别人家的公公</p>
<p>⑦别人家的婆婆</p>
<p>⑧别人家的公司</p>
<p>⑨别人家的领到</p>
<p>⑩别人家的员工</p>
</div>
<!--注意:兄弟选择器选中的是【E标签之后】的所有兄弟F,上面例子表示选中了h4标签后面所有的p标签，之前的没有选中-->
</body>
二、伪类选择器
1、结构性伪类选择器
|
选择符
|
版本
|
简介
|
|
E:root
|
CSS3
|
匹配E元素在文档的根元素。
|
|
E:first-child
|
CSS2
|
匹配父元素的第一个子元素E。
|
|
E:last-child
|
CSS3
|
匹配父元素的最后一个子元素E。
|
|
E:only-child
|
CSS3
|
匹配父元素仅有的一个子元素E。
|
|
E:nth-child(n)
|
CSS3
|
匹配父元素的第n个子元素E。
|
|
E:nth-last-child(n)
|
CSS3
|
匹配父元素的倒数第n个子元素E。
|
|
E:first-of-type
|
CSS3
|
匹配同类型中的第一个同级兄弟元素E。
|
|
E:last-of-type
|
CSS3
|
匹配同类型中的最后一个同级兄弟元素E。
|
|
E:only-of-type
|
CSS3
|
匹配同类型中的唯一的一个同级兄弟元素E。
|
|
E:nth-of-type(n)
|
CSS3
|
匹配同类型中的第n个同级兄弟元素E。
|
|
E:nth-last-of-type(n)
|
CSS3
|
匹配同类型中的倒数第n个同级兄弟元素E。
|
|
E:empty
|
CSS3
|
匹配没有任何子元素（包括text节点）的元素E。
|
E:first-child：
<style>
p:first-child{color:#f00;}
</style>
</head>
<body>
<div id="A">
<h4>我是父亲的第1个子元素，可惜我不是p标签，所以无法选中我</h4>
<p>我是父亲的第2个子元素</p>
<p>我是父亲的第3个子元素</p>
<p>我是父亲的第4个子元素</p>
<p>我是父亲的第5个子元素</p>
</div>
<hr />
<div id="B">
<p>我是父亲的第1个子元素，并且我是p标签，所以我被选中了</p>
<p>我是父亲的第2个子元素</p>
<p>我是父亲的第3个子元素</p>
<p>我是父亲的第4个子元素</p>
<p>我是父亲的第5个子元素</p>
</div>
<!--
注意：
1、写法是 p:first-child，而不是div:first-child
2、以div为例 ：div 是元素，<div> 是标签 不过就目前而言多数情况下都视为1种 该选择器的匹配步骤：
1、找到页面中的p元素 (任何标签内部第一个出现p元素)
2、找到该p元素的父亲元素 (找到div元素 一个是id为A的 一个是id为B的)
3、检测找到的p元素的父元素的第一个子元素类型 是否是p标签。
(找到2个div中的第一个子元素，id为A的第一个子元素是h3， id为B的第一个子元素是p)
id为A的div第1个子元素不是p标签：无法选中第一个子元素
id为B的div第1个子元素是p标签: 选中第一个子元素，定义颜色的样式对其生效
-->
</body>
E:last-child：
<style>
p:last-child{color:#f00;}
</style>
</head>
<body>
<div id="A">
<p>我是父亲的第1个子元素</p>
<p>我是父亲的第2个子元素</p>
<p>我是父亲的第3个子元素</p>
<p>我是父亲的第4个子元素</p>
<h4>我是父亲的最后一个子元素，可惜我不是p标签，所以无法选中我</h4>
</div> <hr /> <div id="B">
<p>我是父亲的第1个子元素</p>
<p>我是父亲的第2个子元素</p>
<p>我是父亲的第3个子元素</p>
<p>我是父亲的第4个子元素</p>
<p>我是父亲的第5个子元素，并且我是p标签，所以我被选中了</p>
</div> <!--
注意：
1、写法是 p:last-child，而不是div:last-child
2、以div为例 ：div 是元素，<div> 是标签 不过就目前而言多数情况下都视为1种 该选择器的匹配步骤：
1、找到页面中的p元素 (任何标签内部第一个出现p元素)
2、找到该p元素的父亲元素 (找到div元素 一个是id为A的 一个是id为B的)
3、检测找到的p元素的父元素的最后个子元素类型 是否是p标签。
(找到2个div中的最后一个子元素，id为A的最后一个子元素是h3， id为B的最后一个子元素是p)
结果：
id为A的div最后1个子元素不是p标签：无法选中第一个子元素h3
id为B的div最后1个子元素是p标签: 选中最后一个子元素p，定义颜色的样式对其生效
-->
</body>
E:nth-child(n) ：
<style>
/*li:nth-child(7){color:#f00;} 选中指定序号(正序)第7个li被选中*/
/*li:nth-child(odd){color:#f00;} 选中奇odd偶even类型(正序)*/
/*li:nth-child(2n+1){color:#f00;} 选中自定义序列类型(正序)*/
</style>
</head>
<body>
<ul>
<li>我是爹地的第1个孩子</li>
<li>我是爹地的第2个孩子</li>
<li>我是爹地的第3个孩子</li>
<li>我是爹地的第4个孩子</li>
<li>我是爹地的第5个孩子</li>
<li>我是爹地的第6个孩子</li>
<li>我是爹地的第7个孩子</li>
<li>我是爹地的第8个孩子</li>
<li>我是爹地的第9个孩子</li>
<li>我是爹地的第10个孩子</li>
</ul> <!--
这种选中方式是从父元素的角度查看所有的子元素，将所有子元素看做一个集合，并且编号，
然后从包含所有子元素的集合中选取指定序号的元素(并且该元素类型为指定类型)，注意和E:nth-of-type(n)的区别
假设:
样式 li:nth-child(5){color:#f00}
内容
<ul>
<li>我是爹地的第1个孩子</li>
<li>我是爹地的第2个孩子</li>
<li>我是爹地的第3个孩子</li>
<li>我是爹地的第4个孩子</li>
<p>我是爹地的第5个孩子</p> 这是第五个元素 但是不是li标签，所以无法选中
<li>我是爹地的第6个孩子</li>
<li>我是爹地的第7个孩子</li>
<li>我是爹地的第8个孩子</li>
<li>我是爹地的第9个孩子</li>
<li>我是爹地的第10个孩子</li>
</ul>
-->
</body>
E:nth-last-child(n)：
<style>
li:nth-last-child(2){color:#f00;} /*选中指定序号(倒序)*/
/*li:nth-last-child(even){color:#f00;} 选中奇odd偶even类型(倒序)*/
/*li:nth-last-child(3n+1){color:#f00;} 选中自定义序列类型(倒序)*/
</style>
</head>
<body>
<ul>
<li>我是爹地的第1个孩子</li>
<li>我是爹地的第2个孩子</li>
<li>我是爹地的第3个孩子</li>
<li>我是爹地的第4个孩子</li>
<li>我是爹地的第5个孩子</li>
<li>我是爹地的第6个孩子</li>
<li>我是爹地的第7个孩子</li>
<li>我是爹地的第8个孩子</li>
<li>我是爹地的第9个孩子</li>
<li>我是爹地的第10个孩子</li>
</ul> <!--
这种选中方式是从父元素的角度查看所有的子元素，将所有子元素看做一个集合，并且编号，然后从包含所有子元素的集合中选取指定序号(倒数)的元素(并且该元素类型为指定类型)，注意和E:nth-last-of-type(n)的区别
假设:
样式 li:nth-last-child(5){color:#f00}
内容
<ul>
<li>我是爹地的第1个孩子</li>
<li>我是爹地的第2个孩子</li>
<li>我是爹地的第3个孩子</li>
<li>我是爹地的第4个孩子</li>
<li>我是爹地的第5个孩子</li>
<p>我是爹地的第6个孩子</p>这是倒数第五个元素 但是不是li标签，所以无法选中
<li>我是爹地的第7个孩子</li>
<li>我是爹地的第8个孩子</li>
<li>我是爹地的第9个孩子</li>
<li>我是爹地的第10个孩子</li>
</ul>
-->
</body>
E:only-child：
<style>
li:only-child{color:#f00;font-size:30px}
</style>
</head>
<body>
<ul id="A">
<li>我是父元素ul的唯一的子元素，独生子</li> </ul> <hr /> <ul id="B">
<li>我是父亲的第一个孩子，我不是独生子</li>
<li>我是父亲的第二个孩子，我不是独生子</li>
</ul> <!--
当且仅当当指定元素是其父元素的唯一子元素的时候可以选中该子元素。这里选中了第一个ul下的li。如果都有两个li标签，就没法选中
-->
</body>
E:first-of-type
<style>
p:first-of-type{color:#f00;}
</style>
</head>
<body>
<div id="A">
<h4>我是父亲的第1个子元素</h4>
<p>我是父亲的第2个子元素，我虽然是父亲的第2个元素，但是我是父亲p元素中第1个p元素，所以选中了</p>
<p>我是父亲的第3个子元素</p>
<p>我是父亲的第4个子元素</p>
<p>我是父亲的第5个子元素</p>
</div> <hr /> <div id="B">
<p>我是父亲的第1个子元素，我是父亲的第一个p标签所以我被选中了</p>
<p>我是父亲的第2个子元素</p>
<p>我是父亲的第3个子元素</p>
<p>我是父亲的第4个子元素</p>
<p>我是父亲的第5个子元素</p>
</div> <!--
注意:of-type系列和child系列不同之处在于：
child系列的元素序号是把父亲的所有子元素放在一个集合中，然后排序
例如: id="A"的div共有5个子元素，所以他们在child系列中的序号是 <div id="A">
① <h4>我是父亲的第1个子元素</h4>
② <p>
我是父亲的第2个子元素，我虽然是父亲的第2个元素，但是我是父亲p元素中第1个p元素，所以选中了
</p>
③ <p>我是父亲的第3个子元素</p>
④ <p>我是父亲的第4个子元素</p>
⑤ <p>我是父亲的第5个子元素</p>
</div> of-type系列的元素序号是把指定的元素类型的所有同类元素放在一个集合中，然后排序。
例如: id="A"的div共有5个子元素，但是p元素只有四个，
所以p元素在of-type系列中的序号是 <div id="A">
<h4>我是父亲的第1个子元素</h4>
① <p>
我是父亲的第2个子元素，我虽然是父亲的第2个元素，但是我是父亲p元素中第1个p元素，所以选中了
</p>
② <p>我是父亲的第3个子元素</p>
③ <p>我是父亲的第4个子元素</p>
④ <p>我是父亲的第5个子元素</p>
</div> 所有的child和of-type都遵循此原则。
如果指定元素的所有兄弟元素都为同一类型(例如:ul内部子元素全部为li)，那么 child完全等于of-tyoe -->
</body>
E:last-of-type：
<style>
p:last-of-type{color:#f00;}
</style>
</head>
<body>
<div id="A"> <p>我是父亲的第1个子元素</p>
<p>我是父亲的第2个子元素</p>
<p>我是父亲的第3个子元素</p>
<p>我是父亲的第4个子元素，我是父元素倒数第一个p元素，所以我被选中</p>
<h4>我是父亲的第5个子元素</h4>
</div> <hr /> <div id="B">
<p>我是父亲的第1个子元素</p>
<p>我是父亲的第2个子元素</p>
<p>我是父亲的第3个子元素</p>
<p>我是父亲的第4个子元素</p>
<p>我是父亲的第5个子元素，我是父元素倒数第一个p元素，所以我被选中了</p>
</div> </body>
E:nth-of-type(n)
<style>
/*dt:nth-of-type(2){color:#f00;} 选中指定序号(正序)*/
/*dt:nth-of-type(odd){color:#f00;} 选中奇odd偶even类型(正序)*/
/*dt:nth-of-type(3n+1){color:#f00;} 选中自定义序列类型(正序)*/
</style>
</head>
<body>
<dialog>
<dt>吕秀才</dt>
<dd>有什么比吃一坨shi更恶心的事情</dd>
<dt>李大嘴</dt>
<dd>吃两坨</dd>
<dt>白展堂</dt>
<dd>有什么比吃2坨shi更恶心的事情</dd>
<dt>吕秀才</dt>
<dd>塞牙了</dd>
</dialog> </body>
E:nth-last-of-type(n)
<style>
dt:nth-last-of-type(1){color:#f00;} /*选中指定序号(倒序)*/
/*dt:nth-last-of-type(even){color:#f00;} 选中奇odd偶even类型(倒序)*/
/*dt:nth-last-of-type(3n+1){color:#f00;} 选中自定义序列类型(倒序)*/
</style>
</head>
<body>
<dialog>
<dt>吕秀才</dt>
<dd>有什么比吃一坨shi更恶心的事情</dd>
<dt>李大嘴</dt>
<dd>吃两坨</dd>
<dt>白展堂</dt>
<dd>有什么比吃2坨shi更恶心的事情</dd>
<dt>吕秀才</dt>
<dd>塞牙了</dd>
</dialog>
</body>
E:only-of-type：
<style>
dt:only-of-type{color:#f00;font-size:30px}
</style>
</head>
<body>
<dialog>
<dt>李明：</dt>
<dd>不认真学习的孩纸都是耍流氓！</dd>
</dialog> <!--
当指定元素是其父元素的唯一一个指定类型元素的时候可以选中该子元素
该实例中:dt是 dt的父元素dialog中唯一的一个dt元素，所以可以选中,如果在dialog再加上一个dt就无法选中了
-->
</body>
E:root
<style>
html:root{background:green}
</style>
</head>
<body>
<p>捣乱用的</p>
<!--在E:root跟选择器中，html页面的根永远都是html元素-->
</body>
E:empty
<style>
p:empty{height:25px;border:1px solid #ddd;background:#eee;}
</style>
</head>
<body>
<div class="test">
<p>我是父亲的第1个子元素p</p>
<p></p> <!--空内容的被选中-->
<p>我是父亲的第3个子元素p</p>
</div>
</body>
2、UI元素状态伪类选择器
|
选择符
|
版本
|
简介
|
|
E:checked
|
CSS3
|
匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
|
|
E:enabled
|
CSS3
|
匹配用户界面上处于可用状态的元素E。
|
|
E:disabled
|
CSS3
|
匹配用户界面上处于禁用状态的元素E。
|
<style>
input:disabled{background:yellow;color:green}
input:enabled{background:#f90;color:red}
input:checked+span{background:red} /*以上三个选择器都是针对表单做的提升修改*/
</style>
</head>
<body>
<form method="post" action="#">
<fieldset>
<legend>disabled和enabled</legend>
<ul>
<li>
<label>
<input type="text" name="id" value="99" disabled /><span>ID</span>
</label>
</li>
<li>
<label>
<input type="text" name="user" value="" />
<!--input的默认状态具有 enabled属性-->
<span>昵称</span>
</label>
</li>
<li>
<label>
<input type="text" name="pwd" value="" enabled />
<span>密码</span>
</label>
</li>
</ul>
</fieldset>
<fieldset>
<legend>选中下面的项试试(单选按钮)</legend>
<ul>
<li><label><input type="radio" name="sex" value="0" /><span>蓝色</span></label></li>
<li><label><input type="radio" name="sex" value="1" /><span>红色</span></label></li>
<li><label><input type="radio" name="sex" value="2" /><span>黑色</span></label></li>
</ul>
</fieldset>
<fieldset>
<legend>选中下面的项试试(多选按钮)</legend>
<ul>
<li><label><input type="checkbox" name="like" value="0" /><span>蓝色</span></label></li>
<li><label><input type="checkbox" name="like" value="1" /><span>红色</span></label></li>
<li><label><input type="checkbox" name="like" value="2" checked /><span>黑色</span></label></li>
</ul>
</fieldset>
</form>
</body>
三、属性选择器
|
选择符
|
版本
|
简介
|
|
E[att]
|
CSS2
|
选择具有att属性的E元素。
|
|
E[att="val"]
|
CSS2
|
选择具有att属性且属性值等于val的E元素。
|
|
E[att~="val"]
|
CSS2
|
选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。
|
|
E[att^="val"]
|
CSS3
|
选择具有att属性且属性值为以val开头的字符串的E元素。
|
|
E[att$="val"]
|
CSS3
|
选择具有att属性且属性值为以val结尾的字符串的E元素。
|
|
E[att*="val"]
|
CSS3
|
选择具有att属性且属性值为包含val的字符串的E元素。
|
|
E[att|="val"]
|
CSS2
|
选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
|
<style>
p[id]{background:red}/*选中有id属性的元素*/
p[id="green"]{background:green}/*选中id为green的元素*/
p[class~="yellow"]{background:yellow}
p[class|="a"]{background:blue} a[href^="http://"]{color:red;text-decoration:none}
a[href$="rar"]{color:pink;text-decoration:none;}
a[href$="rar"]:after{content:url(images/rar.jpg)} a[href*="o"]{background:green}
</style>
</head>
<body>
<p id="abc">小红</p>
<p id="green">小绿毛龟</p>
<p class="fl yellow">我最喜欢黄色了</p>
<p class="a-b">小兰兰</p>
<hr />
<!--E[att^="值"] 选中以指定值开头的属性的元素-->
<a href="http://www.baidu.com">百度一下，你就知道</a><br />
<a href="index.php">返回首页</a><br />
<!--E[att$="值"] 选中以指定值结尾的属性的元素-->
<a href="down.rar">点此下载高清无码的高洛峰的AVI大片的种子</a>
<!--E[att*="值"] 选中包含指定值字符的属性的元素--> </body>
四、伪对象选择器
|
选择符
|
版本
|
简介
|
|
E:first-letter/E::first-letter
|
CSS3
|
设置对象内的第一个字符的样式。
|
|
E:first-line/E::first-line
|
CSS3
|
设置对象内的第一行的样式。
|
|
E:before/E::before
|
CSS3
|
设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
|
|
E:after/E::after
|
CSS3
|
设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
|
|
E::selection
|
CSS3
|
设置对象被选择时的颜色。
|
<style>
p::first-line{color:red}
p::first-letter{color:green;font-size:25px}/*选中第一行的第一个字，优先级比first-line高*/
a::before{content:url(qvod.jpg)}/*选中超链接的前面*/
a::after{content:url(qvod.jpg)}/*选中超链接的后面*/
span::selection{background:#F0F}
</style>
</head>
<body>
<p>
春晓-孟浩然<br />
春眠不觉晓，<br />
处处蚊子咬，<br />
打上敌敌畏，<br />
不至死多少。<br />
</p>
<hr />
<a href="高洛峰.avi">点此下载</a>
<hr />
<span>听歌听的是腕，戴表戴的是链，王八看的是盖...</span>
</body>
五、练习
1、设置如下效果
<style>
a[href$="html"]::before{content:url(images/web.jpg)}
a[href$="txt"]::before{content:url(images/txt.jpg)}
a[href$="rar"]::before{content:url(images/rar.jpg)}
a[href$="avi"]::before{content:url(images/qvod.jpg)}
a[href$="doc"]::before{content:url(images/word.jpg)}
a[href$="xls"]::before{content:url(images/excel.jpg)}
a[href$="ppt"]::before{content:url(images/ppt.jpg)}
</style>
</head>
<body>
<p><a href="index.html">在线web浏览</a></p>
<p><a href="html5.txt">TXT文档</a></p>
<p><a href="html5.rar">压缩文档</a></p>
<p><a href="html5.avi">高清无码的HTML5大片</a></p>
<p><a href="html5.doc">HTML5word文档</a></p>
<p><a href="html5.xls">HTML5excel文档</a></p>
<p><a href="html5.ppt">HTML5幻灯片</a></p> </body>
2、设置表格实现如下效果：
<style>
#test tr:nth-child(odd){background:red}
#test tr:first-child{background:green}
/*需要注意:
要先设定奇数行的颜色，再设定第一行的颜色
*/
</style>
</head>
<body>
<table width="500" border="1" id="test">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
<style>
#test tr:nth-last-child(even){background:red}
#test tr:first-child{background:green}
</style>
</head>
<body>
<table width="500" border="1" id="test">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr> </table>
</body>
3、CSS3的transition属性
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{width:100px;height:100px;background:red;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;}
/*-webkit-transition：兼容WebKit内核的， -moz-transition兼容老版本的火狐 -o-transition兼容老版本的欧朋浏览器 transition标准的
1s表示时间，及动画完成的时间
*/
.box:hover{width:200px;height:200px;background:blue;}
/*
js中设置该属性的时候应该这样写：
WebkitTransition
MozTransition
OTransition
*/
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
CSS3的新增选择器的更多相关文章
- CSS3集锦之新增选择器、圆角、阴影、透明度、transition动画、transform变形、animation动画
---恢复内容开始--- 一.CSS3新增选择器 1.nth-chlid(n)用法 selector:nth-chlid(n)指找到第n个子元素并且该元素为selector标签 <!DOCTYP ...
- 认识CSS3新增选择器和样式
前端之HTML5,CSS3(二) CSS3新增选择器和样式 CSS3新增选择器 结构伪类选择器 :first-child:选取父元素中的第一个子元素的指定选择器 :last-child:选取父元素中的 ...
- CSS3 新增选择器
CSS3 新增选择器 结构(位置)伪类选择器(CSS3) :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 ...
- CSS3 子节点选择器
CSS3中新增了几个子元素选择器,大大提高了开发者的开发效率.之前有些要通过为一个个子元素添加class,或者js实现才能实现的效果.现在可以很方便的用选择器实现. 这些新的样式已被现代浏览器及IE9 ...
- CSS3的属性选择器
CSS3中新增了许多选择器,今天零度给大家说说CSS3的属性选择器. 与CSS2相比,CSS3新增了3种属性选择器:[attr^=value].[attr$=value].[attr*=value]: ...
- 妙味css3课程---1-2、css3中新增的伪类和伪元素有哪些
妙味css3课程---1-2.css3中新增的伪类和伪元素有哪些 一.总结 一句话总结: 1.div:target{}是什么意思? 比如a标签的锚点链接到div,div:target{}就可以找到这个 ...
- JQ表单选择器和CSS3表单选择器
JQ表单选择器和CSS3表单选择器 JQ表单选择器 为了使用户能够更加灵活地操作表单,jQuery中加入了表单选择器,利用这个选择器能极其方便的获取到表单的某个或者某类型的元素.表单选择器的介绍如图: ...
- 极客技术专题【008期】：CSS3核心技术：选择器
日期:2013-8-19 来源:GBin1.com 技术专题介绍 技术专题:CSS3核心技术:选择器 专题演讲稿:CSS3选择器 分享人:知名前端技术博客 - w3cplus.com 博主 - 大漠 ...
- jQ not()选择器 与 css3 :not( selector )选择器
1.jQ not() 2.css3 not w3c在线演示地址 http://www.w3school.com.cn/tiy/t.asp?f=css_sel_not 总结: 注意两者还是有区别的 ...
随机推荐
- rsync --include-from --exclude-from的理解
rsync --include-from --exclude-from的理解: 1.同时添加--include-from --exclude-from时.后者是对前者的结果进行排除 如:“--incl ...
- 用MVC5+EF6+WebApi 做一个小功能(二) 项目需求整理
在一个项目开始前,需求整理大概要占到整个项目周期15%甚至30%的比重,可以说需求理得越清楚,后续开发中返工几率越小.在一个项目中,开发新功能的花费的精力要远远小于修改功能的精力,这基本是一个共识.老 ...
- CSS 分类 选择器
CSS:层叠样式表(英文全称:Cascading Style Sheets) 后缀名:css 标志 style 对网页中元素位置的排版进行像素级精 ...
- [android] 轮播图-无限循环
实现无限循环 在getCount()方法中,返回一个很大的值,Integer.MAX_VALUE 在instantiateItem()方法中,获取当前View的索引时,进行取于操作,传递进来的int ...
- Java ArrayList 数组之间相互转换
做研发的朋友都知道,在项目开发中经常会碰到list与数组类型之间的相互转换,本文通过一个简单的例子给大家讲解具有转换过程. package test.test1; import java.util.A ...
- 杭电acm习题分类
专注于C语言编程 C Programming Practice Problems (Programming Challenges) 杭电ACM题目分类 基础题:1000.1001.1004.1005. ...
- 理解Java线程
使用多线程的目的是更好的利用cpu资源,大部分多线程代码都可以用单线程来实现,但也有无法用单线程实现的,如:生产者消费者模型 下面对一些常用的概念进行区分: 多线程:指的是这个程序(一个进程)运行时产 ...
- CodeForces822A
A. I'm bored with life time limit per test 1 second memory limit per test 256 megabytes input standa ...
- javascript原型对象与原型链
在javascript中,当系统加载构造函授后 ,会自动在内存中增加一个对象,这个对象就是原型对象.构造函数和原型对象在内存中表现为相互独立,但两者之间还存在联系,构造函数的prototype是原型对 ...
- BZOJ5322: [JXOI2018]排序问题
传送门 不难看出期望就是 \(\frac{(n+m)!}{\prod_{v=1}^{max}(cnt_v!)}\),\(cnt_v\) 表示 \(v\) 这个数出现的次数. 贪心就是直接把 \(m\) ...