CSS选择器:通用、元素、id、CLASS

2023-08-1109:50:45网页制作Comments851 views字数 1022阅读模式

通用选择器

选择所有元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53550.html

*{
}

元素选择器

元素选择器,就是“选中”相同的元素,然后对相同的元素定义同一个CSS样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53550.html

HTML
<p>Lorem</p>
<p>Lorem</p>
<div>Lorem</div>
CSS
p {
    color: red;
}

上述p元素选择器样式只会修改p元素的样式,不会修改div元素的样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53550.html

class选择器

class选择器,也就是“类选择器”。我们可以对“相同的元素”或者“不同的元素”定义相同的class属性,对属于相同class的元素设置统一的样式。在CSS中使用"."来选择元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53550.html

HTML
<p class="g1">Lorem</p>
<p class="g1">Lorem</p>
<div class="g1">Lorem</div>
CSS
.g1 {
    background-color: gray;
}

注意:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53550.html

p.g1/*只有class="g1"的p元素会使用该样式*/
<p class="center large">这个段落使用两个样式。</p>

id选择器

我们可以为元素设置一个id属性,然后针对设置了这个id的元素定义CSS样式,这就是id选择器,在CSS中使用"#" 来选择元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53550.html

HTML
<p class="g1" id="one">Lorem</p>
<p class="g1" id="two">Lorem</p>
<div class="g1" id="three">Lorem</div>
CSS
#one {
    background-color: red;
}

#two {
    background-color: yellow;
}

#three {
    background-color: green;
}

分组选择器

对多个元素使用同一样式,减少代码量(和类选择器相似,但是不用在每个元素上写class="xxxx"了)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53550.html

h1, h2, p {
  text-align: center;
  color: red;
}

后代选择器

后代选择器,就是选择元素内部中所有的某一种元素,包括子元素和其他后代元素(如“孙元素”)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53550.html

我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53550.html

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

如果您希望只对 h1 元素中的 em 元素应用样式,可以这样写:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53550.html

h1em {color:red;}

注意:两个元素之间的层次间隔可以是无限的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53550.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/zhizuo/53550.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定