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 ...
随机推荐
- Hadoop 中利用 mapreduce 读写 mysql 数据
Hadoop 中利用 mapreduce 读写 mysql 数据 有时候我们在项目中会遇到输入结果集很大,但是输出结果很小,比如一些 pv.uv 数据,然后为了实时查询的需求,或者一些 OLAP ...
- jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
- ASP.NET Core 1.0 开发记录
官方资料: https://github.com/dotnet/core https://docs.microsoft.com/en-us/aspnet/core https://docs.micro ...
- HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置
在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...
- java面向对象中的关键字
1,super关键字 super:父类的意思 1. super.属性名 (调用父类的属性) 2. super.方法名 (调用父类的方法) 3. super([参数列表])(调用父类的构造方法) 注意: ...
- ORACLE从共享池删除指定SQL的执行计划
Oracle 11g在DBMS_SHARED_POOL包中引入了一个名为PURGE的新存储过程,用于从对象库缓存中刷新特定对象,例如游标,包,序列,触发器等.也就是说可以删除.清理特定SQL的执行计划 ...
- [jquery]jquery正则表达式验证(手机号、身份证号、中文名称)
数字判断方法:isNaN()函数 test()方法 判断字符串中是否匹配到正则表达式内容,返回的是boolean值 ( true / false ) // 验证中文名称 function isChin ...
- .NET跨平台之旅:将示例站点升级至 .NET Core 1.1 Preview 1
今天微软发布了 .NET Core 1.1 Preview 1(详见 Announcing .NET Core 1.1 Preview 1 ),紧跟 .NET Core 前进的步伐,我们将示例站点 h ...
- Nodejs之MEAN栈开发(八)---- 用户认证与会话管理详解
用户认证与会话管理基本上是每个网站必备的一个功能.在Asp.net下做的比较多,大体的思路都是先根据用户提供的用户名和密码到数据库找到用户信息,然后校验,校验成功之后记住用户的姓名和相关信息,这个信息 ...
- WCF : 修复 Security settings for this service require Windows Authentication but it is not enabled for the IIS application that hosts this service 问题
摘要 : 最近遇到了一个奇怪的 WCF 安全配置问题, WCF Service 上面配置了Windows Authentication. IIS上也启用了 Windows Authentication ...