web（八）CSS选择器
标签选择器
使用html标签筛选需要渲染的网页元素。
使用场景
修改标签的默认样式，例如ul li 有默认的内边距，开发时应去掉标签的默认样式。
设定全局字体样式。
根据分辨率设定html标签的默认字体。
div {/*直接用标签作为选择器*/
background-color: yellow;
}
类选择器
为一组样式属性进行命名（类名），标签使用时需要声明，使用频率最多的选择器。
类选择器的特点
多个标签可以引用同一个样式类，提高程序的公用性。
通过语义化的类名定义增加了程序可读性。
标签可以通过class引入多个样式类名，用空格分开。
类名区分大小写。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css"><!--使用style标签包裹-->
.aClass{
background-color: #2E8B57;
}
.bClass{
color: red;
}
</style>
</head>
<body>
<div class="aClass bClass">这是一个div容器</div>
</body>
</html>
ID选择器
根据标签的id属性筛选要被渲染的标签（很少使用）。
注意事项
ID不能重复，因此每个元素都要编写一个id选择器，无法提炼公用样式。
文档内元素的ID是区分大小写的。
id命名规则是由字母、数字和下划线组成。
但是数字不能开头。
- 程序示例
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css"><!--使用style标签包裹-->
#v_div{
color: green;
}
</style>
</head>
<body>
<div id="v_div">这是一个div容器</div>
</body>
选择器分组
对一组选择器赋予同样的样式属性。
使用场景：对于一组公用标签的相同属性进行赋值。
基本语法
selector1,selector2…..{/*若干个选择器，用逗号分隔*/
此处为css属性以及取值
}程序示例
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css"><!--使用style标签包裹-->
#v_div,a,.v_p{
border: solid 3px #800080;
}
</style>
</head>
<body>
<div id="v_div">这是一个div容器</div>
<p class="v_p">段落</p>
<a href="#">超链接</a>
</body>
派生选择器
又称为后代选择器，按照html标签的层级关系（全部后代子孙）筛选被渲染的标签。
基本语法
<!--父在前，子在后，并用空格隔开-->
selector1 selector2…..{
此处为css属性以及取值
}程序示例
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.parent p {
color: red;
}
</style>
</head>
<body>
<div class = "parent">
<div>
<p>派生选择器</p>
</div>
</div>
</body>
后代选择器
又称为子元素选择器，按照html标签的层级关系（直接后代），筛选要被渲染的标签。
基本语法
selector1>selector2{
此处为css属性以及取值
}程序示例
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css"><!--使用style标签包裹-->
.parent>div>p {
color: red;
}
</style>
</head>
<body>
<div class = "parent">
<div>
<p>派生选择器</p>
</div>
</div>
</body>
属性选择器
根据元素的html属性或属性值筛选要被渲染的元素。
基本语法
selector[attr][attr=‘value’]{
此处为css属性以及取值
}程序示例
<style type="text/css">
a[href] {
color:yellow;
}
a[href][title] {
color:red;
}
a[href='www.baidu.com'] {
color:blue;
}
</style>
伪类选择符
按照用户操作状态筛选需要渲染的元素，在css2中定义的伪类选择符一般用来操作超链接。
伪类选择符的状态
E:link:筛选未被访问的链接。
E:visited :筛选已经被被访问的链接。
E:hover:筛选当前鼠标悬停时的任何元素。
E:active:筛选被用户激活（鼠标点击）时的任何元素。
<style type="text/css"><!--使用style标签包裹-->
.mydiv:link{
color: blue;
}
.mydiv:visited{
color: gray;
}
.mydiv:hover {
color: purple;
}
.mydiv:active{
color: red;
}
</style>
<!--.mydiv为类选择器-->
伪对象选择符
在其他选择器筛选的结果中继续筛选需要渲染的标签
- E::first-letter：设置符合E筛选条件的第一个字符的样式。
- E::first-line：设置符合E筛选条件内的第一行的样式。
- E::before：设置符合E筛选条件的前一个元素的样式。
- E::after：设置符合E筛选条件的后一个元素的样式。
<style type="text/css">
.myObj::first-line {/*第一行字体为红色*/
color: blue;
}
</style>
选择器的优先级别
- 当同一个元素被多个选择符筛选，并且继承父元素的样式时，优先级别如下：
- !important的优先级别最高。
- 继承的优先级别最低，私有css属性将覆盖继承的属性。
- 同一个元素被不同选择器筛选，又无!important修饰时优先级别计算公式
- ID选择符个数*100+类选择符个数*10+标签选择符个数
web（八）CSS选择器的更多相关文章
- web前端----css选择器样式
一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...
- 简易数据分析 15 | Web Scraper 高级用法——CSS 选择器的使用
这是简易数据分析系列的第 15 篇文章. 年末事情比较忙,很久不更新了,后台一直有读者催更,我看了一些读者给我的私信,发现一些通用的问题,所以单独写篇文章,介绍一些 Web Scraper 的进阶用法 ...
- 第八十六节，html5+css3pc端固定布局,网站结构,CSS选择器,完成导航
html5+css3pc端固定布局,网站结构,CSS选择器,完成导航 页面采用1280的最低宽度设计,去掉滚动条为1263像素. 项目是PC端的固定布局,会采用像素(px)单位. 网站结构语义 在没有 ...
- WEB学习-CSS基础选择器
基础选择器 标签选择器 就是标签的名字. • <h1>前端与移动开发<span>1期班</span>基础班</h1> css: • <style ...
- PHP全栈开发（八）：CSS Ⅰ 选择器
直到目前为止,我们把从HTML中的数据是如何通过PHP到服务器端,然后又通过PHP到数据库,然后从数据库中出来,通过PHP到HTML的整个过程通过一个案例过了一遍. 可以说,这些才刚刚开始.下面我们开 ...
- CSS选择器（二）
五.属性选择器. 属性选择器可以根据元素的属性及属性值来选择元素. 简单属性选择 如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器. 例子 1 如果您希望把包含标题(title ...
- CSS选择器、标签，div的位置。
今天是休假,布置了一个作业,是利用CSS制作斯坦福大学官网.虽然是一个并不复杂的制作,却让我第一次体会到了想摔鼠标的感觉. 遇到了很多问题,却找不出自己到底是哪里出了问题,简简单单的一个logo.足足 ...
- CSS选择器、CSS hack及CSS执行效率
主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS 一.CSS选择器.优先级与 ...
- 你真的精通 CSS 了？来挑战一下 CSS 选择器测验吧
CSS 选择器赋予 CSS 强大的 HTML 元素匹配功能.作为前端开发人员必须要掌握的一部分,可能基本的大家都知道.但是你真的精通 CSS 了吗?挑战一下 CSS 选择器测验就知道. 您可能感兴趣的 ...
- HTML 学习笔记 CSS(选择器3)
CSS 属性选择器 属性选择器可以根据元素的额属性以及属性值来选择元素 例子1 如果 你希望把包含title的所有元素变成红色 *[title] {color:red} 例子2 与上面类似 可以只对有 ...
随机推荐
- java的一些基本概念——java11、jdk、jre、jvm等
Java字节码 先介绍下c语言的编译过程,写好代码用编译器(比如gcc)编译过后是机器能够直接执行的二进制机器码. java也类似这种情况,但是java代码文件编译过后不是任何机器都能识别的机器码,而 ...
- C# 在创建窗口句柄之前,不能在控件上调用 Invoke 或 BeginInvoke
http://www.cnblogs.com/fish124423/archive/2012/10/16/2726543.html 在Invoke(....)之前加上1 this.components ...
- esay-ui学习笔记(一)
JavaScript prototype用法 prototype 属性使您有能力向对象添加属性和方法. object.prototype.name=value <script type=&quo ...
- 1_Linux概述
linux就是一套操作系统 //系统调用与内核如果能够参考硬件的功能函数并修改你的操作系统程序代码,那经过改版后的操作系统就能够在另一个硬件平台上面运行了,这个操作通常被称为"软件移植&qu ...
- php+mysql 解决emoji问题
问题描述: php项目使用了emoji表情符号��报错 网上查询资料解决步骤: 1.升级MySQL至5.5或以上(以支持emoji) 2.更改数据库,数据表字符编码为utf8mb4 更改数据库连接方式 ...
- python使用os.listdir和os.walk获得文件的路径
python使用os.listdir和os.walk获得文件的路径 目录 情况1:在一个目录下面只有文件,没有文件夹,这个时候可以使用os.listdir 情况2:递归的情况,一个目录下面既有目录 ...
- [python]PyPI使用国内源
PyPI使用国内源 对于默认的pip源的速度太慢,一些国内的pip源,如下: 豆瓣(douban) https://pypi.douban.com/simple 阿里云 http://mirrors. ...
- 『OpenCV3』滤波器实现及使用滤波器降噪
一.滤波器实现 我们实现这样一个基于拉普拉斯算子的滤波器核心,并使用它进行滤波,这可以做到锐化图像的效果, 0 -1 0 -1 5 -1 0 -1 0 首先我们完全手动的进行滤波,依赖指针操作, vo ...
- idea中springboot项目程序入口右键不显示run as的原因
今天在idea中导入了springboot的项目,但是在程序的入口处右键单击没有出现run as 的程序启动方式,主要原因在于idea中右面的maven projects中没加载项目,需要点击“+“ ...
- 获取当前页面url并截取所需字段
let url = window.location.href; // 动态获取当前url // 例: "http://i.cnblogs.com/henanyundian/web/app/# ...