选择器和复杂选择器

最新推荐文章于 2024-07-06 20:00:00 发布

webmasterJ

最新推荐文章于 2024-07-06 20:00:00 发布

阅读量703

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/webmasterJ/article/details/78406505

版权

举例css文件：

在css文件中添加内容如下：

.foot_area1{
width: 70%;
height: 20px;
margin: 0 auto;

}

在html文件的<body>标签中，添加内容如下：

则该<div>可以调整为全屏宽度的70%，高20px,自动居中

CSS:

css中很重要的一个是使用选择器，如上方的14条内容，使用的是类选择器。

1. 先介绍标签选择器，在css文件中添加

li{
list-style: none;
float: left;
color: #666;
line-height: 5px;
margin-right: 10px;
margin-top: 10px;
}

这段内容会对li标签进行样式添加，所有包含该标签的都会变成这种样式

2.类选择器

格式为 .类名{样式} 如：

.foot_area1{
width: 70%;
height: 20px;
margin: 0 auto;

}

通过定义类名，设置样式，然后在需要的标签中，用class="设置的类名"，即可调用样式

可以<div class="foot_area1"></div> 也可以<li class="foot_area1"></li>

3.ID选择器

格式 #名{内容}

css内：

#a{

width:500px;

height:500px;

background-color:#999;

}

html内：

<div id="a"></div>

使用id选择器，然后让div区域变成500*500，颜色为#999；

4.复合选择器

1)并集选择器：用逗号隔开

格式：.名1,.名2{内容}

.center_button1,.center_button2,.center_button3{
width: 158px;
height: 44px;
float: left;
margin-left: 30px;
margin-top: 10px;
line-height: 44px;

text-align: center;
}

2)后代选择器：用空格隔开，先父后子

格式：名1 名2{内容}

.input li{
float: left;
margin-right: 10px;
white-space: nowrap;
color: #999;
line-height: 20px;
list-style: none;
font-size: 12px;
}

3）超链接选择器：

a:link{}

a:visited{}

a:hover{}

a:active{}

超链接选择器4个的顺序不能变

注：选择器很重要

webmasterJ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫