尼采般地抒情

尼采般地抒情

尼采般地抒情

公告栏

此网站主题为本人手写主题, 主题待开源···

音乐盒

站点信息

文章总数目: 307
已运行时间: 1101
目录
  1. 基础选择器
    1. 标签选择器
    2. 类选择器
    3. id选择器
    4. 通配符选择器
  2. 复合选择器
    1. 后代选择器(重点)
    2. 子元素选择器
    3. 交集选择器
    4. 并集选择器(重点)
    5. 链接伪类选择器(重点)
  3. 七、CSS3 属性选择器(上)
  4. 八、CSS3 属性选择器(下)
  5. 九、结构伪类选择器
  6. 十、nth-child 参数详解
  7. 十一、nth-child 和 nt-of-type 的区别
  8. 十二、伪元素选择器
  9. 十三、伪元素的案例
尼采般地抒情

尼采般地抒情

尼采般地抒情

公告栏

此网站主题为本人手写主题, 主题待开源···

站点信息

文章总数目: 307
已运行时间: 1101

基础选择器


标签选择器

  • 概念:

    标签选择器(元素选择器)是指用HTML 标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的 CSS 样式。

  • 语法:

标签名{属性 1:属性值 1; 属性 2:属性值 2; 属性 3:属性值 3; }

类选择器

  • 类选择器使用“.”(英文点号)进行标识,后面紧跟类名.
  • 语法:
    • 类名选择器
.类名 {  
 属性 1:属性值 1;
属性 2:属性值 2;
属性 3:属性值 3;  
}
    • 标签
<p class='类名'></p>


类选择器特殊用法- 多类名

我们可以给标签指定多个类名,从而达到更多的选择目的。各个类名中间用空格隔开。

<div class="pink fontWeight font20">亚瑟</div>

<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>

id选择器

id选择器使用#进行标识,后面紧跟id名

  • 其基本语法格式如下:
    • id选择器
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
    • 标签
<p id="id名"></p>
  • 元素的id值是唯一的,只能对应于文档中某一个具体的元素。
  • 用法基本和类选择器相同。

id选择器和类选择器区别

  • W3C标准规定,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class。
    • 类选择器(class) 好比人的名字,  是可以多次重复使用的, 比如  张伟  王伟  李伟  李娜
    • id选择器     好比人的身份证号码,  全中国是唯一的, 不得重复。 只能使用一次。

id选择器和类选择器最大的不同在于 使用次数上。

pink老师 总结他们

  • 类选择器我们在修改样式中,用的最多。
  • id选择器一般用于页面唯一性的元素身上,经常和我们后面学习的javascript 搭配使用。

通配符选择器

  • 概念 通配符选择器用*号表示,  *   就是 选择所有的标签      他是所有选择器中作用范围最广的,能匹配页面中所有的元素。
  • 其基本语法格式如下:
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如下面的代码,使用通配符选择器定义CSS样式,清除所有HTML标记的默认边距。

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}
  • 注意:
会匹配页面所有的元素,降低页面响应速度,不建议随便使用

复合选择器

目标

  • 理解
    • 理解css复合选择器分别的应用场景
  • 应用
    • 使用后代选择器给元素添加样式
    • 使用并集选择器给元素添加样式
    • 使用伪类选择器

为什么要学习css复合选择器

CSS选择器分为 基础选择器 和 复合选择器 ,但是基础选择器不能满足我们实际开发中,快速高效的选择标签。

  • 目的是为了可以选择更准确更精细的目标元素标签。
  • 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的

后代选择器(重点)

  • 概念: 后代选择器又称为包含选择器
  • 作用: 用来选择元素或元素组的子孙后代
  • 其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔,先写父亲爷爷,在写儿子孙子。
父级 子级{属性:属性值;属性:属性值;}
  • 语法:
.class h3{color:red;font-size:16px;}

  • 当标签发生嵌套时,内层标签就成为外层标签的后代。
  • 子孙后代都可以这么选择。 或者说,它能选择任何包含在内 的标签。

子元素选择器

  • 作用: 子元素选择器只能选择作为某元素子元素(亲儿子)的元素。
  • 其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个 > 进行连接
  • 语法:
.class>h3{color:red;font-size:14px;}

pink老师一句话说出他们

这里的子 指的是 亲儿子  不包含孙子 重孙子之类。

白话:

比如:  .demo > h3 {color: red;}   说明  h3 一定是demo 亲儿子。  demo 元素包含着h3。

交集选择器

  • 条件 交集选择器由两个选择器构成,找到的标签必须满足:既有标签一的特点,也有标签二的特点。

  • 语法:

  • 其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,如h3.special。

记忆技巧:

交集选择器 是 并且的意思。  即...又...的意思

比如:   p.one   选择的是: 类名为 .one  的 段落标签。

用的相对来说比较少,不太建议使用。

并集选择器(重点)

  • 应用:
    • 如果某些选择器定义的相同样式,就可以利用并集选择器,可以让代码更简洁。
  • 并集选择器(CSS选择器分组)是各个选择器通过,连接而成的,通常用于集体声明。
  • 语法:

  • 任何形式的选择器(包括标签选择器、class类选择器id选择器等),都可以作为并集选择器的一部分。
  • 记忆技巧: 并集选择器通常用于集体声明  ,逗号隔开的,所有选择器都会执行后面样式,逗号可以理解为 和的意思。
比如  .one, p , #test {color: #F00;}  
表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。 
通常用于集体声明。


链接伪类选择器(重点)

用于向某些选择器添加特殊的效果。比如给链接添加特殊效果, 比如可以选择 第1个,第n个元素。因为伪类选择器很多,比如链接伪类,结构伪类等等。我们这里先给大家讲解链接伪类选择器。


  • a:link      / 未访问的链接 /
  • a:visited   / 已访问的链接 /
  • a:hover     / 鼠标移动到链接上 /
  • a:active    / 选定的链接 /
  • 注意:写的时候,他们的顺序尽量不要颠倒  按照  lvha 的顺序。否则可能引起错误。
a {   /* a是标签选择器  所有的链接 */
            font-weight: 700;
            font-size: 16px;
            color: gray;
}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
            color: red; /*  鼠标经过的时候,由原来的 灰色 变成了红色 */
}

七、CSS3 属性选择器(上)

  1. 什么是 CSS3
    • CSS2 的基础上拓展、新增的样式
  1. CSS3 发展现状
    • 移动端支持优于 PC
    • CSS3 目前还草案,在不断改进中
    • CSS3 相对 H5,应用非常广泛
  1. 属性选择器列表
  2. 属性选择器代码演示
button {
  cursor: pointer;
}
button[disabled] {
  cursor: default
}

八、CSS3 属性选择器(下)

  1. 代码演示
input[type=search] {
  color: skyblue;
}
span[class^=black] {
  color: lightgreen;
}
span[class$=black] {
  color: lightsalmon;
}
span[class*=black] {
  color: lightseagreen;
}

九、结构伪类选择器

  1. 属性列表
  2. 代码演示
ul li:first-child {
  background-color: lightseagreen;
}
ul li:last-child {
  background-color: lightcoral;
}
ul li:nth-child(3) {
  background-color: aqua;
}

十、nth-child 参数详解

  1. nth-child 详解
    • 注意:本质上就是选中第几个子元素
    • n 可以是数字、关键字、公式
    • n 如果是数字,就是选中第几个
    • 常见的关键字有 even 偶数、odd 奇数
    • 常见的公式如下(如果 n 是公式,则从 0 开始计算)
    • 但是第 0 个元素或者超出了元素的个数会被忽略
  1. 代码演示
<style>
  /* 偶数 */
  ul li:nth-child(even) {
    background-color: aquamarine;
  }
  /* 奇数 */
  ul li:nth-child(odd) {
    background-color: blueviolet;
  }
  /*n 是公式,从 0 开始计算 */
  ul li:nth-child(n) {
    background-color: lightcoral;
  }
  /* 偶数 */
  ul li:nth-child(2n) {
    background-color: lightskyblue;
  }
  /* 奇数 */
  ul li:nth-child(2n + 1) {
    background-color: lightsalmon;
  }
  /* 选择第 0 5 10 15, 应该怎么选 */
  ul li:nth-child(5n) {
    background-color: orangered;
  }
  /* n + 5 就是从第5个开始往后选择 */
  ul li:nth-child(n + 5) {
    background-color: peru;
  }
  /* -n + 5 前五个 */
  ul li:nth-child(-n + 5) {
    background-color: tan;
  }
</style>

十一、nth-childnt-of-type 的区别

  1. 代码演示
<style>
  div :nth-child(1) {
    background-color: lightblue;
  }
  div :nth-child(2) {
    background-color: lightpink;
  }
  div span:nth-of-type(2) {
    background-color: lightseagreen;
  }
  div span:nth-of-type(3) {
    background-color: #fff;
  }
</style>
  1. 区别
    • nth-child 选择父元素里面的第几个子元素,不管是第几个类型
    • nt-of-type 选择指定类型的元素

十二、伪元素选择器

  1. 伪类选择器
  2. 伪类选择器注意事项
    • beforeafter 必须有 content 属性
    • before 在内容前面,after 在内容后面
    • beforeafter 创建的是一个元素,但是属于行内元素
    • 创建出来的元素在 Dom 中查找不到,所以称为伪元素
    • 伪元素和标签选择器一样,权重为 1
  1. 代码演示
<style>
    div {
      width: 100px;
      height: 100px;
      border: 1px solid lightcoral;
    }
    div::after,
    div::before {
      width: 20px;
      height: 50px;
      text-align: center;
      display: inline-block;
    }
    div::after {
      content: '德';
      background-color: lightskyblue;
    }
    div::before {
      content: '道';
      background-color: mediumaquamarine;
    }
  </style>

十三、伪元素的案例

  1. 添加字体图标
p {
   width: 220px;
   height: 22px;
   border: 1px solid lightseagreen;
   margin: 60px;
   position: relative;
}
p::after {
  content: '\ea50';
  font-family: 'icomoon';
  position: absolute;
  top: -1px;
  right: 10px;
}

评论区

Twikoo giscus