html5--6-5 CSS选择器2

实例

学习要点

掌握常用的CSS选择器
了解不太常用的CSS选择器

什么是选择器

当我们定义一条样式时候，这条样式会作用于网页当中的某些元素，所谓选择器就是样式作用的对象.

插入样式的三种方法

内联样式表（行内）
内部样式表（style中）
外部样式表

创建一个外部样式表
在head中使用link元素插入样式表

CSS语法

单一元素的多个属性之间用分号隔开；若只有一个可以省略
多个元素之间用逗号隔开
如果值为若干单词，则要给值加引号;除了这种情况外其他时候不可以加引号
css代码的注释
样式的优先顺序:
- 设计者设计的样式>浏览器用户自定义的样式>浏览器自设的样式
- 强制优先级：！important

行内（内联）样式
内部样式：style中的样式
外部样式

层叠、继承、冲突

外观样式--比如字体、颜色可以继承;而布局有关的样式不可以继承，比如边框等

可以在同一个 HTML 文档内部引用多个外部样式表。

CSS选择器

常用选择器

通用选择器：“*”
元素选择器
id选择器:前面有一个 # 号
类选择器:前面加符号 .

给一个元素加上多个类名
指定某一特定的类

属性选择器

E[att] :选择具有att属性的E元素。需要选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。

可以根据多个属性进行选择，只需将属性选择器链接在一起即可。

E[att="val"]：选择具有att属性且属性值等于val的E元素。进一步缩小选择范围，（只选择有特定属性值的元素。）
E[att~="val"]:选择具有att属性且属性值有多个，其中一个的值等于val的E元素。
E[att|="val"]:选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

E[att^="val"]:选择具有att属性且属性值为以val开头的字符串的E元素。
E[att$="val"]:选择具有att属性且属性值为以val结尾的字符串的E元素。
E[att*="val"]:选择具有att属性且属性值为包含val的字符串的E元素。

html5--6-5 CSS选择器2相关推荐

html中井号的作用,html5 css选择器井号, 句点的区别
一.理解CSS的样式组成CSS里的样式表是有规则组成的,每条规则有三个部分组成: 1.选择器(如下面例子中的:"body"),告诉浏览器文档的哪个部分受规则影响: 2.属性(如实例 ...
好程序员HTML5前端教程-css的引入方式和选择器
好程序员HTML5前端教程-css的引入方式和选择器 01.引入css方式(重点掌握) 行内样式内接样式外接样式 3.1 链接式 3.1 导入式 css介绍现在的互联网前端分三层: HTML:超 ...
HTML5类选择器使用,CSS选择器种类及使用方法
CSS选择器种类及使用方法 2018年04月17日 | 萬仟网IT编程 | 我要评论 css选择器有通配符选择器书写格式:*+{声名块} 并集选择器/组合选择器书写格式;元素或类或id+" ...
html 井号作用,html5 css选择器。井号，句号的区别
一.理解CSS的样式组成CSS里的样式表是有规则组成的,每条规则有三个部分组成:1.选择器(如下面例子中的:"body"),告诉浏览器文档的哪个部分受规则影响:2.属性(如实例中的 ...
HTML5 CSS选择器总结（强烈推荐）
你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领 ...
HTML5+CSS3-边框背景图、多背景图、CSS选择器、网络字体、边框背景图片、过渡、放大、旋转
边框背景图片 1. background-origin:设置背景图片的起始原点 background-origin:border-box;------背景图片从边框开始显示 background-o ...
HTML5网页设计样式-基本CSS选择器
选择器是用来定位CSS样式代码控制的对象,实现各种效果.主要包括基本选择器和复合选择器. 基本CSS选择器 1.标记选择器每一种HTML标记的名称都可以作为相应的选择器名称,基本格式如下: 标记名称 ...
html5通用兄第选择器,css 通用兄弟选择器( ~ )
stylus设置兄弟元素样式: 鼠标浮动在 .video-li 元素上时,.video-li 兄弟中 .video-info 下的 .word 显示. .video-li &:hover ~ ...
html5类选择器用什么表示,HTML_揭秘常用的五类CSS选择器用法，有许多新手朋友不知道在什么 - phpStudy...
揭秘常用的五类CSS选择器用法有许多新手朋友不知道在什么情况下运用什么样的CSS选择器,针对新手朋友,对CSS选择器作一些简单的说明,这里重点介绍一下最常用的五类CSS选择器的使用. 本文向大家描述 ...
html5选择器优先级,css选择器优先级怎么比较
css选择器优先级怎么比较 CSS选择器中比较常见的有标签选择器.ID选择器.类选择器以及子选择器.而事实上,CSS选择器如果细分下来,竟然多达40多种.那他们的优先级该怎么比较呢,下面就来看看吧. ...

html5--6-5 CSS选择器2

html5--6-5 CSS选择器2

实例

学习要点

什么是选择器

常用选择器

html5--6-5 CSS选择器2相关推荐

最新文章

热门文章