首页 前端知识 Css选择器

Css选择器

2024-01-24 15:01:59 前端知识 前端哥 162 822 我要收藏

Css Selector


Css选择器中有8种基本选择器与其他选择器。

Css选择器的格式如下:

selector{
   
	property1: value1;
	property2: value2;
	...		 : ...	 ;
}

基本选择器

元素选择器 (Element Selector)

元素选择器

优点:大批量处理元素。

缺点:范围太大,过于笼统。

Example

实例 1:

适用于所有 html 元素的样式

* {
   
    margin: 0;
    padding: 0;
}

实例 2 :

适用与所有 div 标签的样式

div {
   
	color: red;
}

实例 3 :

适用于所有 p 标签的样式

p {
   
	color: blue;
}

元素选择器属性选择器 的特例。


属性选择器 (Property Selector)

属性选择器格式:

Element[attribute]{
    
    property1: value1;
    ... : ... ;
}
Example

==普通==属性选择器:

适用于所有含有 id 属性的 div 标签

div[id] {
   
	color: blue;
}

适用于所有含有 class 属性的 p 标签

p[class] {
   
	color: pink;
}

根据==属性前缀==进行读取的属性选择器:

适用于所有 id 属性前缀为 melodydiv 标签

div[id^=melody] {
   
	color: white;
}

根据==属性结尾==进行读取的属性选择器:

适用于所有 class 属性结尾为 tailp 标签

p[class$=tail] {
   
	color: aquamarine;
}

根据==属性部分内容==进行读取的属性选择器:

适用于所有 id 属性种包含 contentdiv 标签

div[id*=content] {
   
	color: blue;
}

根据==属性准确内容==进行读取的属性选择器:

适用于所有 id 属性为 contentdiv 标签

div[id=content] {
   
	color: black;
}

根据==元素特殊属性==进行读取的属性选择器:

该种属性选择器是 特殊的 根据 属性准确内容 进行读取的属性选择器。

该种属性选择器对于输入框等用于用户交互的标签作用更大。

适用于所有 type 类型为 textinput 标签

input[type=text] {
   
	width: 20px;
}

ID选择器 (ID Selector)

ID选择器

优点:精确处理

缺点:只能处理ID为此的,处理过于唯一

Example

普通 ID选择器:

适用于 idtestid 的标签

#testid {
   
	color: beige;
}

==精确定位==的ID选择器:

适用于 idtestiddiv 标签

div#testid {
   
	font-size: 40px;
}

CLASS选择器 (CLASS Selector)

Example

==普通==CLASS选择器:

适用于所有 class 属性为 testclass 的标签

.testclass {
   
	color: red;
}

==精确定位==的CLASS选择器:

适用于所有 class 属性为 testclassdiv 标签

div.testclass {
   
	color
转载请注明出处或者链接地址:https://www.qianduange.cn//article/155.html
标签
htmlcsscss3
评论
会员中心 联系我 留言建议 回顶部
复制成功!