CSS选择器

2021-01-23  本文已影响0人  QT2019NB

CSS选择器

1.选择器的作用

找到特定的HTML页面元素

CSS选择器是用来选择标签用的,把我们想要的标签选择出来

2.CSS基础选择器

2.1 标签选择器

总结口诀:

​ 标签选择器,

​ 页面同选起,

​ 直接写标签,

​ 全部不放弃。

2.2 类选择器

类选择器使用"." (英文点号)进行标识,后面紧跟类名

2.3 id选择器

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

2.4 通配符选择器

2.5 基础选择器总结

选择器 作用 缺点 使用情况 用法
标签选择器 可以选出所有相同的标签，比如p 不能差异化选择 较多 p { color：red;}
类选择器 可以选出1个或者多个标签 可以根据需求选择 非常多 .nav { color: red; }
id选择器 一次只能选择器1个标签 只能使用一次 不推荐使用 #nav {color: red;}
通配符选择器 选择所有的标签 选择的太多，有部分不需要 不推荐使用 * {color: red;}

2.6 团队约定

选择器

/* 推荐 */
.jdc {}
li {}
p{}

/* 不推荐 */
*{}
#jdc {}
div{}   因为div 没有语义，我们尽量少用

3. 复合选择器

3.1 后代选择器

3.2 子元素选择器

3.3 交集选择器

jiaoji.png

3.4 并集选择器

3.5 链接伪类选择器

a:link {} /* 未访问的链接 */
a:visited {} /* 已访问的链接 */
a:hover {} /* 鼠标移动到链接上 */
a:active {} /* 选定的链接 */

注意:

1.写的时候,他们的顺序尽量不要颠倒,按照lvha的顺序,否则可能引起错误

2.记忆法:

3.因为叫链接伪类，所以都是 利用交集选择器 a:link a:hover

4.因为a链接浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

5.实际工作开发中，我们很少写全四个状态，一般我们写法如下：

a {   /* a是标签选择器  所有的链接 */
          font-weight: 700;
          font-size: 16px;
          color: gray;
}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
          color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

3.6 复合选择器总结

选择器 作用 特征 使用情况 隔开符号及用法
后代选择器 用来选择元素后代 是选择所有的子孙后代 较多 符号是空格 .nav a
子代选择器 选择 最近一级元素 只选亲儿子 较少 符号是> .nav>p
交集选择器 选择两个标签交集的部分 既是 又是 较少 没有符号 p.one
并集选择器 选择某些相同样式的选择器 可以用于集体声明 较多 符号是逗号 .nav, .header
链接伪类选择器 给链接更改状态 较多 重点记住 a{} 和 a:hover 实际开发的写法

4. 属性选择器

4.1 属性选择器列表

选择符 简介
E[att] 选择具有att属性的E元素
E[att="val"] 选择具有att属性且属性值等于val的E元素
E[att^="val"] 匹配具有att属性、且值以val开头的E元素
E[att$="val"] 匹配具有att属性、且值以val结尾的E元素
E[att*="val"] 匹配具有att属性、且值中含有val的E元素

属性选择器代码演示:

button {
    cursor: pointer;
}
/* E[att] */
button[disabled] {
    cursor: default;
}
/* E[att="val"] */
input[type="text"] {
    color: red;
}
/* E[att^="val"] */
span[class^="icon"] {
    color: pink
}
/* E[att$="val"] */
span[class$="icon"] {
    color: purple;
}
/* E[att*="val"] */
span[class*="icon"] {
    color: blue;
}

5.结构伪类选择器

5.1 属性列表

选择符 简介
E:first-child 匹配父元素中的第一个子元素E
E:last-child 匹配父元素中的最后一个子元素E
E:nth-child(n) 匹配父元素中的第n个子元素E
E:first-of-type 指定类型E的第一个元素
E:last-of-type 指定类型E的最后一个元素
E:nth-of-type(n) 指定类型E的第n个元素

5.2 代码演示

ul li:first-child {
    background-color: blue;
}
ul li:last-child {
    background-color: green;
}
ul li:nth-child(3) {
    background-color: purple;
}
/* 偶数 */
ul li:nth-child(even) {
    background-color: blue;
}
/* 奇数 */
ul li:nth-child(odd) {
    background: #0094ff;
}
/* n是公式, 从0开始计算 */
/* 2n偶数 */
ul li:nth-child(2n) {
    background: #fff;
}
div :nth-child(1) {
    background: lightblue;
}
div span:nth-of-type(2) {
    background-color: lightseagreen;
}

6.伪类选择器

6.1 伪类选择器

选择符 简介
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容

6.2 伪类选择器注意事项

6.3 代码演示

dic {
    width: 100px;
    height: 100px;
    border: 1px solid lightblue;
}
div::before,
div::after {
    width: 20px;
    height: 50px;
    text-align: center;
    content: "哈哈";
}
上一篇下一篇

猜你喜欢

热点阅读