1、常用的css选择器
|
选择器名称（8种） |
示例 |
注意 |
|
1、html选择器 |
<p>日照香炉生紫烟，遥看瀑布挂前川。</p>
p{font-size:30px;} |
|
|
2、类选择器class |
<input name="userName" type="text" class="txt"/>
.txt{border-color:black;} |
以.开头 |
|
3、id选择器 |
<font id="day9">九天</font>
#day9{color:#00CED1;font-size:40px;} |
id唯一 |
|
4、群组联合选择器 |
h1,h3,p,h4{text-align:center;} |
以,分隔 |
|
5、上下文选择器 |
<td id="age16">16</td>
table tr #age16{color:black; 10px;height:20px;} |
table tr #age之间以空格隔开 |
|
6、伪元素选择器 |
<h1 id="holiday">假期通知</h1>
#holiday:first-letter{color:white;font-size:50px;} |
以:分隔 |
|
7、伪类选择器 |
<a href="#1" id="mya">这是一个假链接</a>
#mya:link{color:black;} |
以:分隔 |
|
8、通配符选择器* |
*{margin:0px;padding:0px;} |
|
2、css代码位置（3个）
1）style标记
在head标记中引入：
2）内联样式：
3）外部样式文件：
3、选择器优先级
伪元素选择器 > 内联样式 > ID选择器 > 伪类选择器 > 类选择器 > 上下文选择器 > html选择器 > 通配符选择器
群组选择器不能做比较，因为群组选择器实际上是一种简写。