CSS3-使用CSS选择器
<!-- 选择所有元素 -->
<!-- * -->
<style type = "text/css">
*{
border: thin black solid;
padding: 4px;
}
</style>
<!-- 根据类型选择元素 -->
<!-- <元素类型> -->
<style type = "text/css">
a,th{
border: thin black solid;
padding: 4px;
}
</style>
<!--根据类选择元素 -->
<!-- .<类名> 或 <元素类型>.类名 -->
<style type = "text/css">
.class2 span.class1{
border: thin black solid;
padding: 4px;
}
</style>
<!-- 选择多个类 span.class1.class2 -->
<!-- 使用ID选择元素 -->
<!-- #<ID值> -->
<style type = "text/css">
#id{
border: thin black solid;
padding: 4px;
}
</style>
<!-- 根据属性选择元素 -->
<!-- [属性] 或 <元素类型>[属性] -->
<style type = "text/css">
[href]{
border: thin black solid;
padding: 4px;
}
</style>
<!-- 可为属性限定条件: css版本 -->
<!-- [属性] 2 -->
<!-- [属性="a"] 属性值为a 2 -->
<!-- [属性^="a"] 属性值以a开头 3 -->
<!-- [属性$="a"] 属性值以a结尾 3 -->
<!-- [属性*="a"] 属性值含有a 3 -->
<!-- [属性~="a"] 属性值其一个为a元素 2 -->
<!-- [属性|="a"] 属性为连字符分割,其一a 2 -->
<!-- 并集选择器 -->
<style type = "text/css">
a , [lang|="en"]{
border: thin black solid;
padding: 4px;
}
</style>
<!-- 后代选择器 -->
<!-- 选择所有后代 -->
<style type = "text/css">
p span{
border: thin black solid;
padding: 4px;
}
</style>
<style type = "text/css">
#id td{
border: thin black solid;
padding: 4px;
}
</style>
<!-- 选择子元素 -->
<!-- 选择直接子代 -->
<style type = "text/css">
body > * > span , tr > th{
border: thin black solid;
padding: 4px;
}
</style>
<!-- 选择兄弟元素 -->
<!-- 选择紧跟在其后的元素 -->
<style type = "text/css">
p + a{
border: thin black solid;
padding: 4px;
}
</style>
<!-- 选择指定元素之后的元素 -->
<style type = "text/css">
p ~ a {
border: thin black solid;
padding: 4px;
}
</style>
<!-- 使用伪元素选择器 -->
<!-- 使用 ::first-line 选择器,选择文本块的首行 -->
<style type = "text/css">
::first-line {
background: grey;
color: white;
}
</style>
<style type = "text/css">
p::first-line{
border: thin black solid;
padding: 4px;
}
</style>
<!-- 使用 ::first-letter 选择器 -->
<style type = "text/css">
::first-letter{
border: thin black solid;
padding: 4px;
}
</style>
<!--使用 :before 和 :after 选择器 -->
<!-- :before 在选中元素的内容之前插入内容 -->
<!-- :after 在选中元素的内容之后插入内容 -->
<style type = "text/css">
a:before{
content: "插入的内容";
}
a:after {
content: "插入的内容";
}
</style>
<!-- 使用CSS计数器 -->
<!-- :before 和 :after 经常和CSS计数器一起使用 -->
<style type = "text/css">
body {
counter-reset: countername;
}
p:before {
content: counter(countername)".";
counter-increment: countername;
}
</style>
<!-- counter-reset: 为计数器设置名称和初始值; -->
<!-- 例如: counter-reset: countername1 1 countername2 2; -->
<!-- 使用counter(countername)使用计数器; -->
<!-- 可改变数值格式: counter(countername, lower-alpha); -->
<!-- counter-increment: 设置计数器增量; -->
<!-- 例如 counter-increment: countername 2; -->