CSS02

Selector 选择器

Universal Selector 通用选择器

*{
 color:black;
}

元素选择器

img{
 width:10px;
}

元素列表选择器

h1,h2{
 color:cyan;
}

ID selector ID 选择器

把每个单独元素的id属性当做选择器

<button id="signup">Sign Up</button>
--------------------------------------
#signup{
	background-color: #544125
	color:#875412
}

Class selector 类选择器

<h2>lol look the bird<span class="tag">funny</span></h2>
----------------------
.tag {
	color:xxxx;
}

descendant selector 后代选择器

选择所有在li中的anchor tag
li a{
	color:teal;
}
post类中的a连接
.post a{
	color:teal;
}

adjacent selector 相邻选择器和direct child

adjacent selector

用在所有的 h1后紧接着的p 情况
h1 + p {
 color:teal;
}

direct child

只选择div元素直接后代为li的li；不是div后代的后代，而实div的直接后代
div > li{
	color: white;
}

attribute selector 属性选择器

选择所有 type attribute 类型属性为text 的input元素
input[type="text"]{
	width:300px;
	color:yellow;
}
section[class="post"]{ 
	width:300px;
	color:yellow;
}
相当于section.post{}

containing包含"xxx"的a
a[href*="google"]{
	color: magenta;
}

以.org结尾
a[href$=".org"]{
	color: magenta;
}

psedo class 伪类

加在选择器上来表明被选择的元素状态

:active
选中，非悬浮
-------------------------
:checked
单选框，多选框
-------------------------
:hover
当光标悬浮在链接时候
a:hover{
	color:orange;
}
权限比id 选择器小，因此id选择器选中的，这里不能改
-------------------------
:nth-of-type()
.post:nth-of-type(3n){    //每三个选中一次
	background-color: #452f4d
}
-----------------------
:not()
:nth-child()
:first
等等

psedo class 伪元素

加在选择器上来风格话被选择的元素的某个部分

::after
::before
-------------------------
第一个字
::first-letter
h2::first-letter{
	font-size:50px
}
-------------------------
第一行
::first-line
p::first-line{
	color:blue
}
-------------------------
选中的文字应用效果
::selection
p::selection{
	background-color:blue;
}
//应用整页
::selection{ 
	background-color:blue;
}

specificity 特殊性

如果对同一个元素施加不同的效果（冲突），会发生什么？如下

更加具体的选择器会显示出来：第一个选择器比后一个选择器具体
$$ID>CLASS>ELEMENT$$
左边的比右边更具体，下图是一个计数器：

inline style行内样式（不要用）

权重比ID selector要大

重要性！覆盖非它的所有效果

CSS继承

如果父有效果，子没有说明，就全是父的效果
body{
	color:purple;
}
h1{
	color:green;
}

有些元素默认不继承，可以特别声明继承

button,input{
	color:inherit;
}

有些属性property不能被继承：border