CSS-选择器

初识CSS

一.概述

css指层叠样式表(Cascading Style Sheets)

• 写在标签里 style 内联样式表
• 写在头部标签里 内部样式
• 写在一个单独的css文件 外部样式

-------内联样式表--------	
		<h1 color="red" styple="background-	color:red;"></h1>
-------内部样式----------	
		<style type="text/css">
        	h1{
            	background-color:red;
        	} 
		</style>
--------外部样式----------
html<link rel="stylesheet" herf="./xx.css">
	
css	@import url('./xx.css')

层叠：同一元素用多种样式，写不同的属性层叠

冲突：同一元素用多种样式，写相同的属性冲突(就近原则)

继承：在子父关系中，文本样式可以继承，布局样式不能被继承(块级元素可以继承宽),

注意：

1. html 属性和属性值用=拼接
2. css 属性和属性值用: 拼接
   补充：

颜色color:

1. 英文字母
2. 十六进制
3. RGB (0_255，0255，0~255)
4. RGBA (0_255，0255，0_255，01)

css样式表优先级：

• 就近原则
  相同样式优先级：
  当设置相同样式时，后面的优先级较高。
  但不建议重复设置样式的情况。
• 内部与外部样式
  内部样式与外部样式优先级相同，如果相同样式，那后写的样式优先级高
• 单一样式优先级
  style行间>id>class>tag>*>继承

二.选择器

标签选择器

标签{属性:值;属性:值;}

全局选择器

*{属性:值;属性:值;}

class选择器

在标签里加class属性,值可以多个相同

.class{属性:值;属性:值;}

id选择器

ID属性不要以数字开头

在标签里加id属性,值是独一无二的

#id{属性:值;属性:值;}

群组选择器

用逗号隔开

标签,标签{属性:值;属性:值;}

层次选择器

父子关系必须是父包含子

• 子代选择器

  • ol > li{属性:值;属性:值;}

• 后代选择器

  • ol li{属性:值;属性:值;}

• 相邻选择器

  • ol+a{属性:值;属性:值;}相邻向下

• 通用兄弟选择器

  • ol>li~a{属性:值;属性:值;}同级向下

伪类选择器

a标签使用

1. ui伪类

:link默认

:visited访问后

:hover鼠标悬浮

:active鼠标按下

2. 结构伪类

:nth-child(第几个)