1.1像素细边框的表格
效果：
<style type="text/css">
#test{
border-collapse: collapse;border:1px solid #ddd;
}
/*#test th,#test td{
border: 10px solid #ddd;
}*/
</style>
2.css奇数偶数样式
效果：
<style type="text/css">
/*奇数*/
.ul2 li:nth-child(odd){background-color:#ccc;}
.ul2 li:nth-child(2n+1){border-left:2px solid red;}
/* 偶数 */
.ul2 li:nth-child(even){background-color:#0F7CCF;}
.ul2 li:nth-child(2n){border-left:2px solid black;}
/* 3的倍数 */
.ul2 li:nth-child(3n){color:red;font-weight:bold;}
</style>
3.Eplaceholder属性
效果：
<style>
input::-webkit-input-placeholder {
color: green;
}
input:-ms-input-placeholder {
// IE10+
color: green;
}
input:-moz-placeholder {
// Firefox4-18
color: green;
}
input::-moz-placeholder {
// Firefox19+
color: green;
}
</style>
4.Eselection属性
效果：
<style>
p::-moz-selection {
background: #000;
color: #f00;
}
p::selection {
background: #000;
color: #f00;
}
</style>
5.first-child 与first-of-type的区别
效果：
<style type="text/css">
/* a:first-child是.test下的第一个结构标签，而且是a标签，不是则不起效果 */
.test a:first-child {
color: red;
}
/* a:first-of-type不需要是第一个子元素只需要.test下的a标签的第一个即可 */
.test a:first-of-type {
font-size: 55px;
}
</style>
6.textDecorationLine属性
效果：
<style>
.test li {
margin-top: 10px;
list-style: none;;
}
.test .none {
text-decoration: none;
}
.test .underline {
text-decoration: underline;
}
.test .overline {
text-decoration: overline;
}
.test .line-through {
text-decoration: line-through;
}
.test .blink {
text-decoration: blink;
}
.test .text-decoration-css3 {
-webkit-text-decoration: #f00 wavy underline;
-moz-text-decoration: #f00 solid underline;
text-decoration: #f00 solid underline;
}
</style>
7.text-shadow属性
效果：
<style>
.po {
text-shadow: 5px 3px 5px #00f;
font-weight: bold;
font-family: cursive;
font-size: 19px;
color: gold;
}
.test li {
margin-top: 10px;
}
.test .mormal p {
text-shadow: 1px 1px rgba(0, 0, 0, .3);
}
.test .blur p {
text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
}
.test .group p {
text-shadow: 1px 1px 0 rgba(255, 255, 255, 1), 1px 1px 2px rgba(0, 85, 0, .8);
}
</style>
8.关系选择符
效果：
<style type="text/css"> /*选中后样式改变*/
input[name="love[]"]:checked+label{color:blue;background-color:red;}
</style>
</head>
<body>
<input type="checkbox" name="love[]" id="book" value="book">
<label for="book">书</label><br>
<input type="checkbox" name="love[]" id="music" value="music">
<label for="music">音乐</label><br>
<input type="checkbox" name="love[]" id="movie" value="movie">
<label for=“movie”>电影</label><br>
</body>
9.属性选择符
效果：
<style type="text/css">
/*.columnNews{
color: red;
}
.columnAboutUs{
color: red
}
.columnVideo{
color: red;
}*/
a[class^=column]{
color: red;
}
a[href=.doc]{
color: blue;
}
a[title*=box]{
color: green;
}
</style>
10.div内外边距和其他属性
效果;
<style type="text/css">
#pp{
width: 100px;
height: 100px;
clear: both;
background-color: blueviolet;
border: 20px solid gold;
/*margin-bottom: 20px;
margin-left: 200px;
margin-right: ;
margin-top:500px ;*/
margin:50px,30px,20px,20px;
padding-top:5px ;
padding-left: 10px;
padding-right: 10px;
padding-bottom:20px ; /*缩写 上右下左*/
border-top-width: 100px;
}
</style>
<style type="text/css">
#pp {
width: 300px;
height: 300px;
border-left: 10px solid #009100;
border-top: 10px double #0000c6;
border-right: 10px dotted #f9f900;
border-bottom: 10px dashed #ff0000;
}
</style>
11.属性选择符
<style type="text/css">
input[name="search"]{
border-color: red;
}
input[name^=love]{
width: 200px;
height: 50px;
border-color: red;
}
</style>
12.字体颜色属性
效果：
<style>
#pp{
width: 100px;
height: 100px;
background-color: rgba(250,55,250,.3);
}
.colorname p{color:green;}
.hex p{color:#ff0000;}
.rgb p{color:rgb(0,0,0);}
.rgba p{color:rgba(0,0,0,.5);}
.hsl p{color:hsl(240,50%,50%);}
.hsla p{color:hsla(240,50%,50%,.5);}
.transparent p{color:transparent;}
</style>
13.伪对象选择符
效果：
<style> /*设置对象内第一个字符的样式*/
h1 {
font-size: 30spx;
}
p {
width: 200px;
padding: 5px 10px;
border: 1px solid #ddd;
font: 14px/1.5 simsun, serif, sans-serif;
}
p:first-letter {
float: left;
font-size: 40px;
font-weight: bold;
line-height: 1;
}
p::first-letter {
float: left;
font-size: 40px;
font-weight: bold;
line-height: 1;
}
</style>
<style>
h1 {
font-size: 16px;
}
p {
width: 200px;
padding: 5px 10px;
border: 1px solid #ddd;
font: 14px/1.5 simsun, serif, sans-serif;
}
p:first-line {
color: #090;
}
p::first-line {
color: #090;
}
</style>
时间： 2024-12-21 01:55:24