css复杂选择器
父子选择器
<!-- （1）父子选择器/派生选择器 */ -->
<!-- 只用标签选择器选择，让123的那个span背景颜色为红色，234不变 -->
<!--
<div>
<span>span123</span>
</div>
<span>span234</span>
-->
<!-- 只用标签选择器选择，让123的那个span背景颜色为红色，234不变 -->
<!-- 选择器的每一个父子层级都没必要是标签选择器，他们只是代表了父子关系 -->
<!--
<div class="wrapper">
<strong>
<em>em123</em>
</strong>
</div>
<em>em234</em>
-->
<!-- （1）父子选择器/派生选择器 */ -->
/* （1）父子选择器/派生选择器 */
/* 选中的元素依旧是最后那个标签，前面的是他的修饰条件，父级的修饰条件 */
/* 选择器和选择器之间加一个空格就是父子选择器 */
/* 选择器的每一个父子层级都没必要是标签选择器，他们只是代表了父子关系 */
/*
div span{
background-color: red;
}
div strong em{
background-color: red;
}
*/
/* 选择器的每一个父子层级都没必要是标签选择器，他们只是代表了父子关系 */
/*
.wrapper em{
background-color: red;
}
*/
/* （1）父子选择器/派生选择器 */
复杂结构 浏览器底层遍历父子选择器方法
<!-- 复杂结构 -->
<!--
<section>
<div>
<p>
<a href="">
<span></span>
</a>
</p>
<ul>
<li>
<a href="">
<span>
<em>1</em>
</span>
</a>
</li>
<li>
<p></p>
</li>
</ul>
</div>
<a href="">
<p>
<em>2</em>
</p>
<div></div>
</a>
</section>
-->
<!-- 复杂结构 -->
/* 复杂结构 */
/*
section div ul li a em{
background-color: red;
}
*/
/* 问题：当浏览器面对以上一串父子选择器时是从左往右还是从右往左挨个排查？目的应该是快 */
/* 浏览器底层遍历父子选择器就是自右往左的 ；这样是最快的*/
/* 复杂结构 */
直接子元素选择器
<!-- /* (2)直接子元素选择器 */ -->
<!--
<div>
<em>1</em>
<strong>
<em>1</em>
</strong>
</div>
-->
<!-- /* (2)直接子元素选择器 */ -->
/* (2)直接子元素选择器 直接父子关系*/
/*
div>em{
background-color: red;
}
*/
/* (2)直接子元素选择器 直接父子关系*/
并列选择器
<!-- /* （3）并列选择器 */ -->
<!-- /* 让内容为2的div背景颜色变为红色 */ -->
<!--
<div>1</div>
<div class="demo">2</div>
<p class="demo">3</p>
-->
<!-- /* （3）并列选择器 */ -->
/* （3）并列选择器 */
/* 让内容为2的div背景颜色变为红色 */
/* 中间那个元素是有他自己的独特性的：他又叫div又有class */
/* 以上两个特性可以组合到一起变成一个新的选择器：并列选择器 */
/* 两个修饰条件限制一个元素，不加空格 */
/* 即用多个限制条件选定一个元素，并且不加空格 */
/*
div.demo{
background-color: red;
}
*/
/* （3）并列选择器 */
分组选择器
<!-- （4）分组选择器，中间加逗号 -->
<!-- 然他们三个有共同的属性，都让他们的背景颜色变为红色 -->
<!--
<em>1</em>
<strong>2</strong>
<span>3</span>
-->
<!-- （4）分组选择器，中间加逗号 -->
<!-- 利用分组选择器减少代码量；降低冗余 -->
<!--
<div class="demo1"></div>
<div class="demo2"></div>
-->
<!-- 利用分组选择器减少代码量；降低冗余 -->
/* （4）分组选择器，中间加逗号 */
/* 这三个选择器会共用一个代码块 */
/*
em,
strong,
span{
background-color: red;
}
*/
/* （4）分组选择器，中间加逗号 */
/* 利用分组选择器减少代码量；降低冗余 */
/*
.demo1,
.demo2{
width:100px;
height:100px;
}
.demo1{
background-color: red;
}
.demo2{
background-color: green;
}
*/
/* 利用分组选择器减少代码量；降低冗余 */
css权重计算
<!-- 比较css权重 -->
<!--
<div class="classDiv" id="idDiv">
<p class="classP" id="idP">1</p>
</div>
-->
<!-- 比较css权重 -->
/* 比较css权重 */
/* 只要写在同一横行的选择器，就把他权重值相加即可 */
/* 若权重一样，后面的代码会覆盖前面的 */
/* 100 1 */
/*
#idDiv p{
background-color: red;
}
*/
/* 10 10 */
/*
.classDiv .classP{
background-color: green;
}
*/
/* 1 10 100 */
/*
div .classP#idP{
background-color: yellow;
}
*/
/* 计算机中正无穷+1就是比正无穷大1 */
/* 1 100 1 10 Infinity */
/*
div#idDiv p.classP{
background-color:lightpink!important;
}
*/
/* 1 10 100 Infinity */
/*
div .classP#idP{
background-color: magenta!important;
}
*/
/* 计算机中正无穷+1就是比正无穷大1 */
/* 比较css权重 */
css属性
font-size
<!-- css属性font-size -->
<!-- <div>举个例子</div> -->
<!-- css属性font-size -->
/* css属性font-size 设置字体大小 */
/* 默认的浏览器字体大小为16px */
/* 但是互联网一些页面一般是12px或者14px，很少用16px */
/* 任何一个编程软件，他设置字体大小的时候设置的一定是字体的高度 */
/*
div{
font-size:16px;
}
*/
/* css属性font-size */
font-weight
<!-- css属性font-weight -->
<!-- <div>举个例子</div> -->
<!-- css属性font-weight -->
/* css属性font-weight */
/* 默认值是normal */
/* lighter 细体；normal(400);bold(700) 粗一点；bolder 在粗 */
/* 数字表示：100 200---900 */
/* 浏览器里面有很多的字体包，这个字体能不能被加成bolder或者其他，取决于这个字体包里面有没有更粗的样式 */
/* strong */
/*
div{
font-weight:bold;
}
*/
/* css属性font-weight */
font-style
<!-- css属性font-style -->
<!-- <div>举个例子</div> -->
<!-- css属性font-style -->
/* css属性font-style */
/* em 斜体*/
/*
div{
font-style:italic;
}
*/
/* css属性font-style */
font-family
<!-- css属性font-family -->
<!-- <div>举个例子</div> -->
<!-- css属性font-family -->
/* css属性font-family 字体*/
/* 默认字体并不常用，一般我们都得重新设置 */
/* 互联网常用的是arial字体 乔布斯发明的 */
/*
div{
font-family:arial;
}
*/
/* css属性font-family */
color
<!-- css设置字体颜色 color -->
<!-- <div>举个例子</div> -->
<!-- css设置字体颜色 color -->
/* css设置字体颜色 color */
/* 设置颜色有三种方式
1.纯英文单词
2.颜色代码 16进制
人的视觉神经里面识别的是三原色；
三原色一般分两种：
（1）光学三原色：红 绿 蓝；
（2）美术中红、黄、蓝定义为色彩三原色；C（青绿Cyan）、M（品红Magenta）、Y(黄Yellow)是习惯上说的红、黄、蓝
颜色代码：#ff4400
每两位代码代表一个颜色，每两位都代表16进制数 ;
r g b
00-ff代表红色的饱和程度 00-ff绿 00-ff蓝
将他们拼到一起，前面加一个#，就代表颜色代码；
三原色可以简写：每两位代表一个颜色，如果颜色代码的每两位都是重复的就可以简写成3位；#ff4400->#f40
3.颜色函数 rgb(0-255,0-255,0-255);
*/
/*
div{
color:red;
}
*/
/* css设置字体颜色 color */
border
<!-- css属性：border 给容器加一个外边框 -->
<!-- <div>举个例子</div> -->
<!-- css属性：border 给容器加一个外边框 -->
<!-- border 四个边框沿对角线平分 -->
<!-- <div></div> -->
<!-- border 四个边框沿对角线平分 -->
<!-- border利用平分性质画三角 -->
<!-- <div></div> -->
<!-- border利用平分性质画三角 -->
/* css属性：border 给容器加一个外边框 */
/* border是一个复合属性 */
/* border:边框粗细 border展示形式 边框颜色 */
/* border:border-width border-style border-color */
/* solid:实体 实心的；dotted:点状虚线；dashed:条状虚线 */
/*
div{
border:1px solid #000;
border-width:20px;
border-style:solid;
}
*/
/* css属性：border 给容器加一个外边框 */
/* border 四个边框沿对角线平分 */
/* 四周都设置border时，四个边框沿对角线平分 */
/*
div{
width:2px;
height:2px;
border:100px solid #000;
border-left-color:red;
border-top-color:green;
border-right-color:blue;
}
*/
/* border 四个边框沿对角线平分 */
/* border利用平分性质画三角 */
/* 宽高都设置为0，便会出现四个三角 */
/* 只留一个角，即只留一个边的边框，其他边框颜色改为透明色：transparent */
/*
div{
width:0px;
height:0px;
border:100px solid #000;
border-left-color:transparent;
border-top-color:transparent;
border-right-color:transparent;
}
*/
/* border利用平分性质画三角 */
953
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
