1.上下文选择器/层级选择器

css语法表达

  1. 1.子元素：>  
  2. 2.后代元素: 空格
  3. 3.相邻兄弟：+
  4. 4.所有兄弟：~

层级：>,空格

平级：+，~

2.选择器权重

页面元素：标签+属性 样式规则：选择器{声明}

#

1.选择器的权重,计算过程

  1. <div class="a">
  2.    <h1 id="b" class="c">hello world</h1>
  3. </div>

css文件

  1. div {
  2.     background-color: red;
  3.     width: 200px;
  4. }
  5. div > h1 {
  6.     color: blue;
  7. }
div标签的样式的权重是：0个id，0个class，1 个标签 ——（0，0，1）
h1标签的权重是： 0个id，0个class，2 个标签(div+h1) ——（0，0，2）

2. 现在改变字的颜色

  1. div {
  2.     background-color: red;
  3.     width: 200px;
  4. }
  5. div > h1 {
  6.     color: blue;
  7. }
  8. div > h1 {
  9.     color: cyan;
  10. }

这里通过后写样式覆盖先前的样式将字的颜色经行改变

3. 现在想将字改回原来的颜色

有两种方法：

1.第一种是继续使用后写的样式去覆盖先前的样式
2.第二种就是改变样式的权重
  1. div {
  2.     background-color: red;
  3.     width: 200px;
  4. }
  5. div > h1.leteracy {
  6.     color: blue;
  7. }
  8. div > h1 {
  9.     color: cyan;
  10. }
现在div > h1.leteracy的权重是：0个id，1个class，2个tagName —— （0，1，2）
而先前div > h1的权重是：0个id，0个class，2个tagName —— （0，0，2）
显然（0，1，2） > (0 , 0 ,2)
通过这样的写法，css通过选择器的权重从而可以忽略书写的顺序

4. 调试样式

在样式后加 ！important 从而忽略样式的权重

  1. div {
  2.     background-color: red;
  3.     width: 200px;
  4. }
  5. div > h1.leteracy {
  6.     color: blue;
  7. }
  8. div > h1 {
  9.     color: cyan !important;
  10. }

此时虽然上一个h1的权重大于后一个的权重，但是后一个样式中加了!important就只显示后一个的样式

伪类选择器

1.计算权重，伪类也算是class

结构伪类

1.生成无序列表

  1. <ul class="list">
  2.         <li class="item1">item1</li>
  3.         <li class="item2">item2</li>
  4.         <li class="item3">item3</li>
  5.         <li class="item4">item4</li>
  6.         <li class="item5">item5</li>
  7.         <li class="item6">item6</li>
  8.         <li class="item7">item7</li>
  9.         <li class="item8">item8</li>
  10.         <li class="item9">item9</li>
  11.         <li class="item10">item10</li>
  12.         <li class="item11">item11</li>
  13.         <li class="item12">item12</li>
  14.         <li class="item13">item13</li>
  15.         <li class="item14">item14</li>
  16.         <li class="item15">item15</li>
  17.     </ul>

2.改变全部样式CSS写法

写法1：
  1. ul {
  2.     width:100px;
  3.     background-color: black;
  4. }
  5. ul>li {
  6.     color:aqua;
  7.     background-color: violet;
  8. }
写法2：使用伪类：匹配分组的任意位置的子元素th-of-type(n)
  1. ul {
  2.     width:100px;
  3.     background-color: black;
  4. }
  5. ul>:nth-of-type(n) {
  6.     color:aqua;
  7.     background-color: violet;
  8. }
效果是一样的

参数解释：

  1. :nth-of-type(an+b):
  2. a=[0,1,2….]
  3. n=[0,1,2,….]
  4. b为偏置量
  5. 如 -n+3 ：
-nresult
05
-14
-23
-32
-41
  1. 忽略 =< 0 的数字
  2. 即改变前五个的样式
  3. 将其改成:nth-last-type-(an+b):一样的参数就会变成后五个
  5. 又如：
  6. :nth-of-type(-2n+15)
-n-2n+15
015
113
211
39
47
55
63
71
将选中这些样式

更多相关文章

  1. Cordova插件调用Android原生Activity修改其样式及背景
  2. 选择器权重与伪类选择器
  3. 选择器权重及伪类选择器练习
  4. 简单的登陆表单、后台框架、元素样式来源与优先级
  5. css选择器权重、伪类选择器计算方式
  6. 选择器知识汇总
  7. HTML学习
  8. 登录表单、后台架构、样式来源与优先级
  9. 表单+简单后台架构+元素样式来源与优先级

随机推荐

  1. android Adapter综合介绍
  2. Android 基本控件及表单三大控件，事件处理
  3. Android OkHttp中Https的处理
  4. Android源代码编译命令m/mm/mmm/make分析
  5. Android第一步
  6. android进行异步更新UI的四种方式
  7. 第三方程序调用Android(安卓)Telephony
  8. 关于android和java环境和编译的一些基本
  9. Android(安卓)MediaPlayer使用注意
  10. Android(安卓)简单项目