CSS选择器介绍

选择器也可以叫选择符,但通常都叫做选择器

CSS选择器的分类


元素(标签)选择器:单独 一种元素(标签)使用
(多)类选择器:分为不同类别使用,不同标签可以多次并重复使用
ID选择器:调用次数只能一次,只允许使用 一次通配符选择器:能匹配页面中所有的元素 (使用 较少,了解即可)
链接伪类选择器:能让链接样式变化,使用此选择器的 顺序不能变,变了则无效化
目标伪类选择器:能让定位锚 定位的目标发生变化

链接伪类选择器样式顺序为:link、visited、hover、active


CSS选择器的使用及规范

元素选择器、类选择器、多类选择器、ID选择器是需要引用的,其他不用

元素选择器

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

类选择器

<head>
.family {                  /* 声明类样式 */
    font-family: "宋体";
    font-size:30px;
}
</head>

<body>
       <h1 class="family">某某</h1>  /* 引用类样式 */
</body>

多类选择器

<style>
.font1 {
    font-family:"宋体";
}

.font2 {
    font-size: 123px;
}

.color {
    color: red;
}

</style>
</head>
<body>
    <div class="font1 color">hello</div>
    <div class="font2 font1">word!</div>
</body>

ID选择器

<style>
#big {
    color: red;
}
</style>
</head>
<body>
    <div id="big">泡面下鸡蛋</div>
</body>

通配符选择器

* {
    color: pink;
}

链接伪类选择器

a:link{                /* 没有点击前的状态 */
    color:red;
}
a:visited{             /* 点击后的状态 */
    color:orange;
}
a:hover{               /* 悬停到此的状态 */
    color:green;
}
a:active{   
    color:black;       /* 鼠标左键点击此处不松的状态 */
}

链接伪类选择器(简化)

a {                            /*元素选择器*/
    font-weight: 1400;
    font-size: 25px;
    color: green;
    text-decoration: none;     /*取消下划线*/
}

a:hover {                      /*链接伪类选择器*/
    color: red;
}

结构伪类选择器

li:first-child {             /*最后一个*/
    color: blue;
}

li:last-child {              /* 第一个 */
    color: orange;
}

li:nth-child(2) {            /*选择第2个*/
    color:yellow;
}

结构伪类选择器(奇数、偶数)

li:nth-child(odd) {            /*选择奇数显示*/
    color:yellow;
}

li:nth-child(even) {            /*选择偶数显示*/
    color:deeppink;
}

**结构伪类选择器(公式):**

li:nth-child(3n+2) {            /*从第2个开始显示并每三个显示*/
    color:yellow;
}

结构伪类选择器(倒序)

li:nth-last-child(even) {            /* 从奇数开始倒数显示 */
    color:yellow;
}

li:nth-last-child(odd) {            /* 从偶数开始倒数显示 */
    color:deeppink;
}

目标伪类选择器

:target {                      /* 定位锚的目标状态 */
    color: red;                /* 跳转到目标的颜色 */
}

交集选择器

表示既又的意思

a.site-r  {           /* 既是a元素也叫site-r名称 */
     color: red;
}

并集选择器

可以把所有的元素合并使用

a,p,span {                /* a、p、span标签都是 */
     color: red;
}

后代选择器

可以在元素中简单选择子元素

div ul li{                    /* div里的ul里的li */
     color: green;
}

子元素选择器

可以在多级导航栏中的子元素进行选择,后代选择器的升级版

.nav > ul > li > a{          /* 名称为nav里的ul里的li里的a */
     color: green;
}

属性选择器

可以选择有属性的元素

input[type=text] {       /* 选中属性为text的元素 */
     color: red;
}
  
input[type^=mtr] {       /* 选中属性前面为mtr的元素 */
     color: blue;
}
  
div[class$=mtr] {        /* 选中尾部属性为mtr的元素 */
     color: deeppink;
}
  
div[class*=mtr] {        /* 选中包含mtr属性的所有元素 */
     color: deeppink;
}

伪元素选择器


注意区分:

.mtr  //类选择器
:firest-child   //伪类选择器
::first-letter  //伪元素选择器

div::first-letter {             /* div标签的第一个字 */
    font-size: 60px;
}
  
div::first-line {               /* div标签的第一行 */
    color: red;
} 
  
div::selection {                /* div标签所选中的状态 */
    color: orange;
}

CSS层叠性

如果发现相同元素选择器中出现相同属性且不同属性值时,CSS会以最后的属性值为标准显示

比如:

p {
    color: red;
}

p {
    font-size: 60px;
    color: blue;
}

它会优先执行最后一个样式表

CSS继承性

body标签以下的子标签会继承 一部分的样式展示出

比如:

body {
    font-size: 60px;
    color: blue;
}

<body>
<p>你好,世界!</p>
</body>

注:一部分这里是指字体、字号、颜色、行距、文本属性等网页中通用的样式

p标签会继承 body标签的 一部分样式

CSS优先级


1.使用了!important声明的规则
2.内嵌在HTML元素的style属性里面的声明
3.使用了ID选择器的规则
4.使用了类选择器、属性选择器、伪元素和伪类选择器的规则
5.使用了元素选择器的规则
6.只包含一个通配符选择器的规则
7.同一类选择器则遵循层叠性的规则

权重是优先级的算法,层叠是优先级的表现

优先级算法公式: 0, 0, 0, 0,贡献值大小从左往右

数字之间没有进制,0,0,0,5 + 0,0,0,5 = 0,0,0,10 而不是 0,0,1,0

1.特殊性

标签选择器/元素选择器权重: 0,0,0,1

类选择器权重: 0,0,1,0

伪类选择器权重: 0,0,1,0

ID选择器权重: 0,1,0,0

行内样式表权重: 1,0,0,0


important 权重无限大,一旦出现优先执行
比如:

p {
    color: orange!important;
}

important //重要的意思

2.权重叠加

div ul li   //权重:0,0,0,2

.nav ul li  //权重:0,0,1,2

a:hover     //权重:0,0,1,1

.nav a      //权重:0,0,1,1

#nav p      //权重:0,1,0,1

3.继承的权重

被继承的元素权重为0

继承的元素有单独的CSS样式,将拥有相对应的权重

颜色

颜色属性用于定义文本的颜色,书写方式有如下几种

1.遇到义的颜色值,如 redgreenblue

2.十六进制,如 #FF0000#FF6600#29D794

十六进制用是最常用的定义颜色的方式,十六进制提倡简写,如 #FF6600可以写为 #F60,两两为一组

3.RGB代码,如红色可以表示为 rgb(255,0,0)or (100%,0%,0%)

此方式建议使用审查元素进行修改和填补

RGB代码设置颜色半透明:

p {
    color: rgba(0,0,0,0.1);  /* 颜色为黑色,透明值为0.5 */
}

rgb后需要加上字母a,a表示alpha的意思,透明值取值范围为0-1

字体

行间距

p {
    line-height: 35px     /* 行间距为35像素 */
} 

line-height的属性值表示有三种,分别为像素px,相对值em和百分比%,像素px是最为常用。一般情况下行距比字号大7-8像素左右最为合适

水平对齐方式

p {
    text-align: center;    /* p标签的文字水平对齐 */
}

首行缩进

p {
    text-indent: 2em;    /* 此时p标签的文字首行缩进2字符的宽度 */
} 

字间距

p {
    letter-spacing: 2px; /* 词间距 */
} 

单词间距

p {
    word-spacing: 10px; /* 单词间距,中文无效 */
} 

文字阴影

p {
    text-shadow: 3px 6px 5px rgba(0,0,0,0.5)   /* 分为四个属性:水平距离、垂直距离、模糊距离、文字颜色 */
}

文字阴影前面两位参数必须写,后面两位参数可以根据实际需求选填

最后修改:2020 年 08 月 06 日 01 : 12 AM