CSS(3)选择器总结-0811

title: “CSS(3)选择器总结 0811”
date: 2022-08-11T13:56:53+08:00

文章目录

本篇文章旨在总结css和css3中的所有选择器，介绍选择器之前，先列出各类选择器的权重：

选择器	对应权重值
!important	最大
行内样式表	1000
id选择器	100
class类选择器、伪类选择器(动态伪类/状态伪类/目标伪类/否定伪类/结构性伪类)/属性	10
标签选择器、伪元素选择器(first-letter/first-line/before/after/placeholder)	1
通用选择器	0
继承样式	比0还小

特点

   1. 后代选择器/交集选择器权重值是每一个选择器权重值相加
   2. 当权重值相同的时候根据就近原则
   3. 群组选择器权重只看和自己本身相关的选择器，其他的不管

层叠:用不同的选择器选择同一个元素，设置了相同的属性，但是设置了不一样属性值，产生冲突后根据权重规则优先显示，如果没有冲突，样式可以正常显示，将这种现象叫做层叠

基础选择器

标签选择器

标签名{
    
     css样式 }

id选择器

#id名{
    
     css样式 }

class类选择器

.类名{
    
     css样式 }

同配符选择器

*{
    
     margin: 0;padding: 0; }

其中：起id/class名的规则

不能以数字开头
名字尽量见名知意(首选英文，其次拼音)
id名尽量不要重复(虽然写代码的时候是不会报错,但是规范上不可以的),因为id选择器类似于人的身份证号
class类名规范上是可以重复的,class名类似于人名（如果结构对应的样式是一样的话，可以起一个相同的class名）
一个标签不能拥有多个id名,但能同时拥有多个class名,多个名之间用空格隔开

复杂选择器

后代(包含)选择器：

选择器 选择器{
    
    }

每个选择器之间必须空格隔开
选择器个数不限制，但是每一个之间必须是后代关系

交集选择器

标签名.class名{
    
    }    /* 该标签中带有该class名 */
标签名#id名{
    
    }    /* 该标签中带有该id名 */

群组选择器

选择器1,选择器2{
    
    }

大家有共同的样式，就可以将自己对应的选择器放到这个组里面，且用英文逗号隔开
群组选择器里面的每一个选择器也可以是其他选择器
群组选择器里面的每个选择器的权重互不相干

动态伪类选择器(权重为10)

锚点伪类:link{}、:visited{}

这是一种在链接中常见的样式，如:link、:visited

超链接元素:link{}

设置点击该超链接元素前的样式，该标签只对超链接<a></a>有用

超链接元素:visited{}

设置点击该超链接元素后的样式，该标签只对超链接<a></a>有用

行为伪类

也称为用户操作伪类，如:hover、:active和:focus

元素:hover{}

设置鼠标滑过/停留在该元素时出现的样式，针对所有元素

元素:active{}

设置鼠标主按键点击(激活)元素时的状态，针对所有元素都可用。

在有多键鼠标的系统中，CSS 3 规定 :active 伪类必须只匹配主按键；对于右手操作鼠标来说，就是左键。

元素:focus{}

用于元素成为焦点时的样式效果，这个经常用在表单元素上

另外：

给超链接加状态得顺序必须是：link visited hover active
伪类的权重值与类相同，为10(例如：a:hover的权重值为 1 + 10 = 11 )

伪元素选择器(权重为1)

`:first-letter{}`或者`::first-letter{}`

选中第一个字符(对英文来说字母,对汉字就字) 只对块级元素生效

`:first-line{}` 或者 `::first-line{}`

选中第一行只对块级元素生效

:before或者::before

:before{
    
    
    content:""; content属性是必须存在,没有内容的话，也需要写空引号,且添加的内容相当于内联元素并在浏览器中无法被选中
}

:after或者::after

:after{
    
    
    content:""; content属性是必须存在,没有内容也需要写空引号,且添加的内容相当于内联元素并在浏览器中无法被选中
}

注意：利用:after是可以解决块级元素不设置高度且其子元素浮动时的塌陷问题：

塌陷的块元素:after{
    
    
    content:""; content属性是必须存在,没有内容也需要写空引号,且添加的内容相当于内联元素并在浏览器中无法被选中
    display: block;
    clear: both;
}

:placeholder

一般是input标签上的伪元素选择器，通常和input标签一起连用，主要是设置input的css样式

css3的层级选择器

子代选择器

选择器1 > 选择器2 {
    
    }/* 选择器1和选择器2必须是父子关系 */

相邻兄弟选择器

选择器1+选择器2{
    
    }/* 选择器2必须是选择器1后面相邻的兄弟 */

兄弟选择器

选择器1~选择器2{
    
    }/* 选择器2是选择器1后面兄弟们 */

css3属性选择器(权重为10)

可以不用给元素设置class类或者id名而直接选择到元素

[属性名]{}

通过元素带有的属性名来直接选择到该元素

[属性名=“属性值”]{}

通过属性名和属性值匹配

[属性名^=“值”]{}

该属性名对应的值以该值开头

[属性名$=“值”]{}

该属性名对应的值以该值结尾

[属性名*=“值”]{}

该属性名对应的值中包含该值

注意：

如果标签身上本身有不一样的属性，但是不想起名字，可以使用该选择器
可以选择元素自带的官方属性，也可选择自定义的属性，自定义的属性名一般以data-开头，例如data-test
标签名[属性名]选择器类似于交集选择器其权重值是相加而来的

css3状态伪类选择器(权重值为10)

可编辑的表单样式 input:enabled{}
不可编辑的表单样式 input:disabled{}
选中的样式 input:checked{}
提示信息的样式 input::placeholder

注意：

去掉输入框外围或者获取焦点时候的边框 input{outline: none;}
更改输入框文字的颜色 color属性
扩大单选或者多选的选中范围，如下：

<input type="radio" name="sex" id="man" ><label for="man">男</label>
<input type="radio" name="sex" id="woman"><label for="woman">女</label>

此时点击字体时也可选中input标签的按钮。

css3结构性的伪类(权重值为10)

eg：li:nth-child(3){}

给选中的li元素后面的兄弟元素加样式

带child

元素:first-child{} 第一个
:last-child{} 最后一个
:nth-child(n){} n的值为：odd(奇数)/even(偶数)/数学表达式(2n等) /数值
:nth-last-child(n){} 倒数第n个

带type

:first-of-type{} 第一个
:last-of-type{} 最后一个
:nth-of-type(n){} 第n个
:nth-last-of-type(n) 倒数第n个

区别

如果结构是一样的话(即选中元素的兄弟元素都是同一种元素)，两者没区别
如果结构不一样的话,child看该元素是孩子中的第几个,则写几,type是先看该类型中是第几个,则写几

css3否定选择器

标签名:not(id/class名){} 除了该名之外的其他元素

选择器有点离谱，平常应该用不到，想了解更多可以点这里：click here

锚点及目标伪类

锚点

实现页面中不同板块之间的跳转,将超链接的href属性值和板块的id名进行绑定，eg

<a href="#id名">点击的内容</a>
<div id="id名">板块</div>

目标伪类

:target{} 跳转到目标板块后的样式
目标:target{} 跳转到该目标板块后的样式