0 0 2 3 - 选择器之谜思

不二如是 · 发表于 2017-1-15 11:26:23

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

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

x

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

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

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

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

在CSS的联盟中，有三种最基础的的选择器：

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

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

类似15中的区块，代码如下：

<!doctype html>
<html>
<meta charset="utf-8">
<head>
        <title>选择器</title>
        <style type="text/css"></style>
</head>
<body>
        <header>
                <h1 class="red" id="title">FishC</h1>
        </header>
        <section>
                <h1 class="blue" id="m-title">Fishc</h1>
                <article>
                        <h1 class="red" id="s-title">fishC</h1>
                </article>

        </section>
        <aside>
                <h1 class="blue" id="a-title">fishc</h1>
        </aside>
</body>
</html>

效果图：

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

CSS中还有很多附加选择器

用法都差不多，具体用到，再说～

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

）

官方 Web 课程：

shishunfu · 发表于 2017-4-21 11:01:26

交作业

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>CSS选择器</title>
        <style type="text/css">
                * {/*通配符选择器用星号'*'该选择器可以与任何元素匹配，就像是一个通配符        */
                color:red;
                }
                html,body{        /*选择器分组用逗号','可以将任意多个选择器分组在一起*/
                        font-family: sans-serif, serif,cursive,fantasy,monospace;
                }
                .body{        /*类选择器用'.'*/
                        background-color: beige;
                        margin: 0;
                        padding: 0;
                        position: relative;
                }
                .slogan.en{        /*多类选择器 通过把两个(或两个以上)类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）*/
                        font-size: 16px;
                        color: blue;
                }
                h1{/*标签选择器 匹配文档树中该元素类型的每一个实例*/
                        height: 100%;
                        color: red;
                }
                #container{        /*Id选择器用'#'  只能在文档中使用一次，而且仅一次；ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表*/
                        width: 100%;
                        text-align: center;
                }  
                a{
                        color: green;
                }
/*属性选择器[]
[attribute]                        用于选取带有指定属性的元素。
[attribute=value]        用于选取带有指定属性和值的元素。
[attribute~=value]        用于选取属性值中包含指定词汇的元素。
[attribute|=value]        用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]        匹配属性值以指定值开头的每个元素。
[attribute$=value]        匹配属性值以指定值结尾的每个元素。
[attribute*=value]        匹配属性值中包含指定值的每个元素。

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

dreamdnj · 发表于 2017-2-20 17:13:08

受益匪浅！！

joker11111 · 发表于 2017-2-22 16:28:05

本帖最后由 joker11111 于 2017-2-22 16:29 编辑

        h1{
                font-size:33px;
        }
        section article h1{
                font-size:66px;
        }
        .red{
                color:#F00;
        }
        .blue{
                color:#06F;
        }
        aside .blue{
                color:black;
        }

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

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

不二如是 · 发表于 2017-2-22 20:03:39

joker11111 发表于 2017-2-22 16:28
如果希望更精确的设置，可以通过对选择器的父元素加以指定，父元素和子元素间，要用空格分开！

...

优质！

772317495 · 发表于 2017-2-28 10:17:26

看帖要养成回复的好习惯

SonOmiga · 发表于 2017-3-4 16:38:59

a540656809 · 发表于 2017-3-6 11:56:59

隐藏的内容引起了我的窥探欲望

a540656809 · 发表于 2017-3-6 11:57:16

。。。。。

345127857 · 发表于 2017-3-7 14:59:15

支持楼主！！

chaosllax · 发表于 2017-3-7 15:49:13

丶光明哥 · 发表于 2017-3-18 11:39:25

学习学习

不二如是 · 发表于 2017-3-18 12:11:58

丶光明哥发表于 2017-3-18 11:39
学习学习

欢迎学习～

白牙 · 发表于 2017-3-28 11:09:37

每日看5篇，锻炼好身体。

不二如是 · 发表于 2017-3-28 11:42:44

白牙发表于 2017-3-28 11:09
每日看5篇，锻炼好身体。

bamg bamg da

小剑剑 · 发表于 2017-4-28 10:57:06

又骗回复

lumber2388779 · 发表于 2017-5-4 10:05:50

鍗犳ゼ绛変氦浣滀笟

18813034116 · 发表于 2017-5-21 16:11:43

标签选择器，在编写样式的时候以标签名开头，
类选择器，使用前要先给元素添加类名，如class="new class"，在编写样式时以".样式名"开头；
id选择器，使用前给元素添加id名，如id="new id"，在编写样式时以"#id名"开头

晓月56 · 发表于 2017-6-27 23:02:58

一档起步。
玫瑰：01--标签+类选择器中的color:F#66F;
02--类选择器部分，已经用了颜色和大小的组合，可以这么理解不；

snip-0023-201706272301

<!doctype html>
<html>
<head>
        <meta charset="utf-8">
        <title>选择器</title>
        <style type="text/css">
                        #title{
                                        font-size:66px;
                        }
                                #m-title{
                                                font-size:55px;
                                }
                                #s-title{
                                                font-size:44px;
                                }
                                #a-title{
                                                font-size:33px;
                                }                        
                        .red{
                                                                color:#f00;
                        }
                        .blue{
                                                                color:#06f;
                        }
                        section article h1{
                                        
                                        font-size:66px;
                        }<!--指定元素的样式，组合-->
                        aside .blue h1{
                                        color:#0F0;
                        }<!--没有更改颜色？，还有权限抢占，儿子和老子-->
        </style>
</head>
<body>
        <header>
                        <h1 class="red" id="title">FishC</h1>
        </header>
        <section>
                        <h1 class="blue"id="m-title">Fishc</h1>
                        <article>
                                <h1 class="red" id="s-title">fishc</h1>
                        </article>
        </section>
        <aside>
                        <h1 class="blue" id="a-title">fishc</h1>
        </aside>
</body>

</html>

ganglianhuo2 · 发表于 2017-7-6 12:20:54

非常好

账号		自动登录	找回密码
密码			立即注册

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

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

评分

本帖被以下淘专辑推荐:

点评

点评

评分

点评

评分

点评