1500字范文 > CSS笔记二-选择器背景相关属性元素显示模式 CSS三大特性 chrome调试工具 PXcook使用

CSS笔记二-选择器背景相关属性元素显示模式 CSS三大特性 chrome调试工具 PXcook使用

时间：2019-09-28 01:55:16

一、复合选择器

1、后代选择器

根据HTML标签的嵌套关系，选择父元素后代中满足条件的子元素；

选择器语法：选择器1 选择器2 {css}

结果：在选择器1中所找到标签的后代（儿子、孙子、重孙子....）中，找到满足选择器2的标签，设置样式；

注意点：后代包括：儿子、孙子、重孙子....

后代选择器中，选择器与选择器之间通过空格隔开；

<style>.father p{color: red;}</style><body><div class="father"><p>小姐姐</p></div><p>小可爱</p></body>

2、子代选择器

作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素；

语法：选择器1 > 选择器2{CSS}

结果：在选择器1中找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式；

注意点：子代只包括儿子；

子代选择器中，选择器与选择器之间通过>隔开；

<style>/* 子代选择器 */.father>p{color: red;}</style><body><div class="father"><p>儿子</p><div><p>孙子</p></div></div><p>兄弟</p></body>

3、并集选择器

作用：同时选中多组标签，设置相同的样式；

语法：选择器1，选择器2{ css }

结果：找到选择器1和选择器2选中的标签，设置样式；

注意点：并集选择器中每组选择器之间通过，（逗号）分隔；

并集选择器中的每组选择器可以是基础选择器或者复合选择器；

并集选择器中的每组选择器通常一行写一个，提高代码可读性；

<style>/* 并集选择器 */.father > p , span , a{color: red;}</style><body><div class="father"><p>儿子</p><div><p>孙子</p></div></div><span>我是span</span><br><a href="#">我是a</a><p>兄弟</p></body>

4、交集选择器

作用：选中页面中同时满足多个选择器的标签；

语法：选择器1选择器2 { css }

结果：（既又原则）找到页面中既被选择器1选中，又能被选择器2选中的标签，设置样式；

注意点：交集选择器中的选择器之间是紧挨着的，没有东西分隔；

交集选择器中如果有标签选择器，标签选择器必须写在最前面；

<style> p.red{color: red;}</style><body><div class="father"><p>儿子</p><div class="red"><p>孙子</p></div></div><p class="red">兄弟</p>

5 、emmet语法

<div></div><div class="red"></div><div id="one"></div><p class="red" id="one"></p><father><son></son></father><ul><li>我是文本</li></ul><ul><li>我是文本</li><li>我是文本</li><li>我是文本</li></ul>

6、hover伪类选择器

作用：选中鼠标悬停在元素上的状态。设置样式；

语法：选择器:hover{ css }

注意点：伪类选择器选中的元素的某种状态；

a{text-decoration: none;color: black;}a:hover{color:chocolate;text-decoration:underline;}<a href="#">我是一个a标签</a>

二、背景相关属性

1、背景颜色

属性名：background-color（bgc）

颜色取值：关键字、rgb表示法、rgba表示法、十六进制表示法.....

注意点：背景颜色默认是透明：rgba(0,0,0,0)、transparent

背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色；

2、背景图片

属性名：background-image(bgi)

属性值：background-image: url('图片路径')；

注意点：背景图片中的url中可以省略引号；

背景图片默认在水平和垂直方向是平铺的；

背景图片仅仅是给盒子起到一个装饰效果，类似于背景颜色，但不能撑开盒子；

/* 背景颜色背景图片*/.father{width: 500px;height: 500px;background-color: cornflowerblue;background-image: url(../images/macroperspective-6503070_1920.jpg);}.son{width: 200px;height: 200px;background-color:darkred;background-image: url(../images/honey-bee-6506809_1920.jpg);}

3、背景平铺

属性名：background-repeat(bgr)

属性值：

（默认值）水平和垂直方向都平铺 repeat

不平铺 no-repeat

水平方向平铺 repeat-x

垂直方向平铺 repeat-y

4、背景位置

5、背景相关属性连写

属性名：background

属性值：单个属性值的合写，取值之间以空格隔开；

顺序：background：color image repeat position

省略问题：可以按照需求省略；

特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background：url()

注意点：如果需要设置单独的样式和连写：

要么把单独的样式写在连写的下面。要么把单独的样式写在连写的里面；

6、img标签和背景图片的区别

需求：需要在网页中展示一张图片的效果

方法一：直接用img标签即可

img标签是一个标签，不设置宽高会默认以原尺寸显示；

方法二：div标签 + 背景图片

需要设置div的宽度，因为背景图片只是装饰div的样式，并不能撑开div标签；

三、元素显示模式

1、块级元素

属性：display：block

显示特点：独占一行（一行只能显示一个）；

宽度默认是父元素的宽度，高度默认由内容撑开；

可以设置宽高；

代表标签：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer.....

2、行内元素

属性：display：inline

显示特点：一行可以显示多个；

宽高可以由内容撑开；

不可以设置宽高；

代表标签：a、span、b、u、i、s、strong、ins、em、del....

3、行内块元素

属性：display：inline-block

显示特点：一行可以显示多个，可以设置宽高；

代表标签：input、textarea、button、select.....

特殊情况：img标签内有行内块元素的特点，但是Chrome调试工具中显示结果是inline;

4、元素显示模式转换

目的：改变元素默认的显示特点，让元素符合布局要求；

display：block 转换成块级元素

display：inline-block 转换成行内块元素

display：inline 转换成行内元素

5、HTML嵌套规范注意点

5.1块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等....

但是p标签中不要嵌套div、p、h 等块级元素；

5.2 a标签内部可以嵌套任意元素，但是，a标签不要再嵌套a标签；

6、居中方法总结

四、CSS三大特性

1、继承性

特性：子元素有默认继承父元素的特点（子承父业）

可以继承的常见属性：color、font-style、font-weight、font-size、font-family、text-indent、

text-align、line-height......

可以通过调试工具判断样式是否可以继承；

应用：可以在一定程度上减少代码；

常见应用场景：直接给ul标签设置list-style:none 属性，从而去除列表默认的小圆点样式；

直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小；

继承失效的特殊情况：

如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式；

a标签的color会继承失效；

h系列标签的font-size会继承失效；

div的高度不能继承，但是宽度有类似于继承的效果；

2、层叠性

特性：给同一个标签设置不同的样式，此时样式会层叠叠加，最后共同作用在标签上；

给同一个标签设置相同的样式，此时样式会层叠覆盖，最后写在最后的样式会生效；

注意点：当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果；

3、优先级

不同选择器具有不同的优先级，优先级高的会覆盖优先级低的样式

继承 <通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

注意点: !important 写在属性值的后面,分号前面;

!important不能提升继承的优先级;只要是继承优先级最低;

实际开发中不建议使用 !important.

3.1、权重叠加计算

<style>/* 行内样式的个数， id选择器的个数，类选择器的个数，标签选择器的个数按位依次比较*//* 0 , 1 , 0 , 1 */div #one{color: orange;}/* 0 , 0 , 2 , 0 */.father .son{color: skyblue;}/* 0 , 0 , 1 , 1 */.father p{color: purple;}/* 0 , 0 , 0 , 2 */div p{color: pink;}</style><body><div class="father"><p class="son" id="one">我是一个标签</p></div></body>

3.2、权重计算案例

权重计算解题步骤：

1：先判断选择器是否能直接选中标签，如果不能直接选中则是继承，优先级最低，直接pass,

2：通过权重计算公式，判断谁权重最高；

注意点：实际开发中选择标签要精准，尽量避免多个选择器同时选中一个标签的情况；

0200#father #son{color: blue;}0111#father p.c2{color: black;}0022div.c1 p.c2{color: red;}0100 继承#father{color: green !important;}0111 继承div#father.c1{color: yellow;}</style><body><div id="father" class="c1"><p class="c2" id="son">我是一个标签</p></div></body>

0002div div{color: yellow;}0001div{color: violet;}</style><body><div><div><div>颜色</div></div></div></body>

<style> 0021.c1 .c2 div{color: blue;}0101div #box3{color: green;}0101#box1 div{color: hotpink;}权重一样，谁在下面谁说了算</style><body><div id="box1" class="c1"><div id="box2" class="c2"><div id="box3" class="c3">什么颜色</div></div></div></body>

<style>都是继承，子承父业，所以看父元素样式继承，可以直接选中p标签div p{color: red;}继承，不可以直接选中p标签.father{color: blue;}</style><body><div class="father"><p class="son"><span>文字</span></p></div></body>