1、名称不能以数字开始,只能以字母、连字符、下划线开始。
2、之后可以是字母、连字符、下划线或数字。
3、同时应该注意的是,CSS中的命名是区分大小写。
CSS选择器就是指定CSS要作用的标签,那个标签的名称就是选择器。意为:选择哪个容器。
CSS选择器分类:
标签选择器、类选择器、ID选择器、全局选择器、群组选择器、后代选择器、伪类选择器
1、html标签选择器:
定义:以html标签作为选择器
2、class类选择器:
定义:为HTML标签添加class属性,通过类选择器来为具有此class属性的元素设置css样式。
类选择器也可以对不同类型元素的同一个名称的类选择器设置不同的样式规则:
同一个元素可以设置多个类,之间用空格隔开:
3、ID选择器
定义:为HTML标签添加ID属性,通过ID选择器来为具有此ID的元素设置CSS规则
4、群组选择器
定义:集体统一设置样式
5、全局选择器
定义:所有标签设置样式
HTML文档结构图
6、后代选择器
定义:使用后代选择器设置,之间用空格隔开,后代选择器可以多层。
7、伪类选择器
链接的四种状态:激活状态,已访问状态,未访问状态,鼠标悬停状态。
伪类
说明
:link
未访问的链接
:visited
已访问的链接
:hover
鼠标悬停状态
:active
激活的链接
:hover 用于访问的鼠标经过某个元素时;
:active 用于一个元素被激活时(即按下鼠标之后放开鼠标之前的状态)
伪类选择器的属性:link >visited >hover >active
说明:
1) a:hover 必须置于 a:link和a:visited之后,才有效
2) a:active 必须置于 a:hover之后才有效
3) 伪类名称对大小写不敏感
8、CSS其它选择器
css继承特性,从父元素那继承部分css属性
选择器的优先级
ID选择优先级最高(id选择器定义具有唯一性)
class选择器次之(class选择器可以多个)
元素选择器再次之
其它选择器优先级主要根据定义的先后顺序,最后定义的优先级高
!important 加重选择器的优先级,添加在样式规则之后,中间用空格隔开。
CSS选择器命名规则
1:采用英文字母,数字以及"-" 和 "_" 命名
2:以小写字母开头,不能以数字和"-" 和 "_" 开头
3:使用有意义的命名规范
常用CSS命名
header
页头
main
主体
footer
页尾
nav
导航
sidebar
侧栏
container
容器
column
栏目
title
标签
menu
菜单
submenu
子菜单
*列举常用命名,大家根据自身项目及团队的规则命名
耐心学习基础知识,基础是盖房的根基,必须打结实。
如果您觉得有用,记得在下方点赞、关注、留言,我会定期奉 上更多的惊喜哦,您的打赏支持才是我继续努力的动力,么么哒。
每日分享在学习过程中总结的学习经验,学习笔记,笔试题,HTML,CSS,JavaScript,jQuery教程,Vue教程,PHP教程,TinkPHP教程等,望大家能以学习为目的,每天阅读一篇文章,了解身边的技术。陪有梦想的人一起成长!
css3中,追加了三个属性选择器分别为:
结构性伪类选择器由两部分构成,一是伪类选择器,一是伪元素选择器。
伪类选择器 ,要注意命名不要与系统定义好的选择器重名,例如link、hover
伪元素选择器 中包含 first-line、first-letter、before、after。
当root和body起冲突时,body就对内容区域生效,在内容区外则是root生效。
格式:not(selector)
1. first-child 对一个父元素中的 第一个 子元素进行样式的指定
2. last-child 对一个父元素中的 最后一个 子元素进行样式的指定
3. nth-child(positon) 对一个父元素中的 指定序号 的子元素进行样式的指定
4. nth-last-child 对一个父元素中的 指定倒数序号 的子元素进行样式的指定
2)使用nth-of-type(odd)和nth-of-type(even)
1)使用nth-child
2)使用nth-child(an+b),a表示每次循环中,包括几种样式,b表示指定的样式在循环中所处的位置。
only-child选择器,在元素只有一个子元素时,可以代替使用 nth-child(1)/nth-last-child(1) 。
在css3选择器中,除了结构性伪类选择器外,还有一种UI元素状态选择器——只有当元素处于某种状态下才起作用,在默认状态下不起作用。
通过js改变输入框的可输入和不可输入状态,通过css样式改变输入框可输入和不可输入状态时的背景颜色。
用来位于同一个父元素之下的,给与一个子元素平级的另一个子元素设定样式