CSS（一）：选择器

反转基因福娃  金牌会员 | 2024-12-26 06:19:48 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 859|帖子 859|积分 2577

目次
CSS关联HTML的方式
内联样式
内部样式表
外部样式表 
选择器
基本选择器
标签选择器
类选择器
id选择器
条理选择器
后代选择器
子选择器
相邻兄弟选择器
通用兄弟选择器
结构伪类选择器
:first-child 和 :last-child
:nth-child(x) 和 :nth-of-type(x)
:hover
属性选择器









CSS关联HTML的方式





内联样式




内联样式是将 CSS 样式直接写在 HTML 元素的 style 属性中。这是最简单的方式，但只适用于少量样式，而且不便于维护

例如：
  1. <p style="color: blue; font-size: 20px;">这是一个蓝色的文本</p>
复制代码




内部样式表




内部样式表是将 CSS 代码放在 HTML 文件的 <head> 部门，使用 <style> 标签进行定义。这种方法适用于只需要为当前页面设置样式的情况

例如：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>内部样式示例</title>
  7.     <style>
  8.         /* CSS 代码 */
  9.         p {
  10.             color: green;
  11.             font-size: 18px;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <p>这是一个绿色的文本。</p>
  17. </body>
  18. </html>
复制代码




外部样式表 





外部样式表是将 CSS 样式写在单独的 .css 文件中，并在 HTML 文件中通过 <link> 标签来引入（最常见方式）

例如：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>外部样式示例</title>
  7.     <!-- 引入外部CSS文件 -->
  8.     <link rel="stylesheet" href="style.css">
  9. </head>
  10. <body>
  11.     <p>这是一个红色的文本。</p>
  12. </body>
  13. </html>
复制代码





选择器






基本选择器




标签选择器



标签选择器是通过标署名来选择元素，可以应用于页面上所有指定的标签

例如：
  1. h1 {
  2.                 color: red;
  3.         }
复制代码
所有 <h1> 标签的笔墨颜色都将变为红色



类选择器




类选择器通过给 HTML 元素加上 class 属性来选择元素，可以使多个不同的标签共享同一个类
类选择器的使用方法为.+类名

例如：
  1. <style>
  2.         .title {
  3.                 color: red;
  4.         }
  5. </style>
  7. <h1 class="title">标题</h1>
  8. <p class="title">段落文字</p>
复制代码




id选择器





为标签附上属性id，使用#+id的名称选择
id必须全局唯一

例如：
  1. <style>
  2.         #name {
  3.                 color: red;
  4.         }
  5. </style>
  7. <h1 id="name">名称</h1>
复制代码
只有具有特定 id="name" 的元素会应用该样式





条理选择器





后代选择器





元素的所有后代都被选中
用前元素+空格+后元素表现

  1. body p {
  2.         background: red;
  3. }
复制代码

在这个例子中，所有在 <body> 元素中的 <p> 元素都会被选中并设置背景颜色为红色



子选择器




只选中元素的子代，不选中孙代
用父元素+>+子元素表现

  1. body > p {
  2.         background: red;
  3. }
复制代码

在这个例子中，只有 <body> 元素下的直接 <p> 子元素才会应用这个样式，而嵌套在其他元素中的 <p> 不会受到影响



相邻兄弟选择器




只选择元素相邻的下方的，唯一一个标签，且不含本身
用前元素+加号+后元素表现
  1. /*只有class为name的元素的下一个相邻p标签变色*/
  2. .name + p {
  3.         background: red;
  4. }
复制代码
在这个例子中，只有紧接在 .name 元素之后的 <p> 元素会被选中并应用背景致



通用兄弟选择器




选中当前元素的向下所有兄弟元素
用前元素+~+后元素表现

  1. /*class为name的元素下面的所有p标签变色*/
  2. .name ~ p {
  3.         background: red;
  4. }
复制代码

在这个例子中，所有在 .name 元素之后的 <p> 元素都会应用这个样式，无论它们之间的元素是什么



结构伪类选择器




:first-child 和 :last-child




:first-child 选择器用于选中父元素的第一个子元素，:last-child 用于选择末了一个子元素

  1. ul li:first-child {
  2.         color: red;
  3. }
  5. ul li:last-child {
  6.         color: blue;
  7. }
复制代码

在这个例子中，第一个 <li> 元素的笔墨颜色会变为红色，末了一个 <li> 元素的笔墨颜色会变为蓝色



:nth-child(x) 和 :nth-of-type(x)





element:nth-child(x) 选择父元素中的第 x 个子元素。这个选择器是根据元素在其父元素中的位置来进行选择的，而不思量元素的类型。假如该元素的类型和element不同，则不会发生任何改变
element:nth-of-type(x) 选择父元素中第 x 个指定类型的子元素。这个选择器在选择时仅会思量与指定类型雷同的元素，忽略其他类型的元素

  1. <div>
  2.   <p>段落 1</p>
  3.   <span>标签 1</span>
  4.   <p>段落 2</p>
  5.   <span>标签 2</span>
  6. </div>
复制代码

使用 :nth-child(2) 选择器：
  1. p:nth-child(2) {
  2.   color: red;
  3. }
复制代码
这里，p:nth-child(2) 会选择父元素 <div> 中的第二个子元素。由于父元素的第二个子元素是 <span>（而不是 <p>），以是没有任何结果。

使用 :nth-of-type(2) 选择器：
  1. p:nth-of-type(2) {
  2.   color: red;
  3. }
复制代码
这里，p:nth-of-type(2) 会选择父元素 <div> 中第二个 <p> 标签，文本颜色会变成红色





:hover






用于选择鼠标悬停在元素上的时间应用的样式

  1. a:hover {
  2.         background: red;
  3. }
复制代码

当鼠标悬停在 <a> 标签上时，背景颜色会变成红色




属性选择器





属性选择器通过选择元素的特定属性及其值来应用样式
格式：标署名[属性名=属性值]，此中属性值可以为正则表达式

一些常用的正则表达式：


  • =：绝对便是
  • *=：包含
  • ^=：以什么开头
  • $=：以什么结尾
 
  1. /*存在id属性的元素*/
  2. a[id] {
  3.         color: red;
  4. }
  6. /*id为first的元素*/
  7. a[id="first"] {
  8.         color: red;
  9. }
  11. /*class属性中含有link的元素*/
  12. a[class*="link"] {
  13.         color: red;
  14. }
  16. /*href属性值以http开头的元素*/
  17. a[href^="http"] {
  18.         color: red;
  19. }
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

反转基因福娃

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表