0 0 2 3 - 选择器之谜思
本帖最后由 不二如是 于 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>
效果图：
**** Hidden Message *****
CSS中还有很多附加选择器
用法都差不多，具体用到，再说～
这位鱼油，如果喜欢本帖子，请订阅 专辑-->（传送门）（不喜欢更要订阅{:10_278:} ）
官方 Web 课程：
https://www.bilibili.com/video/BV1QW411N762 交作业
<!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;
}
/*属性选择器[]
用于选取带有指定属性的元素。
用于选取带有指定属性和值的元素。
用于选取属性值中包含指定词汇的元素。
用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
匹配属性值以指定值开头的每个元素。
匹配属性值以指定值结尾的每个元素。
匹配属性值中包含指定值的每个元素。
后代选择器 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>
受益匪浅！！ 本帖最后由 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;
}
如果希望更精确的设置，可以通过对选择器的父元素加以指定，父元素和子元素间，要用空格分开！
','是行不通滴～，这就是后代选择器 感觉好方便{:10_298:} joker11111 发表于 2017-2-22 16:28
如果希望更精确的设置，可以通过对选择器的父元素加以指定，父元素和子元素间，要用空格分开！
...
优质！ 看帖要养成回复的好习惯 {:9_241:} 隐藏的内容引起了我的窥探欲望 。。。。。 {:10_243:}支持楼主！！ 123 学习学习 丶光明哥 发表于 2017-3-18 11:39
学习学习
欢迎学习～ {:10_279:}每日看5篇，锻炼好身体。 白牙 发表于 2017-3-28 11:09
每日看5篇，锻炼好身体。
bamg bamg da 又骗回复
鍗犳ゼ绛変氦浣滀笟 标签选择器，在编写样式的时候以标签名开头，
类选择器，使用前要先给元素添加类名，如class="new class"，在编写样式时以".样式名"开头；
id选择器，使用前给元素添加id名，如id="new id"，在编写样式时以"#id名"开头 一档起步。
玫瑰：01--标签+类选择器中的color:F#66F;
02--类选择器部分，已经用了颜色和大小的组合，可以这么理解不；
<!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> 非常好