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选择器 > 通配符选择器

群组选择器不能做比较，因为群组选择器实际上是一种简写。

转载于:https://www.cnblogs.com/1810-zx/p/8549376.html