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页左右,首先是介绍了什么是重构并举了两个简 ...
随机推荐
- 微信小程序分享百度网盘文件的实现思路
需求: 在小程序中点击按钮,获取百度网盘文件的下载地址. 实现思路: 1.网盘文件的下载地址,使用官方API只能自己下载,别人通过dlink无法下载,所以采用网页端生成接口. 好处是可以自定义提取码, ...
- SQLServer 编程总结
case的用途 case语句有四个关键字,缺一不可,分别是:case when then end,另外还有一个else.case 后面跟字段名(当在when后面出现字段名时,case里不能写出来),w ...
- blob对象excel文件上传下载
页面结构 <el-upload style="width: 93%" action="/stap/systemManage/weakPassword/excelIm ...
- array copy() 的简单使用
源码: public static native void arraycopy(Object src, int srcPos, Object dest, int destPos,int length) ...
- 七、25.创建user子分支并把代码推送到码云仓库中
打开终端点击+新建一个终端 注意 :如下操作都是在2:powershell下进行 先来检查一下当前所处分支 git branch 我们应该把这些代码都写到user分支上 接下来应该把这些代码统一迁移到 ...
- 安卓调试打包错误Error executing aapt: Return code -1073741819 Error while running zipalign
之前开发完的安卓app项目,再次打开,突然抽风报错. 1.调试运行报错:Error executing aapt: Return code -1073741819 2.打包失败报错: Error wh ...
- 杭电oj Lowest Common Multiple Plus
Problem Description 求n个数的最小公倍数. Input 输入包含多个测试实例,每个测试实例的开始是一个正整数n,然后是n个正整数. Output 为每组测试数据输出它们的最 ...
- iOS开发之长按浮动操作选择项
我们一般会有长按一段文字显示气泡浮动操作选项的需求 我们常用的方法如下 cut: copy: select: selectAll: paste: delete: _promptForRep ...
- MYSQL 5.7及以上【ONLY_FULL_GROUP_BY】报错和解决方法
由于同事安装的Docker,就在docker上举例子吧,和非docker的操作方式都一样,只是路径上和重启方式可能不同 1,进入容器 docker exec -it xxxx(你的mysql容器名称) ...
- Web入门实战
Web入门实战 - [湖湘杯 2021 final]Penetratable 难度:**** 查看题解 - [GKCTF 2021]easycms 难度:** 查看题解