CSS基础学习02
选择器
基本选择器
元素选择器
以元素(标签)为目标
语法
p{
color:red;
font-size:10px
}
id选择器
以元素所赋予的ID标识为目标
语法
元素标识语法
<p id=”id1″></p>
CSS语法
#id1{
color:red;
font-size:10px
}
类选择器
以元素所赋予的CLASS标识为目标
语法
元素标识语法
<p class=”my”></p>
<p class=”my”></p>
CSS语法
.my{
color:red;
font-size:10px
}
通配选择器
匹配当前页面所有的内容
语法
*{
color:red;
font-size:10px
}
属性选择器
属性值
attribute
用于选取带有指定属性的元素
attribute
=value:选取带指定元
素的属性和值
~=value:用于选取含有
指定词汇的元素
^value:匹配属性值以指定
值开头的每个元素
$value:匹配属性值以指定
值结尾的每个元素
*value:匹配属性值中包含指定
值的每个元素
关系选择器
后代选择器
选择指定元素的后代元素
语法
祖先元素(空格)后代元素
{ color:red;}
父子选择器
指定元素的子元素
语法
父元素>子元素
{color:red;}
相邻兄弟选择器
只能选择后面一个元素,不可复用
语法
指定元素+下一个元素
{color:red;}
后面兄弟选择器
选择后面所有的同类元素,可复用
语法
指定元素~下一个元素
{color:red;}
组合选择器
可以将两种或多种元素组
合在一起使用同一种样式
选择器之间用逗号隔开>并集
语法
h1,h2.h3
{color:red;}
选择器之间没有任何分离>交集
语法
p#p1(#p1为id自定义名称)
{color:red;}
p.mini(.mini为class自定义名称)
{color:red;}
选择器的优先级别
内联样式>外联样式
id选择器>类选择器/属性选择器>元素选择器>通配符选择器
颜色值
Rgb:代表红绿蓝三原色
值得范围是0-255
语法
{ color:rgb(255,255,255);}
由16进制代码表示;由6位值组成
值得范围是00-ff
语法
{ color:#f082a1;}
伪类:用于向某些选择器添加特殊效果
属性
:active
向被激活的元素添加样式
:link
给未被访问的链接添加样式
:hover
当鼠标放在元素上方时,向元素添加样式
:visited
向以被访问过的链接添样式
:first-child
向元素的第一个子元素添加样式
:focus
向拥有键盘输入焦点的元素添加样式
语法
a:属性{color:red;}
伪元素
::before
在指定元素的前面添加样式
语法
p::before{
color:red;
content:”<”
}
::after
在指定元素的后面添加样式
语法
P::after{
color:red;
content:”>”
}
块级元素
特点:独占一行
h1-h6
p:该标签中不能包
含任何块级元素
ul
table
div:多用于页面布局
内联元素
Span:作为文本的容器