css选择器的作用是什么?css的基本选择器有几种

css选择器的作用:
• 选择页面中对应的标签(找她),方便后续设置样式(改她)

标签选择器

结构:标签名 { css属性名:属性值; }
Ø 作用:通过标签名,找到页面中所有这类标签,设置样式
Ø 注意点:
1. 标签选择器选择的是一类标签,而不是单独某一个
2. 标签选择器无论嵌套关系有多深,都能找到对应的标签

css选择器的作用是什么?css的基本选择器有几种

 

类选择器

结构:.类名 { css属性名:属性值; }
Ø 作用:通过类名,找到页面中所有带有这个类名的标签,设置样式
Ø 注意点:
1. 所有标签上都有class属性,class属性的属性值称为类名(类似于名字)
2. 类名可以由数字、字母、下划线、中划线组成,但不能以数字或者中划线开头
3. 一个标签可以同时有多个类名,类名之间以空格隔开
4. 类名可以重复,一个类选择器可以同时选中多个标签

css选择器的作用是什么?css的基本选择器有几种

id选择器

结构:#id属性值 { css属性名:属性值; }
Ø 作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式
Ø 注意点:
1. 所有标签上都有id属性
2. id属性值类似于身份证号码,在一个页面中是唯一的,不可重复的!
3. 一个标签上只能有一个id属性值
4. 一个id选择器只能选中一个标签

css选择器的作用是什么?css的基本选择器有几种

 

补充:类与id的区别

class类名与id属性值的区别
• class类名相当于姓名,可以重复,一个标签可以同时有多个class类名
• id属性值相当于身份证号码,不可重复,一个标签只能有一个id属性值
Ø 类选择器与id选择器的区别
• 类选择器以 . 开头
• id选择器以 # 开头
Ø 实际开发的情况
• 类选择器用的最多
• id一般配合js使用,除非特殊情况,否则不要使用id设置样式
• 实际开发中会遇到冗余代码的抽取 (可以将一些公共的代码抽取到一个公共的类中去)

通配符选择器

结构:* { css属性名:属性值; }
Ø 作用:找到页面中所有的标签,设置样式
Ø 注意点:
1. 开发中使用极少,只会在极特殊情况下才会用到
2. 在小页面中可能会用于去除标签默认的margin和padding

css选择器的作用是什么?css的基本选择器有几种

 

总结:

1. 选择器作用:选中页面中对应的标签(找她),方便后续设置样式(改她)
2. 标签选择器:标签名 { css属性名:属性值; }
3. 类选择器:.类名 { css属性名:属性值; }
4. id选择器:#id属性值 { css属性名:属性值; }
5. 通配符选择器:* { css属性名:属性值; }

主题测试文章,只做测试使用。发布者:果壳日志,转转请注明出处:https://www.xin12123.com/n/489.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022年 11月 12日 下午4:30
下一篇 2022年 11月 12日 下午4:38

相关推荐

  • text-align : center 能让那些元素水平居中?

    text-align : center 能让那些元素水平居中?1. 文本2. span标签、a标签3. input标签、img标签Ø 注意点:1. 如果需要让以上元素水平居中, text-align : center 需要给以上元素的 父元素 设置

    CSS 2022年 11月 12日
    00
  • 水平居中方法总结 margin : 0 auto

    如果需要让div、p、h(大盒子)水平居中?• 可以通过margin : 0 auto ; 实现Ø 注意点:1. 如果需要让 div、p、h(大盒子) 水平居中,直接给 当前元素本身 设置即可2. margin:0 auto 一般针对于固定宽度的盒子,如果大盒子没有设置宽度,此时会默认占满父元素的宽度

    CSS 2022年 11月 12日
    00
  • css3的高级选择器有哪些?css进阶选择器

    后代选择器:空格 作用:根据 HTML 标签的嵌套关系,选择父元素 后代中 满足条件的元素Ø 选择器语法:选择器1 选择器2 { css }Ø 结果:• 在选择器1所找到标签的后代(儿子、孙子、重孙子…)中,找到满足选择器2的标签,设置样式Ø 注意点:1. 后代包括:儿子、孙子、重孙子……2. 后代选择器中,选择器与选择器之前通过 空格 隔开   …

    2022年 11月 13日
    00
  • css引入方式有几种?分别是什么?

    CSS引入方式 内嵌式:CSS 写在style标签中• 提示:style标签虽然可以写在页面任意位置,但是通常约定写在 head 标签中Ø 外联式:CSS 写在一个单独的.css文件中• 提示:需要通过link标签在网页中引入Ø 行内式:CSS 写在标签的style属性中• 提示:一般会配合js使用

    2022年 11月 12日
    00
  • css背景相关属性有哪些,css背景相关属性连写

    背景颜色 属性名:background-color(bgc)Ø 属性值:• 颜色取值:关键字、rgb表示法、rgba表示法、十六进制……Ø 注意点:• 背景颜色默认值是透明: rgba(0,0,0,0) 、transparent • 背景颜色不会影响盒子大小,并且还能看清盒子的大小和位置,一般在布局中会习惯先给盒子设置背景颜色   背景图片 属性名…

    2022年 11月 13日
    00

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信