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页左右,首先是介绍了什么是重构并举了两个简 ...
随机推荐
- Solon2 与 Spring Boot 的区别
1.与 Springboot 的常用注解比较 Solon 2.2.0 Springboot 2.7.8 说明 @Inject * @Autowired 注入Bean(by type) @Inject( ...
- python中操控excel的几个库：xlwt,xlrd,xlutils
一.xlrd和xlwt模块介绍 xlrd模块提供在任何平台上从excel电子表格(.xls和.xlsx)中提取数据的功能,xlwt模块提供生成与Microsoft Excel 95 到2003版本兼容 ...
- asp多模块功能代码，单调用插入的case方法
function getmodule(arg) select case arg case "pinyin" aaa="123" %><!--#插入页 ...
- 关于js对象的键
面试的时候,多次被问到Object和Map的区别,我都没答上,我以为可能问原理的可能多一些... 于是今天就仔细地看了一下Object和Map的区别.网上各文章都说Object的键只能是字符串或Sym ...
- uniapp开发使用 web-view APP 与 H5 (vue)通信
需求:这边是uniapp开发的APP 需要内嵌H5(vue),就得使用web-view跳转网页 H5端 在vue的index,html文件引入web-view的插件 <script type= ...
- Day 13 13.2 requests之请求参数与请求体
请求参数与请求体参数 一.什么是params参数(请求参数) get 方法是可以向服务器发送信息的,除了可以请求需要的页面之外,也可以发送我们指定的内容,这就是通过 params 参数实现的 requ ...
- Note Taking App Comparison: Notesnook vs Joplin
I have used many note-taking apps, including Notion, oneNotes, Obsidian, Sublime Text, etc. Here I w ...
- JavaSE总结（1）
Java发展历史.HelloWorld.常量.变量类型转换.运算符.方法(函数)1.jdk版本: jdk1.2---J2EE/J2SE/J2ME jdk1.5---JavaSE/JavaE ...
- [Vs和Reshaper]Vs Studio配合Resharper插件,某些快捷键无法使用的情况,Alt+F7
一直使用Alt+F7来查找变量或者类型的使用位置 家里面的电脑某一天不可以用了,按了没有任何反应 后来查到竟然是被别的软件快捷键覆盖了 Alt+F7是被Nvidia GeForce覆盖了,关掉它或者修 ...
- SAP MD04屏幕显示增强
需求 在看物料MRP结果的时候,业务人员想要看到工单批次,工单批次是我们这边工单下达后传输到其他系统,然后由其他系统回传回来的. 开发步骤 主要使用二代增强出口:M61X0002 创建增强项目 事务码 ...