鱼C论坛

 找回密码
 立即注册
查看: 7680|回复: 65

[庖丁解牛] 0 0 2 3 - 选择器之谜思

[复制链接]
发表于 2017-1-15 11:26:23 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 不二如是 于 2021-8-11 09:17 编辑

22咱们把CSS的继承机制,玩弄了一下。

这次搞定21中,那张著名图说的“选择器”

很简单,他代表了样式中{}之前的部分!

在CSS的联盟中,有三种最基础的的选择器:

标签选择器、类选择器、id选择器


还是以Dom结构(页面结构)为例,细致的看一下这三种选择器怎么玩儿。

类似15中的区块,代码如下:
  1. <!doctype html>
  2. <html>
  3. <meta charset="utf-8">
  4. <head>
  5.         <title>选择器</title>
  6.         <style type="text/css"></style>
  7. </head>
  8. <body>
  9.         <header>
  10.                 <h1 class="red" id="title">FishC</h1>
  11.         </header>
  12.         <section>
  13.                 <h1 class="blue" id="m-title">Fishc</h1>
  14.                 <article>
  15.                         <h1 class="red" id="s-title">fishC</h1>
  16.                 </article>

  17.         </section>
  18.         <aside>
  19.                 <h1 class="blue" id="a-title">fishc</h1>
  20.         </aside>
  21. </body>
  22. </html>
复制代码


效果图:
Snip20170115_334.png

游客,如果您要查看本帖隐藏内容请回复


CSS中还有很多附加选择器 Snip20170115_338.png

用法都差不多,具体用到,再说~

这位鱼油,如果喜欢本帖子,请订阅 专辑-->传送门)(不喜欢更要订阅


官方 Web 课程:

评分

参与人数 5荣誉 +25 鱼币 +20 贡献 +12 收起 理由
542624047 + 5 + 5 + 3 无条件支持楼主!
微末非末 + 5 + 5 + 3 鱼C有你更精彩^_^
睦ちゃん她爹 + 5 + 5 + 3 感谢楼主无私奉献!
晓月56 + 5 + 5 + 3 感谢楼主无私奉献!
alltolove + 5 感谢楼主无私奉献!

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-4-21 11:01:26 | 显示全部楼层
交作业
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>CSS选择器</title>
  6.         <style type="text/css">
  7.                 * {/*通配符选择器用星号'*'该选择器可以与任何元素匹配,就像是一个通配符        */
  8.                 color:red;
  9.                 }
  10.                 html,body{        /*选择器分组用逗号','可以将任意多个选择器分组在一起*/
  11.                         font-family: sans-serif, serif,cursive,fantasy,monospace;
  12.                 }
  13.                 .body{        /*类选择器用'.'*/
  14.                         background-color: beige;
  15.                         margin: 0;
  16.                         padding: 0;
  17.                         position: relative;
  18.                 }
  19.                 .slogan.en{        /*多类选择器 通过把两个(或两个以上)类选择器链接在一起,仅可以选择同时包含这些类名的元素(类名的顺序不限)*/
  20.                         font-size: 16px;
  21.                         color: blue;
  22.                 }
  23.                 h1{/*标签选择器 匹配文档树中该元素类型的每一个实例*/
  24.                         height: 100%;
  25.                         color: red;
  26.                 }
  27.                 #container{        /*Id选择器用'#'  只能在文档中使用一次,而且仅一次;ID 选择器不能结合使用,因为 ID 属性不允许有以空格分隔的词列表*/
  28.                         width: 100%;
  29.                         text-align: center;
  30.                 }  
  31.                 a{
  32.                         color: green;
  33.                 }
  34. /*属性选择器[]
  35. [attribute]                        用于选取带有指定属性的元素。
  36. [attribute=value]        用于选取带有指定属性和值的元素。
  37. [attribute~=value]        用于选取属性值中包含指定词汇的元素。
  38. [attribute|=value]        用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
  39. [attribute^=value]        匹配属性值以指定值开头的每个元素。
  40. [attribute$=value]        匹配属性值以指定值结尾的每个元素。
  41. [attribute*=value]        匹配属性值中包含指定值的每个元素。

  42. 后代选择器 h1 em {color:red;}
  43. 子元素选择器 h1 > strong {color:red;}
  44. 相邻兄弟选择器 h1 + p {margin-top:50px;}
  45. */
  46.         </style>
  47. </head>
  48. <body class="body">
  49.         <div id="container">
  50.                 <h1>我爱鱼C</h1>
  51.                 <p class="p slogan">让编程改变世界!</p>
  52.                 <p class="p slogan en">Change the world by program!</p>
  53.                 <a href="http://www.fishc.com/" id="first_Js">传送门</a>
  54.                 <a href="http://bbs.fishc.com/forum.php?mod=collection&action=view&ctid=539" id="first_Js2">HTML5-庖丁解牛</a>
  55.         </div>
  56. </body>
  57. </html>
复制代码

0017CSS选择器.png

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-5-27 22:57
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 1 反对 0

使用道具 举报

发表于 2017-2-20 17:13:08 | 显示全部楼层
受益匪浅!!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-2-22 16:28:05 | 显示全部楼层
本帖最后由 joker11111 于 2017-2-22 16:29 编辑

1111.png


  1.         h1{
  2.                 font-size:33px;
  3.         }
  4.         section article h1{
  5.                 font-size:66px;
  6.         }
  7.         .red{
  8.                 color:#F00;
  9.         }
  10.         .blue{
  11.                 color:#06F;
  12.         }
  13.         aside .blue{
  14.                 color:black;
  15.         }

复制代码


如果希望更精确的设置,可以通过对选择器的父元素加以指定,父元素和子元素间,要用空格分开!

','是行不通滴~,这就是后代选择器   感觉好方便

点评

我很赞同!: 5.0
我很赞同!: 5
UGC!!!  发表于 2017-2-22 20:03
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-2-22 20:03:39 | 显示全部楼层
joker11111 发表于 2017-2-22 16:28
如果希望更精确的设置,可以通过对选择器的父元素加以指定,父元素和子元素间,要用空格分开!

...

优质!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-2-28 10:17:26 | 显示全部楼层
看帖要养成回复的好习惯
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-4 16:38:59 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-3-6 11:56:59 From FishC Mobile | 显示全部楼层
隐藏的内容引起了我的窥探欲望
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-6 11:57:16 From FishC Mobile | 显示全部楼层
。。。。。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-3-7 14:59:15 | 显示全部楼层
支持楼主!!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-7 15:49:13 | 显示全部楼层
123
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-3-18 11:39:25 | 显示全部楼层
学习学习

评分

参与人数 1鱼币 +6 收起 理由
不二如是 + 6 热爱鱼C^_^

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-3-18 12:11:58 | 显示全部楼层

欢迎学习~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-28 11:09:37 | 显示全部楼层
每日看5篇,锻炼好身体。

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-3-28 11:43

评分

参与人数 1荣誉 +3 鱼币 +5 收起 理由
不二如是 + 3 + 5 热爱鱼C^_^

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-3-28 11:42:44 | 显示全部楼层
白牙 发表于 2017-3-28 11:09
每日看5篇,锻炼好身体。

bamg&#8198;bamg&#8198;da
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-4-28 10:57:06 | 显示全部楼层
又骗回复
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-5-4 10:05:50 | 显示全部楼层
鍗犳ゼ绛変氦浣滀笟
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-5-21 16:11:43 | 显示全部楼层
标签选择器,在编写样式的时候以标签名开头,
类选择器,使用前要先给元素添加类名,如class="new class",在编写样式时以".样式名"开头;
id选择器,使用前给元素添加id名,如id="new id",在编写样式时以"#id名"开头

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-5-21 17:15
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-6-27 23:02:58 | 显示全部楼层
一档起步。
玫瑰:01--标签+类选择器中的color:F#66F;
         02--类选择器部分,已经用了颜色和大小的组合,可以这么理解不;

snip-0023-201706272301

snip-0023-201706272301

  1. <!doctype html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title>选择器</title>
  6.         <style type="text/css">
  7.                         #title{
  8.                                         font-size:66px;
  9.                         }
  10.                                 #m-title{
  11.                                                 font-size:55px;
  12.                                 }
  13.                                 #s-title{
  14.                                                 font-size:44px;
  15.                                 }
  16.                                 #a-title{
  17.                                                 font-size:33px;
  18.                                 }                       
  19.                         .red{
  20.                                                                 color:#f00;
  21.                         }
  22.                         .blue{
  23.                                                                 color:#06f;
  24.                         }
  25.                         section article h1{
  26.                                        
  27.                                         font-size:66px;
  28.                         }<!--指定元素的样式,组合-->
  29.                         aside .blue h1{
  30.                                         color:#0F0;
  31.                         }<!--没有更改颜色?,还有权限抢占,儿子和老子-->
  32.         </style>
  33. </head>
  34. <body>
  35.         <header>
  36.                         <h1 class="red" id="title">FishC</h1>
  37.         </header>
  38.         <section>
  39.                         <h1 class="blue"id="m-title">Fishc</h1>
  40.                         <article>
  41.                                 <h1 class="red" id="s-title">fishc</h1>
  42.                         </article>
  43.         </section>
  44.         <aside>
  45.                         <h1 class="blue" id="a-title">fishc</h1>
  46.         </aside>
  47. </body>

  48. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-7-6 12:20:54 | 显示全部楼层
非常好
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 04:48

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表