选择器

 

基本选择器

 

元素选择器

 

以元素(标签)为目标

语法

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:作为文本的容器

打赏

发表评论

邮箱地址不会被公开。 必填项已用*标注