CSS-基础(一)

2020-06-10

技术

CSS学习笔记（一）

CSS的导入

CSS文件三种的引入方式

<link href='[filePaht]', rel='stylesheet' type="text/css"></link>
<div style="font-size:2rem">ruoyu</div>
<head> <style>div{font-size:2rem}<style> </head>

在CSS文件中导入其他css样式：@import url([filePath]) [all || screen || print] and (min-width:678px)

CSS选择器

“>” 儿子选择器,选中所有儿子

p > p {…}

‘+’ 只选紧贴着地后一个兄弟元素

p + p {…}

‘~’ 选中后面所有兄弟元素

p ~ p {...}

属性选择器

P[class=..] { …}

选中class名称中以ab开头的元素 p[class^=’ab’] {…}

选中class名称中以ab结尾的元素 p[class$=’ab’] {…}

选中含有ab的所有元素 p[class*=’ab’] {…}

选中独立ab词的所有元素 p[class~=’ab’] {…}

伪类选择器Pseudo-CSS-selector

选中所有子孙后代中的第一个元素 p :first-child{ color: xxx}

选中儿子中的第一个元素 p>:first-child{ color: xxx}

选中第n个子元素 (even, odd)选中偶数奇数行

/* 利用此特性可以来隔行变色*/
/* 'n' starts from zero*/
p :nth-child(2n){
	color:xxx
}
p :nth-child(even){
	color:xxx
}
p :nth-child(2n-1){
	color:xxx
}
p :nth-child(odd){
	color:xxx
}

All CSS Pseudo Elements

Selector	Example	Example description
::after	p::after	Insert something after the content of each element
::before	p::before	Insert something before the content of each element
::first-letter	p::first-letter	Selects the first letter of each element
::first-line	p::first-line	Selects the first line of each element
::selection	p::selection	Selects the portion of an element that is selected by a user

All CSS Pseudo Classes

Selector	Example	Example description
:active	a:active	Selects the active link
:checked	input:checked	Selects every checked element
:disabled	input:disabled	Selects every disabled element
:empty	p:empty	Selects every element that has no children
:enabled	input:enabled	Selects every enabled element
:first-child	p:first-child	Selects every elements that is the first child of its parent
:first-of-type	p:first-of-type	Selects every element that is the first element of its parent
:focus	input:focus	Selects the element that has focus
:hover	a:hover	Selects links on mouse over
:in-range	input:in-range	Selects elements with a value within a specified range
:invalid	input:invalid	Selects all elements with an invalid value
:lang(language)	p:lang(it)	Selects every element with a lang attribute value starting with “it”
:last-child	p:last-child	Selects every elements that is the last child of its parent
:last-of-type	p:last-of-type	Selects every element that is the last element of its parent
:link	a:link	Selects all unvisited links
:not(selector)	:not(p)	Selects every element that is not a element
:nth-child(n)	p:nth-child(2)	Selects every element that is the second child of its parent
:nth-last-child(n)	p:nth-last-child(2)	Selects every element that is the second child of its parent, counting from the last child
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every element that is the second element of its parent, counting from the last child
:nth-of-type(n)	p:nth-of-type(2)	Selects every element that is the second element of its parent
:only-of-type	p:only-of-type	Selects every element that is the only element of its parent
:only-child	p:only-child	Selects every element that is the only child of its parent
:optional	input:optional	Selects elements with no “required” attribute
:out-of-range	input:out-of-range	Selects elements with a value outside a specified range
:read-only	input:read-only	Selects elements with a “readonly” attribute specified
:read-write	input:read-write	Selects elements with no “readonly” attribute
:required	input:required	Selects elements with a “required” attribute specified
:root	root	Selects the document’s root element
:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)
:valid	input:valid	Selects all elements with a valid value
:visited	a:visited	Selects all visited links

否定伪类

p: not( [css-selector] ) 例如:

<style>
  div :not(:nth-child(1)){
    /*选中<p>2</p>*/
    color:red;
  }
</style>
<body>
  <div>
    <p>1</p>
    <p>2</p>
  </div>
</body>

版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！