css选择器

215 阅读2分钟

css选择器 1)类型选择符(标签选择符) ​ 能选中左右同名标签 2) id选择器 ​ 用法: 用来划分网页外围结构 ​ 语法: <标签 id=“名称”> </标签> ​ #名称{ 属性:属性值} 3)类选择器(class选择器) ​ 语法:<标签 class="名称"> </标签> ​ .名称{ 属性:属性值} 4)群组选择器 ​ 当有多个选择符应用相同的样式时,可以将选择符用“,”分隔的方式,合并为一组。 ​ 语法:选择符1,选择符2, 选择符3{属性:属性值;} ​ 实例:.top, #nav, p{width:100px;} 5)包含选择符 ​ 选择符1和选择符2用空格隔开,含义就是选择符1中包含的所有选择符2; ​ 语法:选择符父级 选择符子级{属性:属性值;} ​ 实例: div ul li{height:200px;} 6)伪类选择符

	    a:link         未访问的链接状态
		a:visited      已访问的链接状态
		a:hover        鼠标滑过链接的状态
		a:active       鼠标按下的状态

7)通配符 ​ 通配选择符的写法是“”,其含义就是所有标签; 表示该样式适用所有网页元素; * ​ 语法:{属性:属性值;}* ​ 例:*{margin:0;padding:0;}

     起名规范:尽量小写字母开头
             不能出现中文及特殊字符
	 使用字母,数字,下划线,连字符
	 不能出现关键字

选择符的权重 ​ 内联样式(1000)>id选择器(100)>class选择器/伪类(10)>标签(1)>*(0) 群组选择器的权重是他本身 如果权重相同时,后写的会覆盖掉之前的

css层叠性
css层叠指的是样式的优先级,当产生冲突时以优先级高的为准。
    1,important最先执行
    2,内联样式>内部/外部
     内部样式和外部样式:看书写顺序,写在后面的会覆盖掉前面的
    3,看选择器的权重 4,开发者模式>用户模式>浏览器模式 5,当权重相同时,后写的样式会覆盖掉前面的