css选择器
1. 基本选择器
1.1 标签选择器
<p> 标签选择器 </p> <style> p{ color:red; } </style>
1.2 class选择器
<p class="classSelector"> 标签选择器 </p> <style> .classSelector{ color:red; } </style>
1.3 ID选择器
<p id="classSelector"> 标签选择器 </p> <style> #classSelector{ color:red; } </style>
总结:标签选择器用于全局标签样式修改
class选择器可以局部修改特定元素样式,并且可以重复使用
ID选择器可以修改特定元素样式,但是ID全局唯一不可以重复使用
2. 属性选择器
2.1 绝对等于=
<p id="items classSelector tst"> 标签选择器 </p> <style> p[id="items classSelector tst"]{ color:red; } </style>
2.2 包含某个元素*=
<p id="items classSelector tst"> 标签选择器 </p> <style> p[id*="classSelector"]{ color:red; } </style>
2.3 以某个元素开头^=
<p id="items classSelector tst"> 标签选择器 </p> <style> p[id^="items"]{ color:red; } </style>
2.4 以某个元素结尾$=
<p id="items classSelector tst"> 标签选择器 </p> <style> p[id$="items"]{ color:tst; } </style>
3.层次选择器
3.1 后代迭代选择器 body p{color:red;}
<style> body p { color: red; } </style> <body> <div> <p> 生效 <p>生效</p> </p> </div> <p> 生效 </p> </body>
在某个元素后面,祖爷爷=》爷爷=>父亲=》儿子=》孙子都生效
3.2 子选择器 body>p {color: red;}
<style> body>p { color: red; } </style> <body> <div> <p> 生效 <p>生效</p> </p> </div> <p> 生效 <div><p>不生效</p></div> </p> <p>生效<p>生效</p></p> </body>
一代,儿子。也就是在body之后的直接的子标签都是可以生效的,但是如果中间隔了其他类型的元素就不会生效
3.3 相邻兄弟选择器 h1 + p {margin-top:50px;}
<body> <style type="text/css"> h1 + p {margin-top:50px;} </style> <h1>This is a h1.</h1> <p>This is 生效.</p> <p>This is 不生效.</p> <p>This is 不生效.</p> <p>This is 不生效.</p> <p>This is 不生效.</p> </body>
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器
3.4 通用选择器 h1 ~ p {margin-top:50px;}
<body> <style type="text/css"> h1 + p {margin-top:50px;} </style> <h1>This is a h1.</h1> <p>This is 生效.</p> <p>This is 生效.</p> <p>This is 生效.</p> <p>This is 生效.</p> <p>This is 生效.</p> </body>
当前选中元素的向下的所有兄弟元素
4. 结构伪类选择器
4.1 本例演示如何向文档中的超链接添加不同的颜色。
<html> <head> <style type="text/css"> a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF} </style> </head> <body> <p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p> <p><b>注释:</b>在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后,这样才能生效!</p> <p><b>注释:</b>在 CSS 定义中,a:active 必须位于 a:hover 之后,这样才能生效!</p> </body> </html>
4.2 本例演示如何向超链接添加其他样式。
<html> <head> <style type="text/css"> a.one:link {color: #ff0000} a.one:visited {color: #0000ff} a.one:hover {color: #ffcc00} a.two:link {color: #ff0000} a.two:visited {color: #0000ff} a.two:hover {font-size: 150%} a.three:link {color: #ff0000} a.three:visited {color: #0000ff} a.three:hover {background: #66ff66} a.four:link {color: #ff0000} a.four:visited {color: #0000ff} a.four:hover {font-family: monospace} a.five:link {color: #ff0000; text-decoration: none} a.five:visited {color: #0000ff; text-decoration: none} a.five:hover {text-decoration: underline} </style> </head> <body> <p>请把鼠标移动到这些链接上,以查看效果:</p> <p><b><a class="one" href="/index.html" target="_blank">这个链接改变颜色</a></b></p> <p><b><a class="two" href="/index.html" target="_blank">这个链接改变字体大小</a></b></p> <p><b><a class="three" href="/index.html" target="_blank">这个链接改变背景颜色</a></b></p> <p><b><a class="four" href="/index.html" target="_blank">这个链接改变字体系列</a></b></p> <p><b><a class="five" href="/index.html" target="_blank">这个链接改变文本装饰</a></b></p> </body> </html>
4.3 本例演示如何对超链接应用 :focus 伪类(无法在 IE 中工作)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> input:focus { background-color:yellow; } </style> </head> <body> <form action="form_action.asp" method="get"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> <input type="submit" value="Submit" /> </form> <p><b>注释:</b>如果已规定 !DOCTYPE,那么 Internet Explorer 8 (以及更高版本)支持 :focus 伪类。</p> </body> </html>
4.4 本例演示 :first-child 伪类的用法
<html> <head> <style type="text/css"> p:first-child {font-weight: bold;} li:first-child {text-transform:uppercase;} </style> </head> <body> <div> <p>These are the necessary steps:</p> <ul> <li>Intert Key</li> <li>Turn key <strong>clockwise</strong></li> <li>Push accelerator</li> </ul> <p>Do <em>not</em> push the brake at the same time as the accelerator.</p> </div> <p><b>注释:</b>必须声明 DOCTYPE,这样 :first-child 才能在 IE 中生效。</p> </body> </html>
4.5 伪元素
p:first-letter { color:#ff0000; font-size:xx-large; } p:first-line { color:#0000ff; font-variant:small-caps; } p:first-letter { color:#ff0000; font-size:xx-large; } p:first-line { color:#0000ff; font-variant:small-caps; } h1:after { content:url(logo.gif); }