H5全栈_选择器

CSS

介绍

css：层叠样式表
用于修饰html结构
层叠：多个样式修饰一个结构；子元素可以从父元素那里继承样式；优先级
样式表：相关样式在一起定义（封装）

css优先级：
行内 > 外部引入 = 内嵌式
1.! important 最高
2.若选择器权重相同，则就近
3.行内：1000
id选择器: 100
类选择器,属性选择器,伪类选择器：10
标签选择器,伪元素选择器：1
不会越级选择

语法

注释：/* */
规则：{k:v;k:v;}

定义样式的方法：

1、可定义在style属性中
缺：样式与结构冗余
优：优先级比较高
2、定义在head标签的style中
缺：样式复用率较低
优：结构与样式分离

	
	
	



	
111
	
222

3、定义在css文件中
优：样式复用率高，样式与结构分离

	
	
	
	/*调用2.2css.css文件*/


	
	
你好，css
	
你好，html
	
你好，js

在2.2css.css 内

div{
	width:200px;
	height:200px;
	border-radius:50%;
	background:pink;
 	color:#ffffff;
	text-align:center;
}
div#two{
	line-height: 200px;
}

选择器

1、核心选择器

1、标签选择器：h2{规则} div{规则}

2、id选择器：

3、类选择器：

4、逗号选择器：
同时选中h1、h2、h3

5、组合选择器：
a、并集选择器：p.one{}
b、交集选择器：.one,.two{}

	
1
  	
2
  	
3

设置了2的样式

	
1
  	
2
  	
3

全部都设置了
6、普遍选择器;表示选中所有元素

2、层次选择器

1、子代选择器：> 只选中元素后一级子元素

2、后代元素选择器：空格隔开 内部所有元素都可以选中

3、兄弟选择器：~* .two后所有元素

.two~*{
	text-decoration: underline red;
}

4、相邻同胞选择器：+* .two的下一个元素

.two~*{
	text-decoration: underline red;
}

3、属性选择器

用于筛选表单
在已有选择器的基础上进行筛选.
selector[type=‘text’]
[type$=t] 有type属性，并且值以t结尾
[type^=t]有type属性，并且值以t开头
[type*=t] 有type属性，并且值中含有t
[class~=two] class中包含类名two的

4、伪类选择器

a、对结构
ul>li:first-child：ul里第一个为li的孩子
only-child:匹配父元素中只有一个子元素的元素
ul>li:last-child：ul里最后一个为li的孩子
ul>li:nth-child(odd)：括号可加数字、表达式（2n+1）、odd（奇数）、even（所有偶数）
nth-last-type
first/last-of-type：可以选择第一个该类型的元素，无论其是不是父元素的第一个子元素
b、对状态
仅a标签可用
:link 初始状态
a:link{color:green}
:active 激活状态：按上去时的状态
:checked 用于选择匹配所有被选中的单选按钮(radio)或复选框(checkbox)
:visited 已访问过的链接颜色
:focus 获取焦点
所有标签都可以用
:hover 光标放上去的效果

	
	



	淘宝

伪元素选择器

a、产生元素（常与float连用）
::after在各元素后加一个支撑元素
::before在各元素前加一个支撑元素
b、选择器
::first-letter
::first-line
::selection 鼠标选择后的颜色

ul.nav::after {
			content:"four";
			display:block;	
			...
	}

	

			
one
			
two
			
three
			/*::after */