美文网首页
简单选择器

简单选择器

作者: Caesar_emperor | 来源:发表于2021-11-16 09:08 被阅读0次

一.选择器

  • 简单选择器
  1. id选择器

唯一,只能调用一次,前缀是#,一般配合JS。项目中使用最多的是类选择器

  1. class类选择器

类名可以由数字、字母、下划线、中划线组成,但不能以数字或中划线开头,一个标签可以有多个类名且类名可以重复,类名之间以空格隔开,一个类选择器可以同时选中多个标签

<html>
<head>
<style>
/*.类名表示将以该类名命名的所有标签应用此样式*/
.hometown
{
background-color:yellow;
}
.newtown
{
font-size:22PX;
}
/*标签.类名表示将以该类名命名的P标签应用此样式,中间不需要空格*/
p.home
{
background-color:red;
}
/*层叠问题上:当样式冲突时,运行时,以最后一个设置的样式为准*/
</style>
</head>
<body>
<p>我是唐老鸭。</p>
<p class="hometown  newtown">该P标签应用.hometown样式和newtown样式</p>
<div class="hometown">该div标签也应用.hometown样式</div>
<p>我是米老鼠。</p>
<p class="home">我也住在 Duckburg。</p>
</body>
</html>
<!--id,class是可以同时存在的-->
  1. *通配符:选择所有元素

一般用于去除标签默认的margin、padding

  1. 并集选择器:通过逗号连接,同理,可以添加以id或class作为选择器。可以将该css样式运用到多个标签。举例:
<style>
p, div {
  color:blue;
  font:italic 700 18px '微软雅黑'     
    }
</style>
<p>标签选择器</p>
<div>标签选择器</div>

相关文章

  • CSS选择器

    css选择器 CSS选择器可以简单分为三类:简单选择器、伪元素选择器、组合选择器 简单选择器 标签选择器 标签选择...

  • 1.4.2选择器

    1.4.2.1简单选择器 选择器 简单选择器 伪元素选择器 组合选择器 标签选择器 类选择器 .classname...

  • CSS简明教程——选择器

    简单选择器 属性选择器 伪类与伪元素 组合选择器 1. 简单选择器 标签选择器 类选择器 HTML: CSS: I...

  • 简单选择器

    选择器 ·简单选择器 标签选择器 p{color:blue;} 类选择器 .className .special{...

  • css选择器

    选择器 简单选择器 .class id tagname * [attr=v] : :: :not 复合选择器 <简...

  • 「CSS 」选择器

    选择器简单选择器标签选择器类选择器id 选择器通配符选择器属性选择器伪类选择器其他选择器伪元素选择器组合选择器选择...

  • 【前端】-013-页面制作-CSS-选择器

    简单选择器,简单选择器可以进行组合 标签(元素)选择器标签名{参数:参数值;}p{color: red;} 类选择...

  • 前端笔记(7)css选择器(一)

    选择器分类 简单选择器:针对某一特征判断是否选中元素。 复合选择器:连续的简单选择器,根据元素特征判断是否选中单个...

  • 第十三节:CSS选择器

    选择器 选择器:精准选中想要的元素 简单选择器 1、ID选择器2、元素选择器3、类选择器4、通配符选择器*,选中所...

  • jQuery - 常规选择器(简单选择器, 进阶选择器, 高级选

    学习要点:1)简单选择器 (元素选择器,id选择器,类选择器)2)进阶选择器3)高级选择器 jQuery最核心的组...

网友评论

      本文标题:简单选择器

      本文链接:https://www.haomeiwen.com/subject/npmbdktx.html