03 css选择器

7种选择器

　　

/* 1.标签选择器 */
			ul{
				background-color: #0000FF;
			}
			/* 2.id选择器 */
			#u{
				background-color: red;
			}
			/* 3.类选择器：标签之间共有的特性可以使用它 */
			.test{
				background-color: pink;
			}
			/* 4.组合选择器：选择器间共有的特性使用它 */
			.test,#u{
				font-size:20px;
			}
			/* 5.全部选择器 */
			*{
			color: darkgreen;	
			}
			/* 6.子标签选择器：注意不能选孙标签:如下只作用到#u下面的li标签，并没有作用到a标签 */
			#u{
				color: white;
			}
			/* 7.属性选择器：指定含有某属性且属性值为指定值的标签*/
			a[href="#"]{
				color:pink;
			}
			/* 8.伪类选择器：标签：指令*/
			li a:hover{
				color: orangered;
			}

　　其中伪类选择器请参考：https://www.runoob.com/css/css-pseudo-classes.html

选择器的优先级

1. 内联样式的优先级是 1000；
2. id选择器的优先级是 100；
3. 类和伪类选择器的优先级是 10；
4. 元素选择器的优先级是 1；
5. 通配*选择器的优先级是 0；
6. 继承的样式选择器 -1；

写css的套路

1.声明css代码域

2.使用选择器选择要添加样式的标签

根据需求来：

• 使用全部选择器给整个页面添加样式
• 使用类选择器给不同的标签添加样式
• 使用标签选择器给某类标签添加样式
• 使用id选择、属性选择器等其它选择器添加样式

3.书写样式单

3.1边框设置

border:solid red 1px;

　　

3.2字体设置

font-size:10px;
font-family:"黑体";
font-weight:bold;

　　

3.3字体颜色设置

color:red;

　　

3.4背景颜色设置

background-color:red;

　　

3.5背景图片设置

background-img:url;

　　

3.6宽高设置

3.7浮动设置

float:left/right;

　　

3.8行高（行间距）设置

line-height:10px;