【CSS选择器】
"
目录
一、介绍
CSS（Cascading Style Sheet，层叠样式表）定义如何显示HTML元素.
当浏览器读到一个样式表时，便会按照这个样式表来对文档进行格式化（渲染）
优点：内容样式分离，便于团队开发；样式可复用，提高开发效率；页面精确控制，实现精美、简化复杂的页面；更利于搜索引擎的搜索；结构更加突出；
二、语法
CSS样式由两部分组成：选择器: 声明; 声明又包括属性和属性值，每个声明之后用分号结束。
三、引入方式
1. 行内样式
行内式是在标记的style属性中设定CSS样式，立即生效，无须引用. 不推荐大规模使用
2. 嵌入式
嵌入式时将CSS样式集中写在网页的head标签内的style标签中，如下：
-
<!DOCTYPE html>
-
<html lang="zh-CN">
-
<head>
-
<meta charset="UTF-8">
-
<title>CSS</title>
-
<style>
-
/*class标记前加"."*/
-
.class_sign {color: red}
-
/*id标记前加"#"*/
-
#id_sign {color: green}
-
</style>
-
</head>
-
<body>
-
<div class="class_sign">Hello world</div>
-
<div id="id_sign">Hello world</div>
-
</body>
-
</html>
3. 外部样式
写在单独的样式文件中，可对整个网站的所有网页有效，通过链接的方式引入，链接语法：
-
<!DOCTYPE html>
-
<html lang="zh-CN">
-
<head>
-
<meta charset="UTF-8">
-
<title>CSS</title>
-
<!--引入css文件样式，自动匹配标签-->
-
<link rel="stylesheet" href="style.css" />
-
</head>
-
<body>
-
<div class="class_sign">Hello world</div>
-
<div id="id_sign">Hello world</div>
-
</body>
-
</html>
四、选择器
1. 基本选择器
- 元素选择器
- ID选择器
- 类选择器
样式类名不要以数字开头（有些浏览器不识别）
标签中的class属性如果有多个，可用空格分隔. - 通用选择器
2. 组合选择器
- 后代选择器
- 儿子选择器
- 毗邻选择器
- 弟弟选择器
3. 属性选择器
4. 不常用选择器
-
<!DOCTYPE html>
-
<html lang="zh-CN">
-
<head>
-
<meta http-equiv="content-Type" charset="UTF-8">
-
<title>CSS</title>
-
<!--不常用选择器-->
-
<style>
-
/*选择所有带有type属性且其值以cir开头的元素*/
-
[type^="cir"] {
-
color: red;
-
}
-
/*选择所有带有type属性且其值以are结尾的元素*/
-
[type$="are"] {
-
color: blue;
-
}
-
/*选择所有带有type属性且其值包含(字符串包含)is的元素*/
-
[type*="is"] {
-
color: green;
-
}
-
/*选择所有带有class属性且其值包含(多个值中包含)tag1的元素*/
-
[class~="tag1"] {
-
color: orchid;
-
}
-
</style>
-
</head>
-
<body>
-
<ul type="circle disc"><li>我是带有type属性且其值以cir开头的元素</li></ul>
-
<ul type="square"><li>我是带有type属性且其值以are结尾的元素</li></ul>
-
<ul type="disc"><li>我是带有type属性且其值包含(字符串包含)is的元素</li></ul>
-
<div class="tag1 tag2"><p>我是带有class属性且其值包含(多个值中包含)tag1的元素</p></div>
-
</body>
-
</html>
5. 分组和嵌套
- 分组
-
<!DOCTYPE html>
-
<html lang="zh-CN">
-
<head>
-
<meta http-equiv="content-Type" charset="UTF-8">
-
<title>CSS</title>
-
<!--分组选择器-->
-
<style>
-
/*（将div标签和span标签统一设置字体为红色）*/
-
div,
-
span {
-
color: red;
-
}
-
</style>
-
</head>
-
<body>
-
<div>我是div标签</div>
-
<span>我是span标签</span>
-
</div>
-
</body>
-
</html>
- 嵌套
-
<!DOCTYPE html>
-
<html lang="zh-CN">
-
<head>
-
<meta http-equiv="content-Type" charset="UTF-8">
-
<title>CSS</title>
-
<!--嵌套选择器-->
-
<style>
-
/*（将类为tag的内部的所有p标签设置字体为蓝色）*/
-
.tag p {
-
color: blue;
-
}
-
/*（将id为tag的内部的所有span标签设置字体为绿色）*/
-
#tag span {
-
color: green;
-
}
-
</style>
-
</head>
-
<body>
-
<div class="tag" id="tag">
-
<p>我是p标签</p>
-
<span>我是span标签</span>
-
</div>
-
</body>
-
</html>
6. 伪类选择器
-
<!DOCTYPE html>
-
<html lang="zh-CN">
-
<head>
-
<meta http-equiv="content-Type" charset="UTF-8">
-
<title>CSS</title>
-
<!--伪类选择器-->
-
<style>
-
/*未访问的链接颜色*/
-
a:link {
-
color: #F00;
-
}
-
/*已访问的链接颜色*/
-
a:visited {
-
color: #0F0;
-
}
-
/*鼠标移动到链接上时的颜色*/
-
a:hover {
-
color: #F0F;
-
}
-
/*鼠标点击链接时的颜色*/
-
a:active {
-
color: #00F;
-
}
-
/*input输入框获取焦点时的样式*/
-
input:focus {
-
outline: none;
-
background-color: #EEE;
-
color: #00F;
-
}
-
/*（伪类选择器还可应用于更多标签，如select标签）*/
-
</style>
-
</head>
-
<body>
-
<div>
-
<a href="https://blog.csdn.net/qq_41964425" target="_blank">CSDN</a>
-
<a href="http://css.doyoe.com" target="_blank">CSS参考手册</a>
-
</div>
-
<div>
-
<label><input type="text" placeholder="我是input输入框"></label>
-
</div>
-
</body>
-
</html>
7. 伪元素选择器
- first-letter
- before
 - after
before与after多用于清除浮动.
8. 选择器优先级
#. CSS继承：
- 继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的.
- 继承是一种机制，它允许的样式不仅可以应用于某个特定的元素，还可以应用于它的后代.
（例如一个body标签定义的字体颜色值也会应用到body标签内的所有标签） - CSS继承性的权重是非常低的，其优先级为0，比普通元素的优先级还要低.
（也就是说：只要给后代设置样式，就可覆盖掉祖先定义的样式） - 继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但是CSS继承也是有限制的.
（比如border, margin, padding, bacckground等就不能被继承）
#. 选择器的优先级：
上面说明了很多种的选择器，也就是说在一个HTML页面中可以通过很多种方式找到一个元素并且为其设置样式，那么浏览器根据什么来决定应该应用哪个样式呢？
其实是按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图：
此外，还可以通过添加 !important 方式来强制让样式生效，但并不推荐使用，因为过多的使用会使样式文件混乱，以至于难以维护。
除非万不得已，否则不要使用：
"
【CSS选择器】的更多相关文章
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- css选择器
常用css选择器,希望对大家有所帮助,不喜勿喷. 1.*:通用选择器 * { margin: 0; padding: 0; } 选择页面上的全部元素,通常用于清除浏览器默认样式,不推荐使用. 2.#i ...
- dynamic-css 动态 CSS 库，使得你可以借助 MVVM 模式动态生成和更新 css，从 js 事件和 css 选择器的苦海中脱离出来
dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...
- CSS选择器的权重与优先规则？
我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...
- css选择器的使用详解
-.css选择器的分类: 二.常用选择器详解: 1.标签选择器: 语法: 标签名 { 属性:属性值; } 代码示例: h1 { color: #ccc; font-size: 28px; } 2.类选 ...
- js,jq,css选择器
js获取节点: var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; / ...
- CSS系列：CSS选择器
选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记样式都是通过不同的CSS选择器来控制的.用户只需要通过选择对不同的HTML标签进行选择,并赋予各种样式声明,即可实现各种效果. ...
- 细说CSS选择器
众所周知,CSS的一个核心特征就是能向文档中的一组元素类型应用某些规则.每个规则都有两个基本部分:选择器(selector)和声明块(declaration block).下图显示了规则的各个部分. ...
- CSS选择器 转
来自于:http://www.cnblogs.com/webblog/archive/2009/08/07/1541005.html 最近在研究jQuery的选择器,大家知道jQuery的选择器和cs ...
- HTML5 -入门 (---css样式-------------（css基础与css选择器）---------------------—）
---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...
随机推荐
- Hibernate：对象关系映射（一对一，一对多，多对一，多对多）
如需转载,请说明出处:http://www.cnblogs.com/gudu1/p/6895610.html Hibernate通过关系映射来表示数据库中表与表之间的关系,关系映射可以通过两种方式:配 ...
- DM9000C网卡驱动程序编写与测试
一般网卡驱动程序厂商会给我们提供一份模板驱动,我们的工作就是需要根据自己的需要更改这个模板驱动 1.DM9000C的硬件连接 硬件连接图如下所示:它接在S3C2440的BANK4内存控制器上,它只占用 ...
- adb logcat日志抓取
adb命令 logcat日志抓取 一.logcat抓log方法:adb logcat命令,可以加条件过滤 1.安装SDK(参考android sdk环境安装) 2.使用数据线链接手机,在手机助手的sd ...
- 面试题：HashSet、TreeSet 和HashMap 的实现与原理
说下 TreeSet 和 HashSet 什么区别呢? 它们的区别点主要在他们的底层数据结构不同,HashSet 使用的是 HashMap 来实现,而 TreeSet 使用的是 TreeMap 来实现 ...
- 第四十篇 入门机器学习——Numpy.array的基本操作——向量及矩阵的运算
No.1. Numpy.array相较于Python原生List的性能优势 No.2. 将向量或矩阵中的每个元素 + 1 No.2. 将向量或矩阵中的所有元素 - 1 No.3. 将向量或矩阵中的所有 ...
- oracle中日期的函数的使用
--oracle中trunc()函数的用法 .select trunc(sysdate) from dual --2019-6-18 今天的日期为209-6-18 .select trunc(sysd ...
- 自动化脚本-配置LVS（DR模式）
一,获取所需配置的主机IP cat get_ip.sh #!/bin/bash #将获得到的IP地址写进IP.txt >ip.txt #将原有的hosts信息清除 >/root/.ssh/ ...
- Spring Boot 2.x基础教程：找回启动日志中的请求路径列表
如果您看过之前的Spring Boot 1.x教程,或者自己原本就对Spring Boot有一些经验,或者对Spring MVC很熟悉.那么对于Spring构建的Web应用在启动的时候,都会输出当前应 ...
- 爬虫(十一)：selenium爬虫
1. selenium基础 selenium部分可以去看我写的selenium基础部分,由于链接太多了这里就不发出来了. 代理ip: 有时候频繁爬取一些网页.服务器发现你是爬虫后会封掉你的ip地址.这 ...
- centos长ping输出日志的脚本
为监控某服务器的网络情况,制作一个sh脚本,记录ping的长过程,并输出日志以备观察. 1.脚本如下 cat /home/summer/ping100.sh #!/bin/sh ping 172.16 ...