CSS选择器

id选择器

什么是id选择器?
作用: 根据指定的id名称找到对应的标签, 然后设置属性
id名称{
属性:值;
}

类选择器

什么是类选择器?
作用: 根据指定的类名称找到对应的标签, 然后设置属性
.类名{
属性:值;
}
格式:
<标签名称 class="类名1 类名2 ...">

后代选择器

什么是后代选择器?
作用: 找到指定标签的所有特定的后代标签, 设置属性
标签名称1 标签名称2{
属性:值;
}

子元素选择器

什么是子元素选择器?
作用: 找到指定标签中所有特定的直接子元素, 然后设置属性
标签名称1>标签名称2{
属性:值;
}
子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
子元素选择器之间需要用>符号连接, 并且不能有空格

交集选择器

什么是交集选择器?
作用: 给所有选择器选中的标签中, 相交的那部分标签设置属性
选择器1选择器2{
属性: 值;
}
选择器和选择器之间没有任何的连接符号

并集选择器

什么是并集选择器?
作用: 给所有选择器选中的标签设置属性
选择器1,选择器2{
属性:值;
}

兄弟选择器

选择器1+选择器2{
属性:值;
}

序选择器

什么是序选择器?
作用: 选中指定的任意标签然后设置属性
:first-child 选中同级别中的第一个标签
last-child 选中同级别中的最后一个标签
nth-child(n) 选中同级别中的第n个标签

通配符选择器

什么是通配符选择器?
作用: 给当前界面上所有的标签设置属性
*{
属性:值;
}
<em>和<strong>
em标签用于表示一段内容中的着重点。
strong标签用于表示一个内容的重要性。
这两个标签可以单独使用,也可以一起使用。
<p>
<strong>警告:任何情况下不要接近僵尸。</strong>
他们只是 <em>看起来</em> 很友好,实际上他们是为了吃你的胳膊!
</p>
通常em显示为斜体,而strong显示为粗体
<i>和<b>
i标签会使文字变成斜体。
b标签会使文字变成粗体。
这两个标签和em和strong类似,但是这两 个标签没有语义。
所以根据html5标准,当我们只想设置文本 特殊显示,而不需要强调内容时就可以使 用i和b标签。
<small>
small标签表示细则一类的旁注,通常包括 免责声明、注意事项、法律限制、版权信 息等。
浏览器在显示small标签时会显示一个比父 元素小的字号。

<p><small>©2018北财. 保留所有权利.</small></p>
和
sup和sub用于定义上标和下标。
上标主要用于表示类似于103中的3。
下标则用于表示类似余H2O中的2
<ins>和<del>
ins表示插入的内容,显示时通常会加上下 划线。
del表示删除的内容,显示时通常会加上删 除线。
有序列表
使用ol和li来创建一个有序列表。
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
无序列表
使用ul和li来创建一个无序列表。
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
定义列表
使用dl、dd、dt来创建一个定义列表。

<dl>
<dt>定义项1</dt>
<dd>定义描述1</dd>
<dt>定义项2</dt>
<dd>定义描述2</dd>
<dt>定义项3</dt>
<dd>定义描述3</dd>
</dl>
单位
px
如果我们将一个图片放大的话,我们会发现一个图片 是有一个一个的小色块构成的,这一个小色块就是一 个像素,也就是1px,对于不同的显示器来说一个像素 的大小是不同的。
百分比
也可以使用一个百分数来表示一个大小,百分比是相 对于父元素来说的,如果父元素使用的大小是16px, 则100%就是16px,200%就是32px。
em
em和百分比类似,是相对于font-size说的
1em = 1font-size
文字大小
font-size用来指定文字的大小

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1.CSS 元素选择器 最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。如果设置 H...
    饥人谷_小侯阅读 991评论 0赞 1
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 137,274评论 19赞 139
  • CSS选择器 标签选择器 什么是标签选择器? 作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然...
    Jackson_yee_阅读 611评论 0赞 0
  • 选择器: 标签选择器格式:标签名称{属性:值;} id选择器格式: id名称{ } 类选择器格式:.类名{属性:值...
    往事一块六毛八阅读 556评论 0赞 0
  • ## CSS选择器 # 标签选择器 # id选择器 # 类选择器 # 后代选择器 # 子元素选择器 # 交集选择器...
    KsKison阅读 691评论 0赞 0

友情链接更多精彩内容