CSS 选择器

原创 2018年04月17日 10:30:27
【CSS选择器包括:】
    基础选择器
    关系选择器
    属性选择器
    伪类选择器
    伪对象选择器

【基础选择器:】
    标签, id, class,通配符*

【关系选择器:】
    包含选择符 E F, 中间用空格
    子选择符 E>F, 对直接子元素起作用,对更深一层的元素不起作用
    相邻选择符 E+F, 选择相邻的第一个兄弟元素
    兄弟选择符 E~F, E元素之后的所有的兄弟元素,作用于多个元素

【属性选择器】(写法:元素[属性名="属性值"], 等号课换成其他符号):
    E[att] 具有att属性的E元素
    E[att="val"] att属性值是val的E元素
    E[att~="val"] att属性值中有一个值是val,那么E元素就会被选中
        例如:p[class~="p1"]{color:red;}
            <p class="p1 p2">段落</p> //被选中
            <p class="p3 p2">段落</p>
            <p class="p4 p2">段落</p>
            <p class="p4 p1 p2">段落</p> //被选中
    E[att^="val"] att属性值以val开始(前缀)的E元素
    E[att$="val"] att属性值以val结束(后缀)的E元素
    E[att*="val"] att属性值包含val,都会被选中
        例如:a[href*="baidu"]{color:red}
            <a href="www.baidu.com"></a> //被选中
            <a href="www.jd.com"></a>
            <a href="www.taobao.com"></a>

    E[att|="val"] att属性值是以 "val-" 开头的字符串
【伪类选择器】通过冒号来定义,为元素的不同状态添加样式(状态样式)
    E:link 设置超链接在未被访问前的样式 (“特指a标签”)
    E:visited 已经被访问的样式 (特指a标签)
    E:hover 设置鼠标放上面时的样式 (不限a标签,p li也可以)
    E:active 设置鼠标按下的样式 (不限a标签,p li也可以)
    E:not(s) 匹配不含有s选择器的元素E
        例如:div:not(.d1){color:red} not中的值不加引号
            <div class="d1">div块元素</div>
            <div class="d2">div块元素</div> //被选中
            <div class="d3">div块元素</div> //被选中
            <div class="d3 d1">div块元素</div>

    E:first-child 父元素的第一个子元素,如果E元素有父元素,而且E是父元素的第一个子元素
        例如:li:first-child{color:red} //匹配无效
              span:first-child{color:red} //span被匹配上
            <ul>
                <span>111</span>
                <li>首页</li>
                <li>服饰</li>
                <li>数码家电</li>
                <li>化妆品</li>
            </ul>
    E:last-child E有父元素且E是父元素的最后一个子元素
    E:only-child E有父元素且E是父元素唯一的子元素
    E:empty 匹配没有任何子元素和文本的元素E
        例如:p:empty {width:100px;}
            <p></p>  //被匹配
            <div></div> //空,但不是p元素
            <p>p元素</p>
            <p><a href="#">百度</a></p>
    E:checked 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
        例如:input:checked
    E:enabled input[type="text"]:enabled {}
    E:disabled input[type="text"]:disabled {}
    E:target
    E:nth-child(n) 匹配父元素的第n个子元素E,假设该子元素不是E,则选择符无效。
                    比如我们想选中所有的偶数子元素E,那么选择符可以写成:E:nth-child(2n)

css系统学习篇

本系列课程从0开始系统地讲解css。如果你是前端新手,不知从何下手学习,那么可以认真学习本系列课程。学完之后基本常用的css属性你都能够有所了解,再搭配上适当的代码练习,很快就能做出漂亮的网页效果。
  • 2016年04月24日 15:33

CSS-选择器及其兼容性

标签选择器就是用标签名来当做选择器。 1 、所有标签都能够当做选择器,比如body、h1、dl、ul、span等等 2 、不管这个标签藏的多深,都能够被选择上。 3 、选择的是所有的,而不是某一...
  • yume_sola
  • yume_sola
  • 2017-04-17 20:29:23
  • 879

CSS 常用的几种选择器

1、基本选择器## 元素选择器 ## 元素选择器 span{color:red;font-size: 20px} hello...
  • StriverLi
  • StriverLi
  • 2017-03-09 22:57:58
  • 2870

CSS选择器中的空格与尖括号有何区别?

CSS选择器中的空格与尖括号有何区别?
  • limin_hainan
  • limin_hainan
  • 2017-10-12 15:15:35
  • 320

CSS入门系列(三)关联选择器&组合选择器

CSS入门系列(三)关联选择器&组合选择器目录CSS入门系列三关联选择器组合选择器 目录 关联选择器 组合选择器 伪元素选择器1. 关联选择器定义是:选择器中的选择器。假设如下:这个一个div 这个一...
  • leichaoaizhaojie
  • leichaoaizhaojie
  • 2016-11-09 14:02:40
  • 1684

CSS:CSS选择器之【组合选择器】

前言组合使用不同的选择器可以匹配更特定的元素。有的复合选择器能将目标样式应用到更多元素,有的复合选择器则会锁定更少元素,总之会让你的选择非常具体。复合选择器主要包括:群组选择器、后代选择器、子选择器和...
  • Hierarch_Lee
  • Hierarch_Lee
  • 2016-09-21 11:54:35
  • 7316

CSS——CSS的三种书写方式 CSS选择器

CSS有3种书写形式 行内样式:(内联样式)直接在标签的style属性中书写 style="color:red;"> 页内样式:在本网页的style标签中书写     bo...
  • liyunxiangrxm
  • liyunxiangrxm
  • 2016-06-12 10:29:58
  • 1512

css中 :not() 选择器的用法

:not() 选择器用于一些特殊的功能的呈现上
  • Candy_home
  • Candy_home
  • 2014-11-18 05:19:26
  • 6572

你必须记住的30个CSS选择器[译]

开篇 有30个CSS选择器你必须烂熟于心,它们适应于当今各大主流浏览器。 1.** { margin: 0; padding: 0; }*选择器选择的是每一个单一元素。很多程序员用上面的C...
  • kkkkkxiaofei
  • kkkkkxiaofei
  • 2016-05-19 13:24:09
  • 2255
收藏助手
不良信息举报
您举报文章:CSS 选择器
举报原因:
原因补充:

(最多只允许输入30个字)