CSS样式选择器
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS样式选择器相关的知识，希望对你有一定的参考价值。
1 <!-- 2 css样式选择器 3 html选择器 4 类选择器 5 ID选择器 6 关联选择器 7 组合选择器 8 伪元素选择器 9 10 selector{ /* selector是样式选择器 11 property:value; /* color：red; 12 property:value; /* font-size:4cm; 13 ..... 14 } 15 16 selector当定义一条样式规则时，必须指定受这条样式规则作用的网页元素，在一条规则中定义的网页元素就是selector（选择器），也就是选择该样式规则作用于的网页元素。 17 18 19 20 21 --> 22 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 23 <html xmlns="http://www.w3.org/1999/xhtml"> 24 <head> 25 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 26 <title>css样式选择器</title> 27 <!--HTML选择器--> 28 <style> 29 p{ 30 color:#000000; 31 font-size:2cm; 32 } 33 </style> 34 35 <!--类选择器 36 同一个选择器能有不同的类，因而允许同一个元素有不同的样式 37 定义方法 38 [tag].类名（类名是自定义的，如果不加则代表所有HTML元素） 39 <tag class="类名1 类名2 类名3"> 40 --> 41 <style> 42 p.cl1{ 43 color:#0000CC; 44 font-size:2cm; 45 } 46 p.cl2{ 47 color:#00FF00; 48 font-size:3cm; 49 } 50 .cl3{ 51 color:#FF00FF; 52 font-size:4cm; 53 } 54 </style> 55 56 <!-- 57 ID选择器 58 在HTMl页面中，ID属性指定了某个单一元素，ID属性就是用来对单一元素定义单独样式 59 一个HTML页面中。ID属性值要唯一 60 定义方法 61 #idname{ } 62 用：<tag id="idname"> 63 64 --> 65 <style> 66 #id1{ 67 color:#0000FF; 68 font-size:2cm; 69 } 70 </style> 71 <!--关联选择器 72 关联选择器只不过是一个用空格隔开的两个或更多的单一选择器组成的字符串 73 74 必须按关联关系使用，不能有反顺序 75 76 只要能保持关联关系可以，不管是在多少层 77 78 --> 79 <style> 80 div #id1 .cl1 p{ 81 color:#0000FF; 82 font-size:2cm;} 83 </style> 84 85 <!--组合选择器 86 为了减少样式表的重复声明，组合是允许的 87 只要使用英文逗号（,）隔开每个选择符 88 89 --> 90 <style> 91 p,d,div{ 92 background-color:#0033FF; 93 } 94 </style> 95 96 <!-- 97 伪元素选择器是指对同一个HTML元素在不同的状态下的一种定义状态 98 目前只有a和p两个HTML元素可以使用 99 使用时的语法 100 标签:伪元素 101 例：a:link a标签在没有任何运作前的状态 102 a：hover 光标移动到超链接的状态 103 a:active 选择超链接的状态 104 a:visited 访问过超链接的状态 105 p:first-letter 一个段落中首个字母的状态 106 p:first-line 一个段落中首行的状态 107 108 109 --> 110 <style> 111 a.one:link{ 112 color:green; 113 font-size:1cm; 114 } 115 a.one:hover{ 116 color:red; 117 font-size:2cm; 118 } 119 a.one:active{ 120 color:blue; 121 font-size:3cm; 122 } 123 a.one:visited{ 124 color:yelow; 125 font-size:5cm; 126 } 127 128 a.two:link{ 129 color:yellow; 130 font-size:1cm; 131 } 132 a.two:hover{ 133 color:green; 134 font-size:2cm; 135 } 136 a.two:active{ 137 color:red; 138 font-size:3cm; 139 } 140 a.two:visited{ 141 color:blue; 142 font-size:5cm; 143 } 144 p:first-letter{ 145 color:red; 146 font-size:3cm; 147 } 148 p:first-line{ 149 color:yellow; 150 font-size:1cm; 151 } 152 </style> 153 </head> 154 155 <body> 156 <p> 157 1111111111111111111111111111111111111111111111111<br /> 1111111111111111111111111111111111111111111111111<br /> 158 1111111111111111111111111111111111111111111111111</p><br /> 159 <b class="cl1">aaaaaaaaaa</b><br /> 160 <b class="cl2">bbbbbbbbbb</b><br /> 161 <b class="cl3">cccccccccc</b><br /> 162 <b class="cl1">dddddddddd</b><br /> 163 <b class="cl2">eeeeeeeeee</b><br /> 164 <b class="cl3">hhhhhhhhhhhhhh</b><br /> 165 <b id="id1">ddddddddddddddd</b><br /> 166 <div> 167 <div id="id1"> 168 <div class="cl1"> 169 <p>wwwwwwwwwwww</p> 170 </div> 171 </div> 172 </div> 173 <a class="one" href="../1/11.html">1.html</a><br /> 174 <a class="two" href="../2/21.html">2.html</a> 175 </body> 176 </html>
以上是关于CSS样式选择器的主要内容，如果未能解决你的问题，请参考以下文章