css中的选择器

2023-06-14 05:32| 来源: 网络整理| 查看: 265

1. 标签选择器（根据标签的名称设置对应的样式）

2. ID选择器（通过获取标签里面的ID属性去设置对应的样式，设置的时候#+id的属性值）

3. 类选择器（通过获取标签里面的class属性去设置对应的样式，设置的时候.+class的属性值）

4. 通配符选择器（通过*设置对应的样式）

基本选择器 /* 标签选择器 */ div{ width: 200px; height: 200px; color: blue; } /* id选择器 */ #one{ color: chartreuse; } /* 类选择器 */ .box{ color: aqua; } /* 通配符选择器 */ *{ color: darkmagenta; } 呜呜呜呜呜呜呜

段落

2div 列表列表列表列表列表

优先级：ID选择器>类选择器>标签选择器>通配符选择器

二.包含选择器

1. 子代选择器（获取的某个标签的第一级子标签）

2. 后低选择器（获取的某个标签的所有子标签）

3. 分组选择器（也叫做逗号选择器，可以设定多个标签，使用逗号进行分割）

包含选择器 .list>ul{ color: aquamarine; } .list li{ color: blueviolet; } #one,.box,h1{ color: darkgreen; } 呜呜呜呜呜呜呜

段落

2div 列表1 列表2 列表3 列表4 列表5 列表6

三.属性选择器

属性选择器 /* 选中某个标签中存在的某个值 */ .aaa[class]{ color: aquamarine; } div[title]{ color: azure; } /* 确切的等于某个值 */ input[type="text"]{ background-color: blanchedalmond; } /* 属性里面包含某个值 */ input[type *="e"]{ background-color: aqua; } /* 属性中的值以xxx开始 */ input[type ^="e"]{ background-color: burlywood; } /* 属性中的值以xxx结束 */ input[type $="il"]{ background-color: chartreuse; } 呜呜呜对对对是是是

四.伪类选择器

伪类：同一个标签，在不同的状态下，有不同的样式，伪类通过冒号表示（最早的时候主要是用来渲染a标签不同的状态下的不同的样式）

超链接点击之前 ------ :link

超链接被访问之后 -------- :visited

鼠标放在超链接上的时候（悬停） ------- :hover

超链接激活的时候（鼠标点击标签但是不松手的时候）------ : active

注：顺序不可换，依次序进行设置（对于a标签的四种状态的顺序是一定的，a:link a:visited a:hover a:active）

伪类选择器 /* 超链接点击之前的 */ a:link{ color: chartreuse; } /* 超链接点击之后的 */ a:visited{ color: brown; }/* 鼠标悬停的时候 */ a:hover{ color: aqua; } /* 超链接被激活 */ a:active{ color: darkblue; } 点

五.伪元素选择器

:before ----- css2

:after ----- css2

::before ----- css3

::after ----- css3

注意：使用before和after的时候一定给要写上content属性

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。（该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 display 控制。）

伪元素选择器 p{ font-size: 20px; color: darkred; } p::before{ content: "雪豹说"; color: greenyellow; } p::after{ content: "芝士"; color: burlywood; }

段落

【本文地址】

公司简介

联系我们