html 最上层
css 中层
js 最底层
行内样式表:
影响单个标签
内部样式表
<head/>
<style type="text/css">
<style>
<head>
class
外部样式表
引入
[HTML_REMOVED]
选择器:
标签选择器
id选择器 #
class选择器 .
id和类选择器的区别:id选择器一般是唯一的,而多个标签可以用一个类,同一个标签可以用多个class
伪类选择器
.effect:hover{
} //我的理解是在类名后的条件满足下执行操作
:hover 鼠标悬停
:link 链接未访问,未打开过
:visted 链接访问,打开过
:active 点击的时候
:focus 聚焦的时候,input
id也可以用伪类选择器
:nth-child() **父节点**的第几个儿子
*****
复合选择器
div,p{
}
对两个标签设置相同的属性
标签.class{
}
div.big{
}//对有big类的div进行的操作
.big.real{
}//对同时有big和real类进行的操作
#myp.big
{
}//对id为myp的big类进行的操作
div+p
{
}//对紧跟在div后的p进行的操作
ul li{
}//如果li前面有个ul祖先节点的话就会触发这个
div > p{
} //p有个父节点是div就执行该操作
*****
通配符选择器
*{
}//选择所有标签
input[required]{
} // 选择有required属性的input标签
input[type=text]{
}//选择type = text的input标签
****
伪元素选择器
p::first-letter{
} //
p::first-line{
}
p::selection{
}
h1::before{
content:"《"
}
h1::after{
content:"》"
}
!important 优先级最高