css面試題(自看)

css 選擇符~>+ 

> 是選擇當前元素下第一層元素

+ 兄弟選擇符:選擇當前節點下的第一個兄弟節點

~兄弟選擇符:選擇當前節點下的所有兄弟節點

 如圖:

<html>
	<head>
		<title></title>
	</head>
	<meta charset="UTF-8"/>
	<style>
		body{margin: 30px;}
		.name>section{background: yellow;height: 200px;;}
		section+span{background: deepskyblue;}
		span~p{background: deepskyblue;}
	</style>
	<body>
		<div class="name">
			<section>
				<div>
					<section>section最內元素</section>
				</div>
			</section>
			<span>section的兄弟span</span>
			<span>section的兄弟span</span>
			<span>section的兄弟span</span>
		</div>
		<div class="name">
			<span>123</span>
			<p>span的兄弟p</p>
			<p>span的兄弟p</p>
			<p>span的兄弟p</p>
		</div>
	</body>
</html>

 

 文字大小寫:

text-transform:   uppercase(大寫)| lowercase(小寫) |  capitalize(首字母大寫)

flex: 

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

css 僞類:

:checked	input:checked	選擇所有選中的表單元素
:disabled	input:disabled	選擇所有禁用的表單元素
:empty	p:empty	選擇所有沒有子元素的p元素
:enabled	input:enabled	選擇所有啓用的表單元素
:first-of-type	p:first-of-type	選擇的每個 p 元素是其父元素的第一個 p 元素
:in-range	input:in-range	選擇元素指定範圍內的值
:invalid	input:invalid	選擇所有無效的元素
:last-child	p:last-child	選擇所有p元素的最後一個子元素
:last-of-type	p:last-of-type	選擇每個p元素是其母元素的最後一個p元素
:not(selector)	:not(p)	選擇所有p以外的元素
:nth-child(n)	p:nth-child(2)	選擇所有 p 元素的父元素的第二個子元素
:nth-last-child(n)	p:nth-last-child(2)	選擇所有p元素倒數的第二個子元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	選擇所有p元素倒數的第二個爲p的子元素
:nth-of-type(n)	p:nth-of-type(2)	選擇所有p元素第二個爲p的子元素
:only-of-type	p:only-of-type	選擇所有僅有一個子元素爲p的元素
:only-child	p:only-child	選擇所有僅有一個子元素的p元素
:optional	input:optional	選擇沒有"required"的元素屬性
:out-of-range	input:out-of-range	選擇指定範圍以外的值的元素屬性
:read-only	input:read-only	選擇只讀屬性的元素屬性
:read-write	input:read-write	選擇沒有隻讀屬性的元素屬性
:required	input:required	選擇有"required"屬性指定的元素屬性
:root	root	選擇文檔的根元素
:target	#news:target	選擇當前活動#news元素(點擊URL包含錨的名字)
:valid	input:valid	選擇所有有效值的屬性
:link	a:link	選擇所有未訪問鏈接
:visited	a:visited	選擇所有訪問過的鏈接
:active	a:active	選擇正在活動鏈接
:hover	a:hover	把鼠標放在鏈接上的狀態
:focus	input:focus	選擇元素輸入後具有焦點
:first-letter	p:first-letter	選擇每個<p> 元素的第一個字母
:first-line	p:first-line	選擇每個<p> 元素的第一行
:first-child	p:first-child	選擇器匹配屬於任意元素的第一個子元素的 <p> 元素
:before	p:before	在每個<p>元素之前插入內容
:after	p:after	在每個<p>元素之後插入內容
:lang(language)	p:lang(it)	爲<p>元素的lang屬性選擇一個開始值

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章