css 选择器

来源：互联网发布：英伦学院风女知乎编辑：程序博客网时间：2024/06/07 06:28

1.通配选择器

通配选择器可以对HTML中所有元素起作用，格式语法如下：

属性:属性值;

}

*在这里就表示HTML里面的所有标签。

代码如下

*{
margin: 0px;

padding:0px;

}

在HTML页面中许多标签的边界填充默认值不为0，导致在网页制作过程中不好控制，通配符的出现就是为了解决这一问题，网上也有大神针对网页默认值写的代码插件，感兴趣的可以去看看。

2.标签选择器

我们都知道HTML由多个不同的标签组成，而标签选择器就是用来控制标签的应用样式。

格式语法如下：

标签名称{属性:属性值;}

如HTML里有标签

<body id="body" class="body1">
<div id="div" class="div1">我是div
<h1 id="h1" class="h11">我是h1</h1>
<p id="p" class="p1">我是p</p>
</div>
</body>

可用标签选择器来控制，单标签选择：

body{

background-color:aqua;

} //只控制body标签，定义其颜色为aqua

多标签选择：

div,h1,p{

color:brown; //同时控制div，h1，p标签，定义字体颜色为brown。

//若想同时控制几个标签，可以加“，”。

}

子标签选择：

body div p{

color:#000000;

} //控制body下的div下的p标签。用空格隔开。

3.类选择器

在HTML里面，我们可以用class给标签定义类，如<div class="div1">,标签div的类为div1。

类的出现时方便控制标签，虽然控制标签也可以通过标签来实现，但是在面对很多重复的标签时，标签选择器会显得无用。

类选择器格式语法如下（HTML如上）：

.类名{

属性:属性值;

} //用”.”来表示类。

代码如下：

.div1{

width:100%;

height:100%;

}//设置div的高和宽，类选择器和标签一样也可以同时控制几个类及控制子类。

4.ID选择器

在HTML里面，我们可以用id给标签定义id，如<div id="div">,标签div的id是div。

id的作用和class差不多，不过id具有唯一性，比较安全可靠，所以在学习和工作中被使用得更多。

id选择器格式语法如下：

#id名{

属性:属性值;

} //用"#"来表示id

代码如下：

#div{

font-size:20px;

}//设置div字体的大小，id选择器同样可以同时控制几个和父子id。

阅读全文

0 0