css基础-选择器
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基础-选择器的更多相关文章
- CSS基础选择器(选择器的优先级),CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成,盒模型-block,盒模型布局
CSS基础选择器 (1)id选择器: # => 标签拥有 id="user" 属性 <style> #user { width: 200px; ...
- Python 45 长度及颜色单位 、字体样式 、文本样式 、背景样式 、css基础选择器
一:长度及颜色单位 长度单位 px(像素) in(英寸) pt(点),一个标准的长度单位,1pt = 1/72in mm(毫米) cm ...
- CSS入门(css简介与样式汇总、CSS的使用方式和特征、CSS基础选择器和复杂选择器、边框阴影)
一.CSS的作用 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和可维护性 3.实现了内容(HTML)和表示(CSS)的分离 HTML和CSS之间有什么关系? HTML:构建网页的结构 C ...
- 0009 CSS基础选择器( 标签、类、id、通配符)
typora-copy-images-to: media 第01阶段.前端基础.CSS基础选择器 CSS选择器(重点) 学习目标: 理解 能说出选择器的作用 id选择器和类选择器的区别 应用 能够使用 ...
- 2020年12月-第02阶段-前端基础-CSS基础选择器
CSS选择器(重点) 理解 能说出选择器的作用 id选择器和类选择器的区别 1. CSS选择器作用(重点) 如上图所以,要把里面的小黄人分为2组,最快的方法怎办? 很多, 比如 一只眼睛的一组,剩下的 ...
- css 基础---选择器
1.css基础 selector {property: value} eg: h1 {color:red; font-size:14px;} p { text-align: center; color ...
- CSS【03】:CSS 基础选择器与三种引入方式
基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用: ...
- WEB学习-CSS基础选择器
基础选择器 标签选择器 就是标签的名字. • <h1>前端与移动开发<span>1期班</span>基础班</h1> css: • <style ...
- CSS基础选择器总结
基础选择器 作用 特点 使用情况 用法 标签选择器 可以选出所有相同的标签,比如p 不能差异化选择 较多 p {color:red;} 类选择器 可以选出1个或多个标签 可以根据需求选择 非常多 .n ...
- CSS 基础 选择器的使用汇总
1.后代选择器 html 结构 <div class='father'> <p>小哥哥 小姐姐</p> <div> <p>小帅锅</p ...
随机推荐
- win 7 系统ie浏览器升级11版本后,f12功能不可用的问题
自从把ie8升级成11后,f12功能就不可用了.浏览器兼容模式也无法使用. 解决办法:下载windows补丁 IE11-Windows6.1-KB3008923-x64.msu 下载地址: 64位:h ...
- MVC中重写RoleProvider角色管理
/* 数据表SQL脚本 if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[FK_UsersInRoles_Ro ...
- zeroc
ZeroC ICE 是指ZeroC公司的ICE(Internet Communications Engine)中间件平台.对于客户端和服务端程序的开发提供了很大的便利. 目前ICE平台中包括Ice,I ...
- 【转载】兼容所有浏览器的JQuery zClip插件实现复制到剪贴板功能
文章转载自 代码家园 http://www.daimajiayuan.com/ 原文链接:http://www.daimajiayuan.com/sitejs-17973-1.html原文摘要: 相信 ...
- 【特效】hover向上翻转效果
前段时间做了很多有关css3动画的项目.虽然当时都较圆满的完成了,但事后还是要总结一下的,趁着近期工作不忙,系统的学习了一些动画理论,重点看了transform3D变换,学习了translate平移. ...
- CSS滤镜效果
使用 filter: blur() 生成毛玻璃效果 使用 filter: drop-shadow() 生成整体阴影效果 使用 filter: opacity() 生成透明度 blur生成阴影 通常我们 ...
- 双11电商剁手节,最全的H5互动营销案例合集
距离双11不足一个月! 是否准备好为双十一疯狂剁手! 自从天猫2009年首创双11购物节以来双十一不仅成为了消费者的"剁手日" 更是每年企业营销的"狂欢节" 各 ...
- 张高兴的 Xamarin.Android 学习笔记:(二)“Hello World”
完成环境配置后开始第一个简单项目.打开 Visual Studio 新建一个 Xamarin.Android 项目 "HelloAndroid".(GitHub:https://g ...
- C语言指针的那些坑
那些年把我们坑惨的指针 一.引言 当我们使用c语言的时候,不可避免的就得用到指针,然后对于刚刚接触C语言的猿兄们,可能会有点不适应,特别是刚刚从python等离硬件很远的语言转过来的. 下面我为大家总 ...
- 设计模式:基于线程池的并发Visitor模式
1.前言 第二篇设计模式的文章我们谈谈Visitor模式. 当然,不是简单的列个的demo,我们以电商网站中的购物车功能为背景,使用线程池实现并发的Visitor模式,并聊聊其中的几个关键点. 一,基 ...