1、css盒模型选择器简明参考
2、属性简明参考–边框和背景
3、属性简明参考–盒模型属性
4、属性简明参考–布局属性
5、属性简明参考–文本属性
6、属性简明参考–过渡、动画和变换属性
7、属性简明参考–其他属性
8、CSS基本选择器–*通用选择器
*{
margin:0;
padding:0;
}
9、类型(标签)选择器
<style type="text/css">
a{color: red;}
</style>
10、类选择器
<style type="text/css">
.myclass{color: red;}
</style>
同时匹配两个类
<head>
<style type="text/css">
.class1{ color: red;}
.class2{ font-weight: bold;}
</style>
</head>
<body>
<div class="class1 class2">here is two kind of class </div>
</body>
标签+类
<head>
<style type="text/css">
.class1{ color: red;}
.class2{ font-weight: bold;}
span.class3{color: blue;font-size: 3em; font-weight: bold;}
</style>
</head>
<body>
<div class="class1 class2">here is two kind of class </div>
<div><span class="class3">here is span class</span></div>
</body>
11、ID选择器
<style type="text/css">
#myid{color: red;}
</style>
12、属性选择器
<head>
<style type="text/css">
[href]{color:red; font-weight: bold;}
</style>
</head>
<body>
<div ><a href="#">hello</a></div>
<div ><a >world</a></div>
</body>
<head>
<style type="text/css">
[href="#"]{color:blue; font-weight: bold;}
[href^="hello"]{color:red; font-weight: bold;}
[href$="world"]{color:green; font-weight: bold;}
[href*="my"]{color:pink; font-weight: bold;}
</style>
</head>
<body>
<div ><a href="#">hello</a></div>
<div ><a href="helloworldhello" >world</a></div>
<div ><a href="helloworld" >world</a></div>
<div ><a href="hemywo" >world</a></div>
</body>
13、逗号并集选择器
<head>
<style type="text/css">
.myclass1,.myclass2{color: red;}
</style>
</head>
<body>
<div class="myclass1">myclass1</div>
<div class="myclass2">myclass2</div>
</body>
14、后代选择器(空格)
匹配所有的后代
<head>
<style type="text/css">
div span{color: red;}
</style>
</head>
<body>
<div><span>span1</span><span>span2</span><span>span3</span></div>
</body>
匹配所有后代,即便包含后代
<head>
<style type="text/css">
div span{color: red;}
</style>
</head>
<body>
<div><p><span>myspan</span></p><span>myspan</span</div>
</body>
15、子代选择器(>大于号)
选择直接后代(儿子),但不选择孙子元素
<head>
<style type="text/css">
div>span{color: red;}
</style>
</head>
<body>
<div><p><span>myspan</span></p><span>myspan</span</div>
</body>
16、兄弟选择器(+号)
紧跟着自己的选择器,隔着的不算兄弟
<head>
<style type="text/css">
.mycla1+div{color: red; font-weight: bold;}
</style>
</head>
<body>
<div class="mycla1">myclass1</div>
<div >myclass2</div>
<div >myclass3</div>
</body>
16、普通兄弟选择器(~号)
所有是兄弟,但不一定是直接兄弟的选择器
<head>
<style type="text/css">
.mycla1~div{color: red; font-weight: bold;}
</style>
</head>
<body>
<div class="mycla1">myclass1</div>
<div >myclass2</div>
<div >myclass3</div>
<p>hello world</p>
<div>myclass4</div>
</body>
17、::first-line伪选择器
首行设置,注意是以br标签作为换行
<head>
<style type="text/css">
::first-line{color: red;}
</style>
</head>
<body>
<p>here is first line<br/>here is seconde line<br/>here is third line</p>
</body>
18、::first-letter伪选择器
<head>
<style type="text/css">
::first-letter{color: red;}
</style>
</head>
<body>
<p>here is first line<br/>here is seconde line<br/>here is third line</p>
</body>
19、:before,:after 选择器
<head>
<style type="text/css">
.myclass{color: red;}
.myclass:before{content:"insert befor"}
.myclass:after{content:"insert after"}
</style>
</head>
<body>
<div class="myclass">myclass</div>
</body>