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 特殊性
如果对同一个元素施加不同的效果(冲突),会发生什么?如下
更加具体的选择器会显示出来:第一个选择器比后一个选择器具体
I
D
>
C
L
A
S
S
>
E
L
E
M
E
N
T
ID > CLASS > ELEMENT
ID>CLASS>ELEMENT
左边的比右边更具体,下图是一个计数器:
inline style行内样式(不要用)
权重比ID selector要大
重要性!覆盖非它的所有效果
CSS继承
如果父有效果,子没有说明,就全是父的效果
body{
color:purple;
}
h1{
color:green;
}
有些元素默认不继承,可以特别声明继承
button,input{
color:inherit;
}
有些属性property不能被继承:border