层叠样式表(CSS)2(环境:MyEclipse 10)
二、选择器
注:在head里面写选择器的内容。环境一直不变,所有HTML和css都是这个MyEclipse 10
1.基本选择器(每个选择器新建一个HTML网页测试学习)
元素选择器:按节点名称匹配元素(例子里面的节点名:span)
语法:html的标签名{css的属性;}
选择器:
<style type="text/css">
span{color:yellow;font-size:70px; }
</style>
body页面内容:
<span>元素选择器</span>
效果:元素选择器:黄色+70像素大小
id选择器:利用id的唯一性匹配所有元素(id:d1/d2)
语法:#id值{css的属性;}
选择器:
<style type="text/css">
#d1{background-color: yellow;}
#d2{background-color: green;}
</style>
body:
<div id="d1">id1</div>
<div id="d2">id2</div>
效果:id1:黄色 id2:绿色
class选择器:类选择器,按class属性的值,匹配所有元素
语法:.class值{css的属性;}
选择器:
<style type="text/css">
.s1{background-color: black}
.s2{background-color: yellow}
</style>
body:
<div class="s1">d111</div>
<div class="s2">d222</div>
<div class="s2">d333</div>
效果:d111:黑色 d222和d333:黄色
选择器优先级:
id选择器>类选择器>元素选择器
2.属性选择器
语法:基本选择器[属性=“属性值”]{css的属性;}
例如 input[type="text"]{background-color: yellow;}
选择器:
<style type="text/css">
input[type="text"]{background-color: yellow}
input[type="password"]{background-color: blue}
</style>
body:
<form action="">
Username:<input type="text" /><br/>
Password:<input type="password" /><br/>
</form>
效果:用户输入框:黄色 密码输入框:蓝色
3、伪元素选择器
选择器 | 例子 | 例子 |
---|---|---|
:active | a:active | 匹配被点击的链接 |
:checked | input:checked | 匹配处于选中状态的 < input > 元素 |
:disabled | input:disabled | 匹配每个被禁用的 < input > 元素 |
:empty | p:empty | 匹配任何没有子元素的 元素 |
:enabled | input:enabled | 匹配每个已启用的 < input > 元素 |
:first-child | p:first-child | 匹配父元素中的第一个子元素 < p >,< p > 必须是父元素中的第一个子元素 |
:first-of-type | p:first-of-type | 匹配父元素中的第一个 < p > 元素 |
:focus | input:focus | 匹配获得焦点的 < input> 元素 |
:hover | a:hover | 匹配鼠标悬停其上的元素 |
:in-range | input:in-range | 匹配具有指定取值范围的 < input> 元素 |
:invalid | input:invalid | 匹配所有具有无效值的 < input> 元素 |
:lang(language) | p:lang(it) | 匹配每个 lang 属性值以 "it" 开头的 < p> 元素 |
:last-child | p:last-child | 匹配父元素中的最后一个子元素 < p>, < p> 必须是父元素中的最后一个子元素 |
:last-of-type | p:last-of-type | 匹配父元素中的最后一个 < p> 元素 |
:link | a:link | 匹配所有未被访问的链接 |
:not(selector) | :not(p) | 匹配每个非 < p> 元素的元素 |
:nth-child(n) | p:nth-child(2) | 匹配父元素中的第二个子元素 < p> |
:nth-last-child(n) | p:nth-last-child(2) | 匹配父元素的倒数第二个子元素 < p> |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 匹配父元素的倒数第二个子元素 < p> |
:nth-of-type(n) | p:nth-of-type(2) | 匹配父元素的第二个子元素 < p> |
:only-of-type | p:only-of-type | 匹配父元素中唯一的 < p> 元素 |
:only-child | p:only-child | 匹配父元素中唯一的子元素 < p> |
:optional | input:optional | 匹配不带 "required" 属性的 < input> 元素 |
:out-of-range | input:out-of-range | 匹配值在指定范围之外的 < input> 元素 |
:read-only | input:read-only | 匹配指定了 "readonly" 属性的 < input> 元素 |
:read-write | input:read-write | 匹配不带 "readonly" 属性的 < input> 元素 |
:required | input:required | 匹配指定了 "required" 属性的 < input> 元素 |
:root | root | 匹配元素的根元素,在 HTML 中,根元素永远是 HTML |
:target | #news:target | 匹配当前活动的 #news 元素(单击包含该锚名称的 URL) |
:valid | input:valid | 匹配所有具有有效值的 < input> 元素 |
:visited | a:visited | 匹配所有已经访问过的链接 |
上表源于网络,出处忘了,若侵权联系我删,谢谢!
举个栗子:
a标签的伪元素选择器
语法:
状态:静止 悬浮 触发 完成
link hover active visited
例:a:状态{css的属性}
选择器:
<style type="text/css">
a:link{color:red }
a:hover{color:blue}
a:active{color:black}
a:visited{color:yellow}
</style>
body:
<a href="#">just dance!!!</a>
效果: just dance!!! :
鼠标不放上面不点击:红 鼠标放上面:蓝 点击时:黑 松开:黄
4、层级选择器
语法:以下称呼皆为了理解(正常:父级,子级......)
#第一级 .第二级 (第三级)选择器{css的属性;}
#fruit1 .banana1 span{color:red}
选择器:
<style type="text/css">
#fruit1 .banana1 span{color:red}
</style>
body:
<div id="fruit1">
<div class="banana1">
<span>span1</span>
</div>
<div class="apple1">
<span>span2</span>
</div>
</div>
<div id="fruit2">
<div class="banana1">
<span>span3</span>
</div>
<div class="apple1">
<span>span4</span>
</div>
</div>
效果:span1:红色
注:未经同意请勿转载,仅作学习使用。以上有描述不正确之处,望大家能不吝指出,共同学习共同进步。谢谢