CSS基础选择器

布满荆棘的人生 2022-03-21 05:12 377阅读 0赞

CSS基础选择器

标签选择器（元素选择器）

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }  或者
    元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

标签选择器 可以把某一类标签全部选择出来 div span  
类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
    
     标签调用的时候用 class=“类名”  即可。

类选择器最大的优势是可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签

小技巧：

1.长名称或词组可以使用中横线来为选择器命名。
    2.不建议使用“_”下划线来命名CSS选择器。
    
    输入的时候少按一个shift键;

浏览器兼容问题 (比如使用\_tips的选择器命名，在IE6是无效的)

能良好区分JavaScript变量命名(JS变量命名是用“\_”)

3.不要纯数字、中文等命名， 尽量使用英文字母来表示。

猜谜底游戏：

你猜？

命名规范： 见附件（Web前端开发规范手册.doc）

命名是我们通俗约定的，但是没有规定必须用这些常用的命名。

多类名选择器

我们可以给标签指定多个类名，从而达到更多的选择目的。

注意：

1. 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
    2. 各个类名中间用空格隔开。

多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

<div class="pink fontWeight font20">亚瑟</div>
    <div class="font20">刘备</div>
    <div class="font14 pink">安其拉</div>
    <div class="font14">貂蝉</div>

类名选择器 ：< div class=“nav”> 这个 div 的名字 就是 nav nav 就是 div 这个 div 也是 nav

< 人 class = 刘德华 > 我们想要吧div 找到 div \{\} .nav \{\}

id选择器

id选择器使用“\#”进行标识，后面紧跟id名，其基本语法格式如下：

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

用法基本和类选择器相同。

id选择器和类选择器区别

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

类选择器（class） 好比人的名字， 是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜

id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次。

id选择器和类选择器最大的不同在于 使用次数上。

通配符选择器

通配符 选择器用“\*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

* {
      margin: 0;                    /* 定义外边距*/
      padding: 0;                   /* 定义内边距*/
    }

注意：

这个通配符选择器，就像我们的电影明星中的梦中情人， 想想它就好了，但是它不会和你过日子。

发表评论取消回复

表情：

评论列表（有 0 条评论，377人围观）

还没有评论，来说两句吧...

相关阅读

相关基础选择器之通配符选择器（CSS、HTML）

基础选择器之通配符选择器（CSS、HTML） <!DOCTYPE html> <html lang="en"> <head> <m

矫情吗；*/ 2023年10月03日 12:28/ 0 赞/ 156 阅读

相关基础选择器之id选择器(CSS、HTML)

基础选择器之id选择器(CSS、HTML) <!DOCTYPE html> <html lang="en"> <head> <me

ゝ一世哀愁。/ 2023年10月03日 12:28/ 0 赞/ 159 阅读

相关 CSS基础选择器之类选择器(CSS、HTML)

CSS基础选择器之类选择器(CSS、HTML) <!DOCTYPE html> <html lang="en"> <head>

小鱼儿/ 2023年10月03日 12:28/ 0 赞/ 34 阅读

相关 CSS基础选择器之标签选择器(CSS、HTML)

CSS基础选择器之标签选择器(CSS、HTML) <!DOCTYPE html> <html lang="en"> <head>

青旅半醒/ 2023年10月03日 12:28/ 0 赞/ 33 阅读

相关 css选择器_CSS选择器

css选择器 CSS选择器简介 (Introducing CSS Selectors) A CSS selector is the part of a CSS rule

客官°小女子只卖身不卖艺/ 2022年12月03日 11:26/ 0 赞/ 533 阅读

相关 [CSS一] css基础和选择器

一、css基础 1. css 的定义 > css(Cascading Style Sheet)层叠样式表，它是用来美化页面的一种语言。没有使用css的效果图

﹏ヽ暗。殇╰゛Y/ 2022年11月26日 05:00/ 0 赞/ 347 阅读

相关 css选择器以及基础

css选择器分类：标签选择器（元素选择器）类选择器 ID选择器通配符选择器伪类选择器伪元素选择器派生选择器

爱被打了一巴掌/ 2022年05月18日 11:19/ 0 赞/ 334 阅读

相关 css选择器以及基础

QQ:275487025 QQ群：854312770 欢迎各种大牛指点，和小白一起学习。 css选择器分类：标签选择器（元素选择器）类选择器

迷南。/ 2022年05月18日 11:19/ 0 赞/ 381 阅读

相关 CSS基础选择器

CSS基础选择器标签选择器（元素选择器）标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：

布满荆棘的人生/ 2022年03月21日 05:12/ 0 赞/ 378 阅读

相关 css基础之选择器

CSS作用：设置网页结构样式（改变html标签样式），通过CSS给html标签设置属性达到改变标签样式。

骑猪看日落/ 2021年09月15日 01:30/ 0 赞/ 615 阅读