标签:style blog color strong ar div html log line
<!DOCTYPE html> <html> <head> <style> div > p { width: 100px; height: 50px; line-height: 50px; border-bottom: 1px solid #000; } </style> </head> <body> <div> <p>1</p> <a><p>2</p></a> </div> </body> </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 div + p { 6 width: 100px; 7 height: 50px; 8 line-height: 50px; 9 border-bottom: 1px solid #000; 10 } 11 </style> 12 </head> 13 14 <body> 15 16 <p>1</p><!-- 失败 --> 17 <div></div> 18 <p>2</p><!-- 成功 --> 19 <p>3</p><!-- 失败 --> 20 <a><p>4</p></a><!-- 失败 --> 21 22 </body> 23 </html>
CSS [attribute] 选择器
定义p中有class标签的样式
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 p[class]{ 6 border-bottom: 1px solid #000; 7 } 8 </style> 9 </head> 10 11 <body> 12 13 <p class="class1">1</p><!-- 失败 --> 14 <p>2</p><!-- 成功 --> 15 <p class="class3">3</p><!-- 失败 --> 16 17 </body> 18 </html>
CSS [attribute=value] 选择器
定义了p中class等于class1的元素样式
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 p[class="class1"]{ 6 border-bottom: 1px solid #000; 7 } 8 </style> 9 </head> 10 11 <body> 12 13 <p class="class1">1</p><!-- 成功 --> 14 <p>2</p><!-- 失败 --> 15 <p class="class3">3</p><!-- 失败 --> 16 17 </body> 18 </html>
CSS [attribute~=value] 选择器
定义了p中class包含class1的元素样式
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 p[class~=class1]{ 6 border-bottom: 1px solid #000; 7 } 8 </style> 9 </head> 10 <body> 11 12 <p class="class1">1</p><!-- 成功 --> 13 <p class="class3">2</p><!-- 失败 --> 14 <p class="class1 class3">3</p><!-- 成功--> 15 16 </body> 17 </html>
CSS [attribute|=value] 选择器
定义了p中class以cla1开头(cla11不是,但cla1-1就是) 的元素样式
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 p[class|=cla1]{ 6 border-bottom: 1px solid #000; 7 } 8 </style> 9 </head> 10 <body> 11 12 <p class="cla1">1</p><!-- 成功 --> 13 <p class="cla11">2</p><!-- 失败 --> 14 <p class="cla1-1">3</p><!-- 成功 --> 15 16 </body> 17 </html>
CSS3 element1~element2 选择器
定义div同一层级,并且在div下面的所有p元素的样式
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 div~p{ 6 border-bottom: 1px solid #000; 7 } 8 </style> 9 </head> 10 <body> 11 <div></div> 12 <p>1</p><!-- 成功 --> 13 <a><p>2</p></a><!-- 失败 --> 14 <p>3</p><!-- 成功 --> 15 </body> 16 </html>
CSS3 [attribute^=value] 选择器
定义p中class已cla1开头的元素样式(与CSS [attribute|=value] 不同)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 p[class^="cla1"]{ 6 border-bottom: 1px solid #000; 7 } 8 </style> 9 </head> 10 <body> 11 <p class="cla1">1</p><!-- 成功 --> 12 <p class="cla11">2</p><!-- 成功 --> 13 <p class="cla1-1">3</p><!-- 成功 --> 14 <p class="cla21">4</p><!-- 失败 --> 15 </body> 16 </html>
CSS3 [attribute$=value] 选择器
定义和CSS3 [attribute^=value] 一样,只不过是定义的结尾的元素
CSS3 [attribute*=value] 选择器
定义和CSS3 [attribute^=value] 一样,只不过是定义的包含value的元素
CSS3 :nth-child() 选择器
定义html中第2个p元素的样式。
odd【p:nth-child(odd)】奇数行 和 even【p:nth-child(even)】偶数行 是可用于匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是 1)。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 p:nth-child(2){ 6 border-bottom: 1px solid #000; 7 } 8 </style> 9 </head> 10 <body> 11 <p>1</p><!-- 失败 --> 12 <p>2</p><!-- 成功 --> 13 <p>3</p><!-- 失败 --> 14 <p>4</p><!-- 失败 --> 15 </body> 16 </html>
CSS3 :nth-last-child() 选择器
同上,只不过跟最后一个开始选择。
CSS :first-child 选择器
第一个元素的样式
CSS :last-child 选择器
最后一个元素的样式
CSS3 :root 选择器
选择文档的根元素。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 :root{ 6 background-color: #000; 7 } 8 </style> 9 </head> 10 <body> 11 </body> 12 </html>
CSS3 :disabled 选择器
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 input[type="text"]:disabled 6 { 7 background-color: #dddddd; 8 } 9 </style> 10 </head> 11 <body> 12 <input type="text" value="1" disabled /><!-- 成功 --> 13 <input value="2" disabled /><!-- 成功 --> 14 <input type="text" value="3" /><!-- 失败 --> 15 <input type="text" value="4" /><!-- 失败 --> 16 <input type="password" value="5" /><!-- 失败 --> 17 </body> 18 </html>
CSS3 :not 选择器
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 p { 6 color:#000000; 7 } 8 :not(p) 9 { 10 color:#ff0000; 11 } 12 </style> 13 </head> 14 <body> 15 <h1>1</h1><!-- 成功 --> 16 <p>2</p><!-- 失败 --> 17 <p>3</p><!-- 失败 --> 18 <div>4</div><!-- 成功 --> 19 </body> 20 </html>
标签:style blog color strong ar div html log line
原文地址:http://www.cnblogs.com/johnnylion/p/3935700.html