css基础选择器

回复

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

今天开始学习css基础选择器部分。

一、CSS基础选择器

1、什么是选择器

1、当前样式规则的名称

2、规范哪些元素能够使用当前的样式规则

2、基础选择器

1、通用选择器

语法: *{}

作用：匹配页面中所有的元素

*{

属性:值;

}

使用场合：定义当前网页中最基本的显示样式，如字体、大小

<!DOCTYPE html>
<html>
<head>
<title>通用选择器</title>
<style>
*{
font-size:20px;
color:red;
}
</style>
</head>
<body>
<div>这是一段字体为红色，大小为20px的文本</div>
</body></html>

复制代码

2、元素选择器

语法：html文档中的元素，就是选择器

作用：更改某个元素（标签）的默认显示样式

<!DOCTYPE html>
<html>
<head>
<title>通用选择器</title>
<style>
h2{
font-size:20px;
color:red;
}
</style>
</head>
<body>
<h2>这是一段字体为红色，大小为20px的h2文本</h2>
</body></html>

复制代码

3、类选择器(类样式)

作用：定义一组元素的通用样式

语法: .className

注意：类名不能以数字开头

.important{}

.set{}

.s1{}

.2action{} 错误

使用:通过标签的class属性，来引用定义好的类名

<!DOCTYPE html>
<html>
<head>
<title>通用选择器</title>
<style>
.myclass{
font-size:30px;
background-color:red;
}
</style>
</head>
<body>
<h2 class="myclass">h2文本</h2>
<p class="myclass">段落文本</p>
</body></html>

复制代码

4、分类选择器（分类样式）

将类选择器和元素选择器进行结合，主要针对某种元素不同的类进行细分控制

语法: 元素选择.类选择器

p.important{} : 控制class属性值为important的p标签的样式

div.warning{} : 控制class属性值为warning的div标签的样式

<!DOCTYPE html>
<html>
<head>
<title>通用选择器</title>
<style>
h2.myclass{
font-size:30px;
background-color:red;
}
</style>
</head>
<body>
<h2 class="myclass">这是有样式的h2文本</h2>
<p class="myclass">这是没有样式的段落文本</p>
</body></html>

复制代码

5、id选择器(id样式)

作用：定义某一元素的固定样式

语法：#idName

使用：通过标签的id属性值进行引用

元素选择器#id选择器{}

#most{}

div#most{}

<!DOCTYPE html>
<html>
<head>
<title>通用选择器</title>
<style>
h2#myclass{
font-size:30px;
background-color:red;
}
</style>
</head>
<body>
<h2 id="myclass">这是有样式的h2文本</h2>
<p class="myclass">这是没有样式的段落文本</p>
</body></html>

复制代码

6、群组选择器

声明以 , 隔开的选择器列表

div{

color:blue;

}

span{

color:blue;

}

div,span,.most,#main,div.important{

color:blue;

}

#div1,#div2,#div3,section{

background-color:red;

}

#div1{

font-size:30px;

}

<!DOCTYPE html>
<html>
<head>
<title>通用选择器</title>
<style>
h2#myclass,p.myclass{
font-size:30px;
background-color:red;
}
</style>
</head>
<body>
<h2 id="myclass">这是有样式的h2文本</h2>
<p class="myclass">这是有样式的段落文本</p>
</body></html>

复制代码

7、后代选择器: 通过元素的位置关系来匹配到元素

语法:选择器1 选择器2{}

div span{} : 匹配到div中所有的span元素

#myDiv .important{} :

</div>

<!DOCTYPE html>
<html>
<head>
<title>通用选择器</title>
<style>
.myclass b{
font-size:30px;
background-color:green;
}
</style>
</head>
<body>
<p class="myclass">
<b>这是有样式的文本</b>
</p>
</body></html>

复制代码

8、子代选择器

两个元素间只能是父子关系

语法:选择器1>选择器２

h1>b>span{}

<!DOCTYPE html>
<html>
<head>
<title>通用选择器</title>
<style>
.myclass>span{
font-size:30px;
background-color:green;
}
</style>
</head>
<body>
<div class="myclass">
<span>
这是有样式的文本
<p>
<span>
这是没有样式的文本
</span>
</p>
</span>
</div>
</body></html>

复制代码

[HTML5开发] css基础选择器

[HTML5开发] css基础选择器

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

阅读推荐

用微信扫一扫