基本选择器
* 通配选择器
使用了该选择器,页面上的所有元素都会包含此选择器中的样式。如:
*{background: #000; margin: 0; padding: 0;}
E元素选择器
使用标签名来选择元素,如 :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{font-size: 100px;}
</style>
</head>
<body>
<span>123</span>
</body>
</html>
#id id选择器
使用id来选择元素。 如:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box{font-size: 100px;}
</style>
</head>
<body>
<span id='box'>123</span>
</body>
</html>
.class 类选择器
使用类名来选择元素。如:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{font-size: 100px;}
</style>
</head>
<body>
<span class='box'>123</span>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box,#box,p{font-size: 100px;}
</style>
</head>
<body>
<span class='box'>1</span>
<span id='box'>2</span>
<p>3</p>
</body>
</html>
选取E元素里的F后代元素,如:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box p{font-size: 100px;}
</style>
</head>
<body>
<div id='box'>
<p>123</p>
</div>
</body>
</html>
选取E元素里的F子元素,如:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box > p{border: 1px solid red;}
</style>
</head>
<body>
<div class='box'>
<p>1</p>
<div class='pox'>
<p>2</p>
</div>
</div>
</body>
</html>
只有1被选中了,而2没被选中。说明了该选择器选择的是它的子元素,而不是后代元素。这也是它与后代选择器的区别。
E + F 相邻兄弟选择器
选取E元素后面的F元素,并且F元素是E元素的相邻节点。如 :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box + div{color: red;}
</style>
</head>
<body>
<div class='pox'>0</div>
<div class='box'>1</div>
<div class='pox'>2</div>
</body>
</html>
E ~ F 通用选择器
略
伪类选择器
伪类选择器器可以分成6种 :
动态伪类选择器、目标伪类选择器、语言伪类选择器、UI状态伪类选择器、结构伪类选择器、否定伪类选择器。
动态伪类选择器包括 :
E :link
链接还没被访问过的样式
E:visited
链接被访问过的样式
E:active
鼠标点击链接触发样式
E:hover
鼠标经过元素触发样式
E:focus
元素获得焦点时触发样式,如input输入框被激活时。
目标伪类选择器
E:target
选择匹配E元素下,正在被触发的元素。类似与JS中,给按钮加点击事件,然后用this来选取正在被触发的按钮。this与改target类似。如 :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box :target a{font-size: 50px; color: red;}
</style>
</head>
<body>
<div class='box'>
<div class='pox' id='pox1'>
<a href="#pox1">pox1</a>
</div>
<div class='pox' id='pox2'>
<a href="#pox2">pox2</a>
</div>
</div>
</body>
</html>
使用这一特性,可以制作一个手风琴的效果。如:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{margin:0px; font-size:12px; font-family: '微软雅黑';}
ul,ol,h1,h2,h3,h4,h5,h6,dl,dd,p,form{margin:0px; padding:0px;}
ul,ol{list-style-type:none;}
a{text-decoration: none; color: #fff; display: block;}
.book{width: 500px;}
.page{margin-bottom: 5px;}
.book h2{height: 35px; line-height: 35px; background: #B0B0B0; }
.book p{height: 0; overflow: auto; -webkit-transition: height 0.5s ease;}
.book :target h2,.book :hover h2{ background: #429BEC; }
.book :target p{ height: 100px; }
</style>
</head>
<body>
<div class='book'>
<div class='page' id='page1'>
<h2><a href="#page1">page1</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class='page' id='page2'>
<h2><a href="#page2">page2</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class='page' id='page3'>
<h2><a href="#page3">page3</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>