CSS选择器简介
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; width: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选择器 > 通配符选择器
群组选择器不能做比较,因为群组选择器实际上是一种简写。