热门IT资讯网

CSS介绍、选择器

发表于:2024-11-24 作者:热门IT资讯网编辑
编辑最后更新 2024年11月24日,css(层叠样式表 Cascading Style Sheet)-------表现层目前最新版本CSS3.0,能够做到表现与内容分离的一种计算机语言,在css中主要学习选择器和属性在学习之前先看一下c

css(层叠样式表 Cascading Style Sheet)-------表现层

目前最新版本CSS3.0,能够做到表现与内容分离的一种计算机语言,在css中主要学习选择器和属性

在学习之前先看一下css的书写位置和需要注意的地方

书写位置

1、外联(外部)样式

2、嵌入(内页)样式

3、内部(行内)样式

书写格式

选择器{属性:属性值}

注意:在CSS中多个属性用分号隔开

注释方法为/*注释内容*/

选择器

基础选择器

*选择器 表示获取html文档中所有的标签,一般用在统配(全局)样式

html选择器(标签选择器) 标签名{}

类选择器 .类名{}

ID选择器 #ID值{}

关系选择器

E F(后代选择器) E元素下边的F元素

E>F (子集选择器) E元素的子集元素F

E+F (紧邻选择器) 紧邻E元素之后的兄弟元素F

E~F (兄弟元素选择器) 选择E元素的兄弟元素F

属性选择器

E[attr] 具有attr属性的元素E

E[attr="value"] 具有attr属性的并且其属性值等于value的元素E

E[arrr^="value"] 具有attr属性的并且其属性值以value开始的元素E

E[attr$="value"] 具有attr属性的并且其属性值以value结尾的元素E

E[attr*="value"] 具有attr属性的并且其属性中包含value的E元素

伪类选择器

:active 当元素在被激活的时候时的样式

:link a标签未被访问前的样式

:visited a标签已被访问过得样式

:hover 鼠标滑过的样式

伪对象选择器

E::before{content:"123";} 在E元素之前常与content属性配合使用

E::after{content:"abc";} 在E元素之后常与content属性配合使用

E::first-letter{color:red;} E元素内容的第一个字符

E::first-line{color:red;} E元素内容的第一行



0