css选择器.md
css选择器总结
1、元素选择器
如：*{},body{},p{} ; xml中note{},to{},from{}
2、class与id选择器
如：.class{},#id{}
3、伪类选择器
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| :link | a:link | 选择所有未访问链接 |
| :visited | a:visited | 选择所有访问过的链接 |
| :active | a:active | 选择正在活动的链接 |
| :hover | a:hover | 把鼠标放在链接上的状态 |
| :focus | input:focus | 选择元素输入后具有焦点 |
| :first-letter | p:first-letter | 选择每个
元素的第一个字母 |
| :first-line | p:first-line | 选择每个
元素的第一行 |
| :first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的
元素 |
| :before | p:before | Insert content before every
element |
| :after | p:after | 在每个
元素之前插入内容 |
| :lang(language) | p:lang(it) | 为
元素的lang属性选择一个开始值 |
4、属性选择器
| 名称 | 示例 | 示例说明 |
|---|---|---|
| 属性选择器 | [title]{} | 选择带有title属性的元素 |
| 属性和值选择器 | [title=w3c]{} | 选择title属性为w3c的元素 |
| 属性和值的选择器 - 多值 | [title~=hello]{},[lang|=en]{} | 选择title里有hello的元素，选择lang里有en的元素 |
5、组合选择符
| 选择器 | 用法 | 描述 |
|---|---|---|
| 后代选择器 | 空格" " | 所有后代元素 |
| 子代选择器 | 大于号">" | 儿子辈后代元素 |
| 相邻兄弟选择器 | 加号"+" | 向下相邻的第一个元素，必须有相同的父元素 |
| 普通兄弟选择器 | 破折号"~" | 向下相邻的所有元素 |
（1）后代选择器
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
div p{background-color:yellow;}
</style>
</head>
<body>
<p>后代选择器</p>
<p>后代选择器</p>
<div>
<nav>
<p>后代选择器</p>
<p>后代选择器</p>
</nav>
<p>后代选择器</p>
<p>后代选择器</p>
</div>
<p>后代选择器</p>
<p>后代选择器</p>
</body>
</html>
（2）子代选择器
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>子代选择器</title>
<style type="text/css">
div>p{background-color:yellow;}
</style>
</head>
<body>
<p>子代选择器</p>
<p>子代选择器</p>
<div>
<nav>
<p>子代选择器</p>
<p>子代选择器</p>
</nav>
<p>子代选择器</p>
<p>子代选择器</p>
</div>
<p>子代选择器</p>
<p>子代选择器</p>
</body>
</html>
（3）相邻兄弟选择器
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>相邻兄弟选择器</title>
<style type="text/css">
div+p{background-color:yellow;}
</style>
</head>
<body>
<p>相邻兄弟选择器</p>
<p>相邻兄弟选择器</p>
<div>
<nav>
<p>相邻兄弟选择器</p>
<p>相邻兄弟选择器</p>
</nav>
<p>相邻兄弟选择器</p>
<p>相邻兄弟选择器</p>
</div>
<p>相邻兄弟选择器</p>
<p>相邻兄弟选择器</p>
</body>
</html>
(4)普通兄弟选择器
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>普通兄弟选择器</title>
<style type="text/css">
div~p{background-color:yellow;}
</style>
</head>
<body>
<p>普通兄弟选择器</p>
<p>普通兄弟选择器</p>
<div>
<nav>
<p>普通兄弟选择器</p>
<p>普通兄弟选择器</p>
</nav>
<p>普通兄弟选择器</p>
<p>普通兄弟选择器</p>
</div>
<p>普通兄弟选择器</p>
<p>普通兄弟选择器</p>
</body>
</html>
6、选择器分组
如：h1,h2,h3{}
总结
伪类选择 与 属性选择 的示例代码
伪类与伪元素的区别
css选择器.md的更多相关文章
- CSS选择器的权重与优先规则？
我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...
- CSS选择器及其优先级
一:一些普通的选择器 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&quo ...
- 前端极易被误导的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选择器的分类: 二.常用选择器详解: 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).下图显示了规则的各个部分. ...
随机推荐
- js插件---10个免费开源的JS音乐播放器插件
js插件---10个免费开源的JS音乐播放器插件 一.总结 一句话总结:各种插件都有很多,多去找. 二.js插件---10个免费开源的JS音乐播放器插件 亲测可用 音乐播放器在网页设计中有时候会用到, ...
- POJ 2391 Floyd+二分+拆点最大流
题意: 思路: 先Floyd一遍两两点之间的最短路 二分答案 建图 跑Dinic 只要不像我一样作死#define int long long 估计都没啥事-- 我T到死辣--.. 最后才改过来-- ...
- JavaScript--数据结构与算法之散列
散列:实现散列表的数据后可以快速地实现插入或者删除.但是对于实现查找操作则效率非常的低.散列表的底层是数组实现的,长度是预先设定,可以随时根据需求增加.所有的元素根据和该元素对应的键,保存在特定的位置 ...
- hive load文件第一个字段为NULL
在hive中,通常须要载入外部数据源.load文件时.第一个字段会出现NULL. 比如: 1.运行load语句: LOAD DATA LOCAL INPATH 'test.txt' OVERWRITE ...
- dlopen 方式调用 Linux 的动态链接库
在dlopen()函数以指定模式打开指定的动态链接库文件.并返回一个句柄给 dlsym()的调用进程. 使用 dlclose()来卸载打开的库. 功能:打开一个动态链接库,并返回动态链接库的句柄 包括 ...
- iOS - 系统经常使用框架(framework)的简介
系统框架(framework)的简介 ImageIO - 该框架的接口可用于导入或导出图像数据及图像元数据 CoreTelephony - 获取IMSI号,SIM卡背面的号码是SIM卡的电子串号, ...
- String类型转Long类型需要注意的问题
转自:https://blog.csdn.net/m819177045/article/details/52669785/
- Day6下午题解1
预计分数:100+?+30=130+? 实际分数:100+25+30=155 T1 https://www.luogu.org/problem/show?pid=T15920 DP裸题,用dp[i][ ...
- layui中select的注意
假如不在select 标签里面加上过滤lay-filter 那么你就算怎么绑定事件都是没有任何效果 页面上代码 js文件:
- ArcGIS小技巧——提取面要素的质心点
如下图,现在要做这样一件事,提取面图层中每一个图斑的质心点,然后使用质心点提取图层中的一个属性值,并在此基础上进行克里金插值,生成该属性的空间插值图.当然,今天这段文字主要简单说一下怎样提取面图层的质 ...