CSS样式选择符

您所在的位置:网站首页 应输入样式规则的选择器有哪些 CSS样式选择符

CSS样式选择符

2023-09-21 15:39| 来源: 网络整理| 查看: 265

CSS语法: css由两部分组成,一部分是选择器,一部分是声明(属性和属性值),每个声明块中包含一个或多个声明;属性和属性值之间要用冒号连接,属性和属性之间用空格隔开。如下图所示: 选择符: 指的是要定义样式的对象(HTML里的标签),可以是一类元素,也可以是指定名称的元素,说白了就是帮助我们去找要找的那个对象(标签)。

CSS的常用选择符:标签选择符、类选择符、ID选择符、包含选择符。

类型选择符(元素选择符):用于选择特定类型的元素,只要写出需要添加样式的元素名即可。比如:div,p,body,h1,a,strong等 语法:标签名{} p{ color:red; } id选择符:通过对应id属性的值来选择元素,id名具有唯一性,同一个id名在一个页面中只能出现一次。可以用来创建网页的外围结构。 语法:#id名{属性1;值1;属性2;值2;} #p1{ font-size:12px; } class选择符(类选择符):用过元素的class属性值选中一组元素。使用class选择符时应该给对应的元素添加class属性,class名可以重复,多个元素可以拥有共同一个类名。 语法:.class名{属性1;值1;属性2;值2;} .title p{ font-size:22px; } 包含选择符:通过祖先级元素去找子元素,中间用空格隔开,找的是当前元素下的子元素。 如:.main li{属性1;值1;属性2;值2;} .main li{ width:165px; height:60px; border:1px solid #d3d3d3; float:left; line-height:60px; text-align:center; } 子选择符:选择符1和选择符2必须是父子级关系,只能选择某元素的直接后代,中间不能隔代,选择符和选择符之间用大于号连接。 语法:选择符1>选择符2 {属性1;值1;属性2;值2; } #nav>li{ float:left; }

子选择符(>)和包含选择符(空格)的区别:都表示“祖先-后代”的关系,但是子选择符表示的是“爸爸>儿子”,而包含选择符不仅可以是“爸爸 儿子”,还能是“爷爷 儿子”、“太爷爷 儿子”。

群组选择符:提取同分类项;可以把具有相同属性的选择符,用逗号隔开的形式组成一组。 .top,.banner,.main,.bottom{ width:1000px; margin:0 auto; } 通配符:通配符是所有选择符中作用范围最广的,通配符能选中当前页面中的所有标签。 由于通配符选择器是设置界面上所有的标签属性,所以在设置之前会遍历所有的标签,如果界面上标签比较多时,性能会比较差,所以在开发中一般不会使用。 语法:*{属性1:属性值1;属性2:属性值2;} /*控制全局样式的,让页面上的所有元素都清除一遍默认的外边界和填充值*/ *{ margin:0 ; padding:0; } 伪类选择符:基于文档结构以外的情形来为页面添加样式。以一个冒号开头,用于选择元素的特定状态或关系。 :link{} 超链接在访问前的状态 :visited{} 超链接在访问后的状态 :hover{} 鼠标悬停在元素上的状态 :active{} 鼠标点击元素不放时的状态 正常的顺序是::link :visited :hover :active /*初始状态*/ a:link{ color: pink; } /*鼠标访问过的状态*/ a:visited{ color: pink; } /*鼠标滑过状态*/ a:hover{ color: pink; } /*鼠标激活状态,鼠标按下去没松开的状态*/ a:active{ color: pink; }


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3