错误博客( cuowu.com )发布于 2019-06-05 09:58:57

CSS简单选择器

简单选择器包括:元素选择器、类选择器、ID选择器和(锚)伪类等。

1)元素选择器

文档的元素就是最基本的选择器。简单来说,就是HTML标签做选择器。

语法: 标签{声明;}

例如:

html {

color:red;

}

p {

font-size:20px;

}

2)类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。可指定单个元素,也可多个。通常类选择器还可以结合使用。

语法: .类选择器名 {声明} “.”+ 类选择器名

命名规则:字母或下划线开头,可以包含字母、下划线和数字。

例如:

<head>

<style type=”text/css”>

.lizi {

color:red;

}

</style>

</head>

<body>

<div class=”lizi”>例子一</div>

<p class=”lizi”>例子二</p>

</body>

3)ID选择器

ID选择器一个文档中只能使用一次。

语法: #ID选择器名 {声明} “#”+ ID选择器名

命名规则:字母或下划线开头,可以包含字母、下划线和数字。

例如:

<head>

<style type=”text/css”>

#lizi1 {

color:red;

}

#lizi2 {

color:red;

}

</style>

</head>

<body>

<div id=”lizi1”>例子一</div>

<p id=”lizi2”>例子二</p>

</body>

4)(锚)伪类

简单介绍一个,链接的类选择器,a:hover{声明;}。它的意思就是当鼠标移动到<a>标签上时,就会链接就是显示出声明的样式。

例如:

a:hover{

color:red;

font-size:100px;

}


2020年错误博客亲测项目系列

错误教程( cuowu.com )专注网推培训、SEO培训、抖音培训和网赚培训,微信/电话:13722793092

关注微信公众号:第一时间获得错误博客最新教程,让我们一起成长!

公众号二维码