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页左右,首先是介绍了什么是重构并举了两个简 ...
随机推荐
- windows-sam文件
sam文件是账号密码的数据库文件 存放位置C:\Windows\System32\Config\sam
- Vue框架中有关 computed的相关知识
1,传统使用computed属性的方式如下: 注意:此时如果我们点击修改的时候会有如下警告(表示computed属性不可以修改,如果非得修改,我们应该如下下图所示操作) 2,修改computed属性的 ...
- Linux系统下追加记录到文件中的实例代码解读
今日阅读Linux程序设计第四版,找到一个使用mmap函数的实例 问题描述 该程序主要定义一个结构体,随后利用mmap,msync以及munmap函数对其进行内容追加,定位以及修改内容的操作. 先自己 ...
- C# 报表接口样例，简单实用
//连接视图名称,视图在数据库写好<%@ WebHandler Language="C#" Class="GetwmsReport" %> usin ...
- 225-基于XCVU440T的多核处理器多输入芯片验证板卡
225-基于XCVU440T的多核处理器多输入芯片验证板卡 基于XCVU440T的多核处理器多输入芯片验证板卡 一.板卡概述 本板卡系我司自主研发的基于6U CPCI处理板,适用于多核处理器多输入 ...
- 论文阅读： CCF A 2021 PROGRAML：用于数据流分析和编译器优化的基于图的程序表示 （PMLR）
Motivation: 编译器实现是一项复杂而昂贵的活动.出于这个原因,人们对使用机器学习来自动化各种编译器任务产生了极大的兴趣,大多数工作都将注意力限制在选择编译器启发式或做出优化决策.现有的基 ...
- 【26期】如何判断一个对象是否存活?(或者GC对象的判定方法)?
这个问题,面试被问到的概率还是很大的.以下关于 如何判断一个对象是否存活 的回答,完全参照<深入理解Java虚拟机>一书,有需要的可以看书学习.以下是题目解析 判断对象是否存活的算法包括: ...
- （jmeter笔记）jmeter用正则匹配响应数据，满足两个条件
方法1.用正则匹配响应数据,满足两个条件 \{[^}]+?"Id":(\d*)[^}]+?"Picking"[^}]+?\} 方法2. \{"Pick ...
- ORA-06502: PL/SQL: numeric or value error: character string buffer too small
oracle执行报错 ORA-06502: PL/SQL: numeric or value error: character string buffer too small ORA-06512: a ...
- xpath、css元素定位
xpath 1.利用元素唯一属性 //*[@id='xxx'] 2.属性与逻辑结合 解决元素之间多个相同属性重名问题 //*[@id='xxx' and @class='xxx'] 3..//*[te ...