CSS选择符（选择器）基础认识

一、CSS选择符（选择器）
常用的选择符有十种左右，这里主要讲三种。
类型选择符，class选择符（类选择符），id选择符，通配符，群组选择符，包含选择符
伪类选择符(伪类选择符CSS中已经定义好的选择器,不能随便取名)，
伪对象选择符(设置在对象后发生的内容。用来和content属性一起使用 )

二、类型选择符（权重：0001）
1.类型选择符也称为元素选择符、标签选择符、element选择器
2.类型选择符是根据html语言中的标记来直接定义
3.语法：元素名称{属性：属性值；属性：属性值；属性：属性值；}
a)类型选择符就是以文档对象html中的标签作为选择符，即使用结构中元素名称作为选择符。例如*body、div、p,img,em,strong,span…*等。
b)所有的页面元素都可以作为选择符;
例：

二、id选择符（权重：0100）
1.语法：#id名称{属性：属性值；属性：属性值；属性：属性值；}
2.设置id名：
<元素 id =“id名”></元素>
3.语法格式是 "#"加上自定义的id名，如： #box{属性：属性值；}
例：

<p id="pbox">我是谁</p>
#pbox{background-color:red;
height:800px;}

4.具有唯一性，一个id名在一个文档中只能出现一次
5.最大的用处：创建网页的外围结构
6.命名规则：必须以字母(A-Z或者a-z)开头，之后可以是字母、数字、连字符("-")、下划线("_")

例：

三、class选择符（权重0010）
1.语法：.class名{属性：属性值；}
2.设置class名：

<元素 class="class名"></元素>
例：
<div class="box1">gg</div>
.box1{color:blue;}

说明：class选择符更适合定义一类样式
1）一个元素可以设置多个class名： <元素名 class=“top box”>
2）class名可以重复
3）当我们使用类选择符时，应先为每个元素定义一个类名称
4）类选择符的语法格式：

 如： <div class="top"></div>.top{属性：属性值；}

CSS选择符（选择器）基础认识相关推荐

好程序员web前端CSS选择符（选择器）:表示要定义样式的对象
好程序员web前端CSS选择符(选择器):表示要定义样式的对象 1) 元素选择符/类型选择符(element选择器 ) 如:div{width:100px; height:100px; backgro ...
CSS选择符（选择器）
CSS选择符(选择器): 表示要定义样式的对象 1.元素选择符/类型选择符(element选择器 ) 如:div{width:100px; height:100px; background:red;} ...
[css选择器]总结：IE6不支持的CSS选择符
转载地址:https://www.wenjiwu.com/doc/zvsbii.html.此文最后也给出了原文地址,但是我点击过去发现是什么赌博彩票的地址,360也弹出小心的提示,所以这里只给出了我转 ...
30个你必须记住的CSS选择符
所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性.在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用. 1. ...
前端面试知识点-DOCTYPE、盒模型、css选择符、position的值、网络协议【小咚 “面筋” 记】
文章目录前言一.DOCTYPE的作用二.盒模型三.css选择符有哪些?优先级? 1.选择符 2.优先级四.position的值有哪些? 五.网络协议(OSI.TCP/IP) 总结前言每天 ...
html5后代选择符,css选择符有哪些？哪些属性可以继承？
属性的名字是一个合法的标识符,它们是CSS语法中的关键字.一种属性规定了格式修饰的一个方面.CSS选择器用于选择你想要的元素的样式的模式. css选择符有哪些?哪些属性可以继承?下面我们来看一下css ...
jq 点击导航添加背景_jq入门（2）css选择符
今天继续分享jq入门基础. css选择符 jQuery支持CSS规范1到规范3中的几乎所有选择符,具体内容可以参考W3C网站.这种对CSS选择符的支持,使得开发者在增强自己的网站时,不必为哪种浏览器不 ...
web前端CSS选择符:表示要定义样式的对象
1) 元素选择符/类型选择符(element选择器 ) 如:div{width:100px; height:100px; background:red;} 语法:元素名称{属性:属性值:} 说明: a ...
[你必须知道的css系列]第一回：丰富的利器2：CSS选择符之子选择符、相邻选择符...
对了,接下来要讲的属性选择符,相邻选择符,子对象选择符可能大家稍微有点陌生了,这当然也是有原因的,因为IE6及以下的浏览器并不支持这几个选择符,而大多数从事这方面工作的技术人员,多数时候还是主要考虑 ...
常用的css选择符,CSS选择器五大基本选择符
原标题:CSS选择器五大基本选择符 1. *(通配符) *通配符选择器,经常用于css reset(样式重置),清理标签的默认样式,但现在一般不提倡直接使用*了,主要是*会匹配所有标签,相当耗资源.* ...

CSS选择符（选择器）基础认识

CSS选择符（选择器）基础认识相关推荐

最新文章

热门文章