<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>css3中的选择器</title>
<style type="text/css">
/*基本的id选择器*/
#cont{
background: indianred;
}
.head{
font-family: cursive;
}
/*利用通配符的样式匹配*，^,$ */
/*表示id包含cont的*/
[id*=cont]{
font-size: 40px;
}
/*以指定的id开头的属性*/
[id^="3cont"]{
color: blue;
}
/*指定以d结尾的class属性*/
[class$="d"]{
background: yellowgreen;
}
/*伪类选择器
:first-line:
:first_letter:
:before:
:after:
a:hover:
a:visited:
a:active:
a:link:
*/
/*first-letter:首字母的样式*/
.head:first-letter{
color: aqua;
}
.head:last-child{
font-size: 20em;
}
#url:visited{
background:red;
}
/*鼠标点击时的样式*/
#url:active{
background: royalblue;
}
/*first-line:第一行的样式*/
#p:first-line{
font-size: 23px;
}
#p:before{
content: '在指定id前添加的内容，';
}
#p:after{
content: '，指定元素后面添加的内容';
}
/*：root伪类选择器为整个网页设置样式*/
:root{
background: url("http://imgs.focus.cn/upload/hs/6421/b_64203012.jpg") repeat-x;
}
/*:not ：排除某一个属性*/
body *:not(p){
font-size: 50px;
}
/*内容为空时指定样式*/
p:empty{
background: red;
}
/*为指定的目标属性添加样式*/
:target{
font-size: 26em;
}
li:first-child{
background: orangered;
}
li:last-child{
background: purple;
}
/*为第二个元素添加样式或者设置为为奇数或者偶数的元素添加样式*/
li:nth-child(odd){
background: cyan;
}
/*倒数第二个添加样式*/
li:nth-last-child(even){
background:orchid;
}
li:nth-of-type(1){
color:red;
}
/*关于:nth-child和:nth-of-type的区别之前一直没太注意。最近打算深入了解一些CSS3，才发现里面其实暗藏玄机。
:nth-child可以选择父元素下的字元素，:nth-of-type也可以。但是它们到底有什么区别呢？
其实区别很简单：:nth-of-type为什么要叫:nth-of-type？因为它是以"type"来区分的。也就是说：ele:nth-of-type(n)是指父元素下第n个ele元素，
而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败。
*/
div:nth-of-type(odd){
color: red;
}
/*UI元素选择器
e:disabled:元素禁用时的选择器
e:enabled:元素启用时的选择器
e:read-only:
e:read-write:
e:checked:
e:default:
e:indeterminate:
e::selection:元素被选中的时候的样式
*/
input[type="text"]:disabled{
background: red;
}
li::selection{
color:cyan;
}
</style>
<script type="text/javascript">
window.onload=function(){
var txt = document.getElementById("text");
txt.disabled="disabled";
}
</script>
</head>
<body>
<section >
<h1 class="head">css3中的选择器,link</h1>
<p id="cont">基本的类选择器</p>
<p id="3cont1">基本的类选择器</p>
<p id="3cont-1">基本的类选择器</p>
<p></p>
<p id="5cont" class="324ddwd">基本的类选择器</p>
<p id="p">伪类元素<br>各种伪类元素first-line</p>
<p></p>
<a href="#" id="url" >google</a>
<a href="#t1" id="url1" >google1</a>
<a href="#t2" id="url2" >google2</a>
<a href="#t3" id="url3" >google3</a>
<span id="t1">2</span>
<span id="t2">3</span>
<span id="t3">4</span>
</section>
<ul>
<li>java</li>
<li>python</li>
<li>ruby</li>
<li>OC</li>
<li>C</li>
<li>ANDROID</li>
</ul>
<div id="ls">
<p>nth-child和nth-of-type的样式比较</p>
<p>好好学习..<span>一定要哦..</span></p>
<a href="#">google<p>慢慢找，慢慢学..</p>一下您遇到的问题....</a>
<article>防水袋</article>
<input type="text" id="text">
</div>
</body>
</html>
浙公网安备 33010602011771号