css属性和部分选择符
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>
