css选择器
常用css选择器,希望对大家有所帮助,不喜勿喷。
1、*:通用选择器
* {
margin: 0;
padding: 0;
}
选择页面上的全部元素,通常用于清除浏览器默认样式,不推荐使用。
2、#id:id选择器
#id {
width:1200px;
height: 500px;
}
优先级别较高,id名最好唯一。
3、.class:类选择器
.class {
width: 1200px;
height: 500px;
}
class名可以重复,可以修饰多个元素。
4、 tagName:标签选择器
div {
width: 1200px;
height: 500px;
}
查找页面所有指定的标签
5、 selector1 selector2:后代选择器
div p {
width: 1200px;
height: 500px;
}
例如:查找div后代所有的p标签
6、selector1 > selector2 : 子选择器
div > p {
width: 1200px;
height: 500px;
}
例如:查找div子类所有的p标签(只能是子类)
7、 selector1 + selector2 :相邻选择器
div + p {
width: 1200px;
height: 500px;
}
例如:查找与div相邻的p标签
8、 selector1 ~ selector2 : 兄弟选择器
div ~ p {
color: red;
}
例如:查找div后面所有同级的p标签
9、 属性选择器
1 selector[title] :
p [id] { /*查找包含id属性的p标签*/
color: red;
}
2 selector[href="foo"]
a [href="www.baidu.com"] { /*查找href="www.baidu.com的a标签"*/
color: black;
}
3 selector[href^="foo"]
a [href ^= "http"] {/*查找href已http开头的a标签*/
color: black;
}
4 selector[href$="foo"]
a [href $= "rar"] {/*查找href已rar结尾的a标签*/
color: black;
}
5 selector[href*="foo"]
a [href *= "o"] {/*查找href包含‘o'的a标签*/
color: black;
}
6 selector[class~="foo"]
p [class ~= "b"] {/*class类名为b且b前面或后面有空格的p标签(空格分隔多值的标签 <div class="a b"></div>)*/
color: black;
}
7 selector[class|="foo"]
p [class |= "b"] {/*class类名为b且b后面有横杠的p标签(<div class="b-c"></div>)*/
color: black;
}
10、 伪性选择器
1 selector:link 平常的状态(默认)。
2 selector:visited 被点击过之后
3 selector:hover 鼠标放到连接上的时候
4 selector:active 连接被按下的时候
5 selector:checked 按钮被选中 (input[type=radio]:checked)
6 selector:before,selector:after
7 selector1:not(selector2) 取反
8 selector::first-line 选择标签下第一行
9 selector::first-letter 选择标签下第一个字
10 selector::selection 选择被选中的文字
11 selector:first-child (p:first-child)找到P,然后找P的父级 再找父级下第一个元素是P(匹配的是某父元素的第一个子元素,可以说是结构上的第一个子元素。)
12 selector:first-of-type (p:first-of-type)找到P,然后找P的父级 再找父级下第一个元素是P(匹配的是该类型的第一个,这里不再限制是第一个子元素了,只要是该类型元素的第一个就行了,当然这些元素的范围都是属于同一级的,也就是同辈的。)
13 selector:last-child (p:last-child)找到P 然后找P的父级 再找父级下最后一个元素是P
14 selector:last-of-type (p:last-of-type) 找到P 然后找P的父级 再找父级下最后一个元素是P
15 selector:nth-child(2) (li:nth-child(2)) 找到li 然后找li的父级 再找父级下第二个元素是li
16 selector:nth-of-type(2) (li:nth-of-type(2)) 找到li 然后找li的父级 再找父级下第二个元素是li
17 selector:nth-last-child(2) (li:nth-last-child(2)) 找到li 然后找li的父级 再找父级下倒数第二元素个是li
18 selector:nth-last-of-type(2) (li:nth-last-of-type(2)) 找到li 然后找li的父级 再找父级下倒数第二元素个是li
19 selector:nth-child(even) (li:nth-child(even)) 找到li的所有偶数位(2N)
20 selector:nth-last-child(even)
21 selector:nth-child(odd) (li:nth-child(odd)) 找到li的所有奇数位(2N-1 或 2n+1)
22 selector:nth-last-child(odd)
23 selector:only-child (li:only-child) 找到li是父级的唯一子元素(选择器选择的是父元素中只有一个子元素,而且只有唯一的一个子元素)
24 selector:only-of-type (li:only-of-type) 表示一个元素他有很多个子元素,而其中只有一种类型的子元素是唯一的,使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。
css选择器的更多相关文章
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 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 ...
随机推荐
- wepack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- 我的MYSQL学习心得(一) 简单语法
我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...
- Android 自定义 attr
好纠结,弄了一个下午老是报错如是总结一下安卓自定视图和自定义属性. (一)自定义属性 在Values文件下建立一个attrs.xml文件,attr的format可以参考:http://www.cnbl ...
- Hawk 6. 高级话题:子流程系统
子流程的定义 当流程设计的越来越复杂,越来越长时,就难以进行管理了.因此,采用模块化的设计才会更加合理.本节我们介绍子流程的原理和使用. 所谓子流程,就是能先构造出一个流程,然后被其他流程调用.被调用 ...
- [原] KVM 虚拟化原理探究(3)— CPU 虚拟化
KVM 虚拟化原理探究(3)- CPU 虚拟化 标签(空格分隔): KVM [TOC] CPU 虚拟化简介 上一篇文章笼统的介绍了一个虚拟机的诞生过程,从demo中也可以看到,运行一个虚拟机再也不需要 ...
- javascript动画系列第二篇——磁性吸附
× 目录 [1]范围限定 [2]拖拽范围 [3]磁性吸附 前面的话 上一篇,我们介绍了元素拖拽的实现.但在实际应用中,常常需要为拖拽的元素限定范围.而通过限定范围,再增加一些辅助的措施,就可以实现磁性 ...
- VICA 架构设计(1)
本文记录最近完成的一个通用实时通信客户端的架构. 背景 我们公司是做税务相关的软件,有针对大客户 MIS 系统,也有针对中小客户的 SaaS 平台.这些系统虽然都是 B/S 的,但是也需要使用 A ...
- 使用po模式读取豆瓣读书最受关注的书籍,取出标题、评分、评论、题材 按评分从小到大排序并输出到txt文件中
#coding=utf-8from time import sleepimport unittestfrom selenium import webdriverfrom selenium.webdri ...
- APEX:对object中数据进行简单处理?
在Salesforce中,常常要对各种数据进行处理,已满足业务逻辑.本篇文章会介绍如何实现从object获取数据,然后将取得的数据进行一系列简单处理. 第一步:SongName__c 是一个新建的ob ...
- 手机web如何实现多平台分享
话说App一般都带有分享到社交平台的入口,web网页的分享也有很不错的框架,但是随着HTML5的不断发展,手机web页面越来越多的进入到我们的生活中,那如何在我们的手机上完成分享呢?话说各大分享平台都 ...