1.标签选择器:直接用元素的标签来进行选择
span { // 直接选择span标签
size:16px;
}
1
2
3
1
2
3
2.ID选择器:通过设置id名字,进行精确的选择,用#来定义
# div1 { //通过id名字来进行选择
color:red;
}
<div>1</div>
1
2
3
4
1
2
3
4
3.类选择器:通过类名来进行选择,选择范围比id选择器大,用’.来定义
.div1 { //所有类名为div1的都被选择了
color:red;
}
<div>1</div>
<div>1</div>
<div>1</div>
1
2
3
4
5
6
1
2
3
4
5
6
4.通配符选择器:范围更大,作用于所有标签,用*来定义
不建议使用,对页面加载负担大
高级选择器
1.后代选择器:定义用空格隔开
div span { //选择的是div标签下的span标签,当然后代顾名思义可以不止隔一代,可以隔多代进行选择
color:red;
}
<div><span>1</span></div>
1
2
3
4
1
2
3
4
2.交集选择器:与后代选择器定义的不同是,没有空格隔开,两个元素紧挨着
span#a1 { //选择的是两个条件1.既是span标签的 2.id名是a1的元素,两个条件缺一不可
color:red;
}
<span id=“a1”>1</span>
<span >1</span>
1
2
3
4
5
1
2
3
4
5
3.并集选择器:定义用逗号隔开
span,#a1 { //选择的是1.是span标签的 2.id名是a1的元素,两个条件满足一个即可
color:red;
}
<span id=“a1”>1</span>
<span >1</span>
1
2
3
4
5
1
2
3
4
5
4.伪类选择器:
1.静态伪类:点击连接之前(link),点击连接之后(visited)这样的
2.动态伪类:鼠标移入(hover),点击之后(focus)
@ CSS要怎么写才规范?
规范有3
1,命名最好以英文为主,比如常见的 header ,footer ,wrapper, naver, container,aside,main, news, product
2,缩进要打好,注释要写好
3,命名扁平化,何为扁平化
<div class=”header”>
<div class=”naver”>
…
.header{}
.header .naver{}
改为
<div class=”header”>
<div class=”header-naver”>
.header{}
.header-naver{}
…
以上是自己的一点感悟,都是踩坑之后的经验
@ CSS代码怎么用?
css代码可以内嵌也可以外链。内嵌就是将css直接写在html标记中,大约在以后基本都逐渐规范为外链方式。内嵌css有个很大的缺点,就是html标记与css代码混合在一起,页面代码看起来比较混乱、吃力,结构不太清晰,后期如果有修改就会很费劲;规范为外链后,代码美观易懂、脉络清晰,方便二次修改。外链css,就是将css从html标记中分离出来,集中到一个或多个css页面,再根据需要,调用相关css文件进行指定样式表。
CSS样式表
内嵌css的方式:在html标记中添加属性“style”,设置相关属性值。如:“<p style=“font-size:12px”>带你走进科技大世界。</p>”就是给“带你走进科技大世界。”这段文字设置的字体大小为12px。
内嵌CSS样式
外链css方式:建一个css文件,样式集中写在该文件中,在所需页面调用就行了。方法是在“<head>”标记中添加“<link rel=”stylesheet” type=”text/css” href=”xxx/cssName.css” >”,其中“xxx”为路径,“cssName.css”为文件名。外链设置好后,在标记中通过“class”或“id”进行调用,如“<p class=“toptxt”>”或”<p id=”toptxt”>”,这时候样式表中被命名为“toptxt”的样式就应用到这个“<p>”标记中了。样式表中“class”和“id”的写法不一样,“class”前面加“.”,“id”前加“#”。
调用CSS文件
下面来说说使用“class”和“id”的区别,二者之间最大的区别是“class”名称在同一个页面中可以重复使用,而“id”名称是独一无二的。“class”本身就是用来调用样式的,一个页面中有同一个样式效果很正常,用“class”方便省事也更合理。“id”相当于人名,不允许重复出现。因为“id”不仅可用于样式,在写JavaScript时通常也要用“id”指定块。
@ css选择器命名能是百分号吗?
不能
具体如下:
左边是选择器首字符,右边是选择器后面的字符
首字符支持的字符类型是a~z、A~Z、下划线(_)以及非ASCII字符(中文、全角字符等)
后面的字符支持的字符类型是a~z、A~Z、0~9、下划线(_)、短横线(-)以及非ASCII字符
可以直接以短横线开头,如果是一根短横线(-),那么短橫线后面必须有其他字符、字母或下划线或者其他编码字符;如果是连续两根短横线(–),则它的后面不跟任何字符也是合法的。
如果觉得《css选择器规范化命名 css派生选择器有几种 – CSS – 前端 vs css编辑器》对你有帮助,请点赞、收藏,并留下你的观点哦!