常用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;
}

selector[href$="foo"]  

  a [href $= "rar"] {/*查找href已rar结尾的a标签*/
color: black;
}

selector[href*="foo"]  

  a [href *= "o"] {/*查找href包含‘o'的a标签*/
color: black;
}

selector[class~="foo"]

  p [class ~= "b"] {/*class类名为b且b前面或后面有空格的p标签(空格分隔多值的标签 <div class="a b"></div>)*/
color: black;
}

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选择器的更多相关文章

  1. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  2. dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来

    dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...

  3. CSS选择器的权重与优先规则?

    我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...

  4. css选择器的使用详解

    -.css选择器的分类: 二.常用选择器详解: 1.标签选择器: 语法: 标签名 { 属性:属性值; } 代码示例: h1 { color: #ccc; font-size: 28px; } 2.类选 ...

  5. js,jq,css选择器

    js获取节点: var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; / ...

  6. CSS系列:CSS选择器

    选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记样式都是通过不同的CSS选择器来控制的.用户只需要通过选择对不同的HTML标签进行选择,并赋予各种样式声明,即可实现各种效果. ...

  7. 细说CSS选择器

    众所周知,CSS的一个核心特征就是能向文档中的一组元素类型应用某些规则.每个规则都有两个基本部分:选择器(selector)和声明块(declaration block).下图显示了规则的各个部分. ...

  8. CSS选择器 转

    来自于:http://www.cnblogs.com/webblog/archive/2009/08/07/1541005.html 最近在研究jQuery的选择器,大家知道jQuery的选择器和cs ...

  9. HTML5 -入门 (---css样式-------------(css基础与css选择器)---------------------—)

    ---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...

随机推荐

  1. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  2. 我的MYSQL学习心得(一) 简单语法

    我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  3. Android 自定义 attr

    好纠结,弄了一个下午老是报错如是总结一下安卓自定视图和自定义属性. (一)自定义属性 在Values文件下建立一个attrs.xml文件,attr的format可以参考:http://www.cnbl ...

  4. Hawk 6. 高级话题:子流程系统

    子流程的定义 当流程设计的越来越复杂,越来越长时,就难以进行管理了.因此,采用模块化的设计才会更加合理.本节我们介绍子流程的原理和使用. 所谓子流程,就是能先构造出一个流程,然后被其他流程调用.被调用 ...

  5. [原] KVM 虚拟化原理探究(3)— CPU 虚拟化

    KVM 虚拟化原理探究(3)- CPU 虚拟化 标签(空格分隔): KVM [TOC] CPU 虚拟化简介 上一篇文章笼统的介绍了一个虚拟机的诞生过程,从demo中也可以看到,运行一个虚拟机再也不需要 ...

  6. javascript动画系列第二篇——磁性吸附

    × 目录 [1]范围限定 [2]拖拽范围 [3]磁性吸附 前面的话 上一篇,我们介绍了元素拖拽的实现.但在实际应用中,常常需要为拖拽的元素限定范围.而通过限定范围,再增加一些辅助的措施,就可以实现磁性 ...

  7. VICA 架构设计(1)

    本文记录最近完成的一个通用实时通信客户端的架构.   背景 我们公司是做税务相关的软件,有针对大客户 MIS 系统,也有针对中小客户的 SaaS 平台.这些系统虽然都是 B/S 的,但是也需要使用 A ...

  8. 使用po模式读取豆瓣读书最受关注的书籍,取出标题、评分、评论、题材 按评分从小到大排序并输出到txt文件中

    #coding=utf-8from time import sleepimport unittestfrom selenium import webdriverfrom selenium.webdri ...

  9. APEX:对object中数据进行简单处理?

    在Salesforce中,常常要对各种数据进行处理,已满足业务逻辑.本篇文章会介绍如何实现从object获取数据,然后将取得的数据进行一系列简单处理. 第一步:SongName__c 是一个新建的ob ...

  10. 手机web如何实现多平台分享

    话说App一般都带有分享到社交平台的入口,web网页的分享也有很不错的框架,但是随着HTML5的不断发展,手机web页面越来越多的进入到我们的生活中,那如何在我们的手机上完成分享呢?话说各大分享平台都 ...