CSS选择符(选择器)



一、各类选择器

选择符表示要定义样式的对象,可以是元素本身,也可以是一类元素或者制定名称的元素.

常用的选择符有十种左右

类型选择符,id选择符,class选择符,通配符,群组选择符,包包含选择符,伪类选择符,伪对象选择符。



1. 元素选择符/类型选择符(element选择器 )

语法:元素名称{属性:属性值;}

说明:

a)元素选择符就是以文档语言对象类型作为选择符,即使用结构中元素名称作为选择符。例如body、div、p,img,em,strong,span......等。

b)所有的页面元素都可以作为选择符;

用法:

1)如果想改变某个元素得默认样式时,可以使用类型选择符;

2) 当统一文档某个元素的显示效果时,可以使用类型选择符;

 

2. id选择器

语法:#id名{属性:属性值;}

说明:

1)当我们使用id选择符时,应该为每个元素定义一个id属性,

如:<div id="top"></div>

2)id选择符的语法格式是“#”加上自定义的id名

如:#box{width:300px; height:300px;}

3)  起名时要取英文名,不能用关键字:(所有的标记和属性都是关键字)

如:head标记

4)一个id名称只能对应文档中一个具体的元素对象,因为id只能定义页面中某一个唯一的元素对象。

5)   最大的用处:创建网页的外围结构

 

3.class选择器/class选择符

语法:.class名{属性:属性值;}

说明:

1)当我们使用类选择符时,应先为每个元素定义一个类名称,

      类选择符的语法格式是:"如:<div class="top"></div>"

用法:class选择符更适合定义一类样式;

 

4.群组选择器


语法:选择符1,选择符2,选择符3......{属性:属性值;}

说明:当有多个选择符应用相同的样式时,可以将选择符用“,”分隔的方式,合并为一组。

 

5. 包含选择器

语法:选择符1    选择符2{属性:属性值;}

说明:选择符1和选择符2用空格隔开,含义就是选择符1中包含的所有选择符2;

选择符{margin:0 auto;}元素居中

 

6. 伪类选择器(伪类选择符)

语法 :

a:link{属性:属性值;}超链接的初始状态;

a:visited{属性:属性值;}超链接被访问后的状态;

a:hover{属性:属性值;}鼠标划过超链接时的状态;

a:active{属性:属性值;}即鼠标按下时超链接的状态;

说明:

1)当这4个超链接伪类选择符联合使用时,应注意他们的顺序,正常顺序为:

a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效;

2)为了简化代码,可以把伪类选择符中相同的声明提出来放在a选择符中;

例如:a{color:red;}     a:hover{color:green;} 表示超链接的三种状态都相同,只有鼠标划过变颜色。 

7.*通配符

语法:*{属性:属性值;}

说明:通配选择符的写法是“*”,其含义就是所有元素。

用法:常用来重置样式。

*{margin:0; padding:0}将所有元素的边界值和填充值清0。

二、选择符的权重



css中用四位数字表示权重,权重的表达方式如:0,0,0,0

类型选择符的权重为0001

class选择符的权重为0010

id选择符的权重为0100

子选择符的权重为0000

属性选择符的权重为0010

伪类选择符的权重为0010

伪元素选择符的权重为0001

包含选择符的权重:为包含选择符的权重之和

内联样式的权重为1000

继承样式的权重为0000

三、注释

html注释

<!--******注释内容++++++++++====-->

css的注释

/*-----------------注释内容--------------------*/

 

 

css基础-选择器的更多相关文章

  1. CSS基础选择器(选择器的优先级),CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成,盒模型-block,盒模型布局

    CSS基础选择器 (1)id选择器:   #       =>  标签拥有 id="user"  属性 <style> #user { width: 200px; ...

  2. Python 45 长度及颜色单位 、字体样式 、文本样式 、背景样式 、css基础选择器

    一:长度及颜色单位   长度单位       px(像素)        in(英寸)       pt(点),一个标准的长度单位,1pt = 1/72in       mm(毫米)       cm ...

  3. CSS入门(css简介与样式汇总、CSS的使用方式和特征、CSS基础选择器和复杂选择器、边框阴影)

    一.CSS的作用 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和可维护性 3.实现了内容(HTML)和表示(CSS)的分离 HTML和CSS之间有什么关系? HTML:构建网页的结构 C ...

  4. 0009 CSS基础选择器( 标签、类、id、通配符)

    typora-copy-images-to: media 第01阶段.前端基础.CSS基础选择器 CSS选择器(重点) 学习目标: 理解 能说出选择器的作用 id选择器和类选择器的区别 应用 能够使用 ...

  5. 2020年12月-第02阶段-前端基础-CSS基础选择器

    CSS选择器(重点) 理解 能说出选择器的作用 id选择器和类选择器的区别 1. CSS选择器作用(重点) 如上图所以,要把里面的小黄人分为2组,最快的方法怎办? 很多, 比如 一只眼睛的一组,剩下的 ...

  6. css 基础---选择器

    1.css基础 selector {property: value} eg: h1 {color:red; font-size:14px;} p { text-align: center; color ...

  7. CSS【03】:CSS 基础选择器与三种引入方式

    基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用: ...

  8. WEB学习-CSS基础选择器

    基础选择器 标签选择器 就是标签的名字. • <h1>前端与移动开发<span>1期班</span>基础班</h1> css: • <style ...

  9. CSS基础选择器总结

    基础选择器 作用 特点 使用情况 用法 标签选择器 可以选出所有相同的标签,比如p 不能差异化选择 较多 p {color:red;} 类选择器 可以选出1个或多个标签 可以根据需求选择 非常多 .n ...

  10. CSS 基础 选择器的使用汇总

    1.后代选择器 html 结构 <div class='father'> <p>小哥哥 小姐姐</p> <div> <p>小帅锅</p ...

随机推荐

  1. win 7 系统ie浏览器升级11版本后,f12功能不可用的问题

    自从把ie8升级成11后,f12功能就不可用了.浏览器兼容模式也无法使用. 解决办法:下载windows补丁 IE11-Windows6.1-KB3008923-x64.msu 下载地址: 64位:h ...

  2. MVC中重写RoleProvider角色管理

    /* 数据表SQL脚本 if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[FK_UsersInRoles_Ro ...

  3. zeroc

    ZeroC ICE 是指ZeroC公司的ICE(Internet Communications Engine)中间件平台.对于客户端和服务端程序的开发提供了很大的便利. 目前ICE平台中包括Ice,I ...

  4. 【转载】兼容所有浏览器的JQuery zClip插件实现复制到剪贴板功能

    文章转载自 代码家园 http://www.daimajiayuan.com/ 原文链接:http://www.daimajiayuan.com/sitejs-17973-1.html原文摘要: 相信 ...

  5. 【特效】hover向上翻转效果

    前段时间做了很多有关css3动画的项目.虽然当时都较圆满的完成了,但事后还是要总结一下的,趁着近期工作不忙,系统的学习了一些动画理论,重点看了transform3D变换,学习了translate平移. ...

  6. CSS滤镜效果

    使用 filter: blur() 生成毛玻璃效果 使用 filter: drop-shadow() 生成整体阴影效果 使用 filter: opacity() 生成透明度 blur生成阴影 通常我们 ...

  7. 双11电商剁手节,最全的H5互动营销案例合集

    距离双11不足一个月! 是否准备好为双十一疯狂剁手! 自从天猫2009年首创双11购物节以来双十一不仅成为了消费者的"剁手日" 更是每年企业营销的"狂欢节" 各 ...

  8. 张高兴的 Xamarin.Android 学习笔记:(二)“Hello World”

    完成环境配置后开始第一个简单项目.打开 Visual Studio 新建一个 Xamarin.Android 项目 "HelloAndroid".(GitHub:https://g ...

  9. C语言指针的那些坑

    那些年把我们坑惨的指针 一.引言 当我们使用c语言的时候,不可避免的就得用到指针,然后对于刚刚接触C语言的猿兄们,可能会有点不适应,特别是刚刚从python等离硬件很远的语言转过来的. 下面我为大家总 ...

  10. 设计模式:基于线程池的并发Visitor模式

    1.前言 第二篇设计模式的文章我们谈谈Visitor模式. 当然,不是简单的列个的demo,我们以电商网站中的购物车功能为背景,使用线程池实现并发的Visitor模式,并聊聊其中的几个关键点. 一,基 ...