css 选择器再学一遍记录一下*1
1 <!DOCTYPE html>
2 <html>
3 <HEAD>
4
5 <style>
6 *{font-size: 12px; padding: 5px;}
7 #css1 P{ /*优先级3*/
8 color:blue
9 }
10
11 #css1>P{
12 color:orange /*优先级2*/
13 }
14 #css1 .baby{color:seagreen} /*优先级1*/
15
16 #css1+p{color:gray} /*相邻元素选择器：只影响div后面的第一个p元素*/
17 .codeArea{ /*源码区域的样式*/
18 background-color: black;
19 color:chartreuse;
20 text-transform: lowercase;
21
22 padding: 10px;
23 }
24 .codeArea legend{color:black;background-color: chartreuse;font-size:small;font-weight: bold;}
25
26 /*属性选择器语法，优先级相同：后定义的会覆盖先定义的内容*/
27
28 #div_Css2 div[class~="c1"]{
29 color:green;/*选择有class这个属性，并且属性值中包含了c1这个值的div，并设置字体颜色为green*/
30 }
31 #div_Css2 div[id]{
32 color:blue;/*选择所有有id这个属性的div，并设置字体颜色为blue*/
33 }
34
35 #div_Css2 div[id="Dc01"]{
36 color:red;/*选择有id这个属性，并且ID为Dc01的div，并设置字体颜色为red*/
37 }
38
39 #div_Css2 div[id*="c0"]{
40 color:yellow;/*选择有id这个属性，并且ID的值中包含了c0这2个字符的div，并设置字体颜色为yellow，背景色为slategray*/
41 background-color: slategray;
42
43 }
44
45 #div_Css2 div[id|="Dc01"]{
46 color:tan;/*选择有id这个属性，并且ID的值中包含了c0这2个字符的div，并设置字体颜色为yellow，背景色为slategray*/
47 background-color: black;
48
49 }
50
51
52
53
54
55 </style>
56 </HEAD>
57 <BODY>
58 <fieldset class="codeArea" >
59 <legend>后代选择器，子选择器，相邻选择器</legend>
60 <code class="">
61 #css1 P{ /*后代选择器，DIV下面所有子级中的P元素，且不分层级：优先级3*/
62 color:blue
63 }
64 <br>
65 #css1>P{
66 color:orange /*指定了HTML标签的子选择器：优先级2*/
67 }
68 <br>
69
70 #css1 .baby{color:seagreen} /*指定了class属性的子选择器：优先级1*/
71 <br>
72 #css1+p{color:gray} /*相邻元素选择器：只影响div后面的第一个p元素*/
73 <br>
74 .codeArea{ /*源码区域的样式*/
75 background-color: black;
76 color:chartreuse;
77 text-transform: lowercase;
78 margin: 10px;
79 padding: 10px;
80 }
81 </code>
82 </fieldset>
83 <DIV id="css1">
84 <P>我在DIV,id 是 #css1的里面，第一个，是DIV的亲儿子,用到了DIV>P 这个样式</P>
85 <P>我在DIV,id 是 #css1的里面，第二个，是DIV的亲儿子,用到了DIV>P 这个样式</P>
86 <P class="baby">我在DIV,id 是 #css1的里面，第三个，是他的亲儿子，但我有指定class为baby，我是一个倍受宠爱的儿子，所以我额外享受了#css1 .baby这个指定的样式</P>
87 <fieldset>
88 <p>我在DIV子元素fieldset的里面，是fieldset的第一个p元素，同时也是DIV，id 是 #css1的后代，所以用到了后代选择器DIV P这个样式</p>
89 </fieldset>
90 </DIV>
91 <P>我在DIV,id 是 #css1的外面，第一个p标签，是DIV的邻居，用到了div+p 这个样式</P>
92 <P>我在DIV,id 是 #css1的外面，第二个p标签，已经不是DIV,id 是 #css1的邻居了，整个页面都没有管我，所以我就是默认的黑色了</P>
93 <hr>
94
95 <fieldset class="codeArea" >
96 <legend>属性选择器</legend>
97 <code >
98 /*属性选择器语法，优先级相同：后定义的会覆盖先定义的内容*/
99 <br>
100 #div_Css2 div[class~="c1"]{
101 color:green;/*选择有class这个属性，并且属性值中包含了c1这个值的div，并设置字体颜色为green*/
102 } <br>
103 #div_Css2 div[id]{
104 color:blue;/*选择所有有id这个属性的div，并设置字体颜色为blue*/
105 } <br>
106
107 #div_Css2 div[id="Dc01"]{
108 color:red;/*选择有id这个属性，并且ID为Dc01的div，并设置字体颜色为red*/
109 } <br>
110
111 #div_Css2 div[id*="c0"]{
112 color:yellow;/*选择有id这个属性，并且ID的值中包含了c0这2个字符的div，并设置字体颜色为yellow，背景色为slategray*/
113 background-color: slategray;
114
115 } <br>
116
117 #div_Css2 div[id|="Dc01"]{
118 color:tan;/*选择有id这个属性，并且ID的值中包含了c0这2个字符的div，并设置字体颜色为yellow，背景色为slategray*/
119 background-color: black;
120
121 } <br>
122
123
124
125 <br>
126
127 </code>
128 </fieldset>
129 <div id="div_Css2">
130 <div id="Dc01" class="c1 c2 c3">我有一个ID属性,class="c1 c2 c3",id="Dc01" </div>
131 <div id="Dc02" class="c1 c3">我有一个ID属性class="c1 c3"</div>
132 <div id="Dc03" class="c1 c2 ">我有一个ID属性 class="c1 c2 "</div>
133 <div class="c1 c2 ">我没有ID属性,我有一个ID属性class="c1 c2 "</div>
134 <div>我没有ID属性，也没有class属性</div>
135 <div id="Dc01-01" >我有一个ID属性,id="Dc01-01" </div>
136 <div class="c11 c2">我没有ID属性，class="c11 c2"</div>
137 <div class="c1 c2">我没有ID属性，class="c1 c2"</div>
138 </div>
139 </BODY>
140 </html>
css 选择器再学一遍记录一下*1的更多相关文章
- 【CSS选择器】理解汇总和记录
1.选择器中符号含义汇总(这部分包含了对选择器的通用理解): 1.1.多元素组合符号:(共6个,一个是CSS3的)(适用所有元素:ID组合,类组合,属性组合,标签组合,伪类组合,以及以上所有混合组合) ...
- CSS选择器 + Xpath + 正则表达式整理（有空再整理）
选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname 选择 id="firstna ...
- CSS选择器的一些记录
选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname 选择 id="firstna ...
- CSS选择器【记录】
1.基本选择器 2.组合选择器 3.伪类选择器 4.伪元素选择器 CSS选择器规定了CSS规则会应用到哪些元素上 1.基本选择器 基本选择器:通配选择器.元素选择器.类选择器.ID选择器.属性选择器 ...
- python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- 牢记 31 种 CSS 选择器用法
原文 The 30 CSS Selectors you Must Memorize 由 Jeffrey Way 发表于 2011 年 6 月,介绍了 30 种最常用的 CSS 选择器用法,多加了一种, ...
- Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- 30类css选择器
大概大家都知道id,class以及descendant选择器,并且整体都在使用它们,那么你正在错误拥有更大级别的灵活性的选择方式.这篇文章里面提到的大部分选择器都是在CSS3标准下的,所以它们只能在相 ...
- Css - 选择器和样式
Css - 选择器和样式 标签选择器 即使用html标签作为选择对象 <style> div{ background:red; } </style> <div&g ...
- 深入理解CSS选择器优先级
题外话 今天把 <CSS REFACTORING>(中文名叫<CSS重构:样式表性能调优>)电子书粗略的浏览了一遍,这本书很薄,150页左右,首先是介绍了什么是重构并举了两个简 ...
随机推荐
- Spring整合Mybatis原理
Spring整合Mybatis原理 目录 Spring整合Mybatis原理 1.@MapperScan注解发挥作用 1.1.导入MapperScannerRegistrar类 1.1.2.执行Imp ...
- (unsigned)short溢出后隐式转换为int
同学被面试官问到一个细节中的细节,虽然个人觉得意义不大,但还是好奇并在和同学一起实验后搞清楚了,记录一下 如下: int main() { unsigned short a = 65535, b = ...
- opc ua与opc da区别
opc ua与opc da区别_OPC,OPCDA,OPCUA傻傻搞不清楚,走过路过不妨看一看 转自:https://blog.csdn.net/weixin_39624774/article/det ...
- Educational Codeforces Round 137 (Rated for Div. 2) - F. Intersection and Union
(线段树 + 思维)or 动态dp [Problem - F - Codeforces](https://codeforces.com/contest/1743/problem/E) 题意 数轴上有 ...
- Educational Codeforces Round 137 (Rated for Div. 2) - E. FTL
DP Problem - E - Codeforces 题意 有个 BOSS 有 \(H\;(1<=H<=5000)\) 血量,\(s\) 点防御 有两种武器可用攻击 BOSS,伤害分别为 ...
- wandb: Network error (ConnectionError), entering retry loop.
超算使用wandb总是连接超时,设置为offline模式即可 import os import wandb os.environ["WANDB_API_KEY"] = 'KEY' ...
- postman连接mysql数据库
转载:https://www.cnblogs.com/pengxiaojie/p/13495237.html 1.安装 2.启动服务 3.执行sql语句 安装: 想要postman连接mysql,需要 ...
- 基于线程的并行-Python 并行编程学习笔记(一)
前言 最近写一些模拟集群智能的算法,虽然机制简单,但是随着个体的增加,设计的计算量就比较大了,尤其是加上matplotlib进行动态展示,使得运算量骤增,看着画面也比较卡.之前想把算法转化成c++代码 ...
- UML 组成 1
常用关系: 关联关系使用一条直线表示,比如 A与B关联 用于描述不同类的对象之间的结构关系,将多个类的实例联系在一起 是一种静态关系,基本与程序的运行没有关系 比如,部门与员工的关系,就是关联关系 ...
- 神奇的Object.assign()
Object.assign() 方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. 1.Object.assign()可以在对象为一层的时候,实现简单的"深拷 ...