HTML(四)

选择器
1.核心选择器
标签选择器
div{}
id选择器
#one{}
class选择器
.second
逗号选择器
div,#id-name{}
组合选择器
div#one{}
普通选择器
* 一般不适用

(宽度加给父元素,高度加给子元素)			

2.层次选择器
	子元素选择器
		.nav>ul>li>{}
	后代选择器
		.nav li{}
	下一个兄弟选择器
		products> li.ios~*{}
	之后所有兄弟选择器
		.products > li.ios ~ *{}
3.属性选择器
	与状态相关
		selector[]
			input[type=text]
			input[type^=t]  以t开头
			input[type$=t]	以t结尾
			input[type*=t]	包含t的
	与子元素相关


 4.伪类选择器
    与状态相关
        :link  a标签还未被访问
        :hover  光标悬浮到元素上
        :active  a标签激活
        :visited  a标签访问过

    与子元素相关
        :first-child  子元素的第一个
        :last-child  子元素的最后一个
        :nth-child(v)  子元素中指定一个,隔行变色
            v  为数字,公式(2n、2n+1...)、关键字(Odd、even(匹配下标是奇数、偶数的子元素)
        :first-of-type  子元素每一种种类的第一个
        :last-of-type  子元素每一种种类的最后一个
        :nth-of-type(v) 子元素指定一种种类
           v  为数字,公式(2n、2n+1...)、关键字(Odd、even(匹配下标是奇数、偶数的子元素)
5.伪元素
	::after
	::before
	副作用:在dom节点中产生一个新节点

position:relative
position:absolute
posted @ 2019-08-01 19:19  llh哩哩哩  阅读(182)  评论(1)    收藏  举报