CSS Selectors 选择器（选择符）

作者: 云外之境 | 来源:发表于2017-02-22 12:35 被阅读0次

选择器

元素选择符
关系选择符
属性选择符
伪类选择符
伪对象选择符

一、元素选择符

通配选择符 (*):选择所有对象
通常不建议使用通配选择符，因为它会遍历并命中文档中所有的元素，出于性能考虑，需酌情使用

*{ margin: 0; padding: 0 }

类型选择符(E):以文档语言对象类型作为选择符

p{ font-size: 15px}

ID选择符(E#id):以唯一标识符id属性等于myid的E对象作为选择符

<style>
p#content {
    font-size: 15px;
}
</style>
<body>
<h1 id="subtitle">标题</h1>
<p id="content">正文内容</p>
</body>

类选择符(E.class):以class属性包含myclass的E对象作为选择符
不同于ID选择符的唯一性，类选择符可以同时定义多个

.a { color: #666; }
.b { font-weight: 700; } 
<div class="a b">给某个div元素定义.a和.b两个类,类名中间空格</div>

多类选择符，选中同时拥有.a和.b两个类的元素

.a.b { color: #666; } 
<div class="a b">多类选择符使用方法</div>

二、关系选择符

包含选择符(E F):选择所有被E元素包含的F元素。
与子选择符不同的是，包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子

<style>
 /* 包含选择符(E F) */ 
.demo div { border:1px solid red; }
 /* 子选择符(E>F) */
 .demo > div { border:1px solid blue; } 
</style> 
  <div class="demo">
     <div>0 
       <div>1</div>
       <div>2</div>
       <div>3</div> 
  </div> 
</div>
如果使用.demo div，那么 0, 1, 2, 3 都有有边框；
如果使用 .demo > div，那么只有 0 有边框，即只有子元素会被命中

子选择符(E>F):选择所有作为E元素的子元素F。
子选择符只能命中子元素，而不能命中孙辈

.demo > div { position: relative; } 
<div class="demo"> 
  <div class="a"> 
    <div class="b">子选择符</div> 
  </div>
</div>
只有 .a 会被命中，因为它是 .demo 的子元素

相邻选择符(E+F):选择紧贴在E元素之后F元素。
与兄弟选择符不同的是，相邻选择符只会命中符合条件的 相邻的兄弟元素

<style>
 /* 相邻选择符(E+F) */
  p+p{color:red;}
  /* 兄弟选择符(E~F) */ 
  p~p{color:red;}
</style>
<p>p1</p>
<p>p2</p>
<h3>这是一个标题</h3>
<p>p3</p> 
<h3>这是一个标题</h3>
<p>p4</p> 
<p>p5</p>
如果使用p + p{color:red;}，那么p2, p5将会变成红色；
如果使用p ~ p{color:red;}，那么p2,p3,p4,p5将会变成红色

兄弟选择符(E~F):选择E元素后面的所有兄弟元素F。(CSS3)
兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素

<style>
 /* 相邻选择符(E+F) */
  p+p{color:red;}
  /* 兄弟选择符(E~F) */ 
  p~p{color:red;}
</style>
<p>p1</p>
<p>p2</p>
<h3>这是一个标题</h3>
<p>p3</p> 
<h3>这是一个标题</h3>
<p>p4</p> 
<p>p5</p>
如果使用p + p{color:red;}，那么p2, p5将会变成红色；
如果使用p ~ p{color:red;}，那么p2,p3,p4,p5将会变成红色

三、CSS Attribute Selectors 属性选择符

E[att] { styleRules }: 选择具有att属性的E元素。

<style> 
  img[alt]{
     margin: 10px; 
  } 
</style>
<img src="图片url" alt="" /> 
<img src="图片url" />
选中第一张图片，因为匹配到了alt属性

E[att="val"]：选择具有att属性且属性值等于val的E元素。

    <style>
    input[type="text"] {
        border: 2px solid #000;
    }
    </style>
    <input type="text" />
    <input type="submit" />
将会选中第一个input，因为匹配到了alt属性，并且属性值为text

E[att~="val"]：选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。

    <style>
    div[class~="a"] {
        border: 2px solid #000;
    }
    </style>
    <div class="a">1</div>
    <div class="b">2</div>
    <div class="a b">3</div>
将会选中1, 3两个div，因为匹配到了class属性，且属性值中有一个值为a

E[att^="val"]：选择具有att属性且属性值为以val开头的字符串的E元素。

    <style>
    div[class^="a"] {
        border: 2px solid #000;
    }
    </style>
    <div class="abc">1</div>
    <div class="acb">2</div>
    <div class="bac">3</div>
选中1, 2两个div，因为匹配到了class属性，且属性值以a开头

E[att$="val"]：选择具有att属性且属性值为以val结尾的字符串的E元素。

    <style>
    div[class$="c"] {
        border: 2px solid red;
    }
    </style>
    <div class="abc">1</div>
    <div class="acb">2</div>
    <div class="bac">3</div>
选中1, 3两个div，因为匹配到了class属性，且属性值以c结尾

E[att="val"]：选择具有att属性且属性值为包含val的字符串*的E元素。

    <style>
    div[class*="b"] {
        border: 2px solid #000;
    }
    </style>

    <div class="abc">1</div>
    <div class="acb">2</div>
    <div class="bac">3</div>
所有div，因为匹配到了class属性，且属性值中都包含了b

E[att|="val"]：选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择

    <style>
    div[class|="a"] {
        border: 2px solid #000;
    }
    </style>
    <div class="a-test">1</div>
    <div class="b-test">2</div>
    <div class="c-test">3</div>
   <div class="a-">4</div>
选中第1个div，因为匹配到了class属性，且属性值以紧跟着"-"的a开头
选中第4个div，因为匹配到了class属性，且属性值仅为val

四、CSS Pseudo-Classes Selectors 伪类选择符

E:link ：设置超链接a在未被访问前的样式
如果需要给超链接定义：访问前，鼠标悬停，当前被点击，已访问这4种伪类效果，而又没有按照一致的书写顺序，不同的浏览器可能会有不同的表现
超链接的4种状态，需要有特定的书写顺序才能生效。

    a:link { }
    a:visited { }
    a:hover { }
    a:active { }
注意，a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后
可靠的顺序是：l(link)ov(visited)e h(hover)a(active)te, 即用喜欢(love)和讨厌(hate)两个词来概括

E:visited ：设置超链接a在其链接地址已被访问过时的样式。
E:hover：设置元素在其鼠标悬停时的样式。
E:active ：设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
E:focus ：设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。
webkit内核浏览器会默认给:focus状态的元素加上outline的样式

<style>
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
input:focus {
    color: #f60;
    border: 1px solid #f60;
    outline: none;//取消默认的边框样式
}
</style>body>
<h1>请聚焦到以下输入框</h1>
<form action="#">
    <ul>
        <li><input value="姓名" /></li>
        <li><input value="单位" /></li>
        <li><input value="年龄" /></li>
        <li><input value="职业" /></li>
    </ul>
</form>
</body>

E:lang(fr)：匹配使用特殊语言的E元素。

<style>
p:lang(zh-cmn-Hans) {
    color: red;
}
p:lang(en) {
    color: green;
}
</style><body>
<p lang="zh-cmn-Hans">测试文字</p>
<p lang="en">english</p>
</body>

E:not(s) ：否定伪类选择符，匹配不含有s选择符的元素E s是选择符
有了这个选择符，那么你将可以很好的处理类似这样的场景：假定有个列表，每个列表项都有一条底边线，但是最后一项不需要底边线

    li:not(:last-child) {
        border-bottom: 1px solid #ddd;
    }
给该列表中除最后一项外的所有列表项加一条底边线

<style>
p:not(.abc) {
    color: #f00;
}
</style><body>
<p class="abc">否定伪类选择符 E:not(s)</p>
<p id="abc">否定伪类选择符 E:not(s)</p>
<p class="abcd">否定伪类选择符 E:not(s)</p>
<p>否定伪类选择符 E:not(s)</p>
</body>
class=“abc”的第一行未选中

E:root 匹配E元素在文档的根元素。在HTML中，根元素永远是HTML
E:first-child：匹配父元素的第一个子元素E。
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素

    <ul>
        <li>列表项一</li>
        <li>列表项二</li>
        <li>列表项三</li>
        <li>列表项四</li>
    </ul>
如果我们要设置第一个li的样式，那么代码应该写成 li:first-child{ }，
而不是 ul:first-child{ }。

E必须是它的兄弟元素中的第一个元素，换言之，E必须是父元素的第一个子元素

  p:first-child{color:red;}
    <div>
        <h2>标题</h2>
        <p>p</p>
    </div>
在p前面加了一个h2标签，发现选择器失效

E:last-child ：匹配父元素的最后一个子元素E。

要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素
E:last-child选择符，E必须是它的兄弟元素中的最后一个元素，换言之，E必须是父元素的最后一个子元素

    p:last-child{color:#f00;}
    <div>
        <h2>标题</h2>
        <p>p</p>
    </div>
无效的代码：
    p:last-child{color:#f00;}
    <div>
        <p>p</p>
        <h2>标题</h2>
    </div>

E:only-child：匹配父元素仅有的一个子元素E，父元素只有这一个子元素
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素

<style>
li:only-child {
  color: red;
}
</style><body>
<ul>只有唯一一个子元素
<li>结构性伪类选择符<b> E:only-child</b> </li>
</ul>
<ul>有多个子元素
    <li>结构性伪类选择符 E:only-child</li>
    <li>结构性伪类选择符 E:only-child</li>
    <li>结构性伪类选择符 E:only-child</li>
</ul>
</body>
选中第一个<ul>的<li>，且孙元素<b>被选中

E:nth-child(n)：匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素
该选择符允许使用一个乘法因子(n)来作为换算方式，比如我们想选中所有的偶数子元素E，那么选择符可以写成：E:nth-child(2n)

    <style>
    li:nth-child(2n){color:red;} /* 偶数 */
    li:nth-child(2n+1){color:red;} /* 奇数 */
    </style>
    <ul>
        <li>列表项一</li>
        <li>列表项二</li>
        <li>列表项三</li>
        <li>列表项四</li>
    </ul>
因为(n)代表一个乘法因子，可以是0, 1, 2, 3, ..., 所以(2n)换算出来会是偶数，而(2n+1)换算出来会是奇数

该选择符允许使用一些关键字，比如：odd, even

使用odd, even实现奇偶：
    <style>
    li:nth-child(even){color:red;} /* 偶数 */
    li:nth-child(odd){color:blue;} /* 奇数 */
    </style>
    <ul>
        <li>列表项一</li>
        <li>列表项二</li>
        <li>列表项三</li>
        <li>列表项四</li>
    </ul>
关键字odd代表奇数，even代表偶数

E:nth-child(n)会选择父元素的第n个子元素E，如果第n个子元素不是E，则是无效选择符，但n会递增。

    <div>
        <p>第1个p</p>
        <p>第2个p</p>
        <span>第1个span</span>
        <p>第3个p</p>
        <span>第2个span</span>
        <p>第4个p</p>
        <p>第5个p</p>
    </div>
CSS Case 1：
    p:nth-child(2){color:red;} 第2个p会变红
CSS Case 2：
    p:nth-child(3){color:#f00;} 不会选中任何元素
CSS Case 3：
    p:nth-child(4){color:#f00;}
这时选中的却是第3个p，因为它是第4个子元素

E:nth-last-child(n) ：匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素
该选择符允许使用一个乘法因子(n)来作为换算方式，比如我们想选中倒数第一个子元素E，那么选择符可以写成：E:nth-last-child(1)

    <div>
        <p>第1个p</p>
        <p>第2个p</p>
        <span>第1个span</span>
        <p>第3个p</p>
        <span>第2个span</span>
    </div>
如上HTML，假设要选中倒数第一个p(即正数第3个p)，那么CSS选择符应该是：
p:nth-last-child(2)
因为倒数第1个p，其实是倒数第2个子元素。

基于选择符从右到左解析：首先要找到第1个子元素，然后再去检查该子元素是否为p，如果不是p，则n递增，继续查找

E:first-of-type：匹配同类型中的第一个同级兄弟元素E。
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body
该选择符总是能命中父元素的第1个为E的子元素，不论第1个子元素是否为E

  <style>
    p:first-of-type {
    color:red;
    }
  </style>
  <body>
  <div class="test">
      <div>我是一个div元素</div>
      <p>1p元素</p>
      <p>2p元素</p></div>
  </body>
选中第1个 <p>1p元素</p>

E:last-of-type：匹配同类型中的最后一个同级兄弟元素E。
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body
该选择符总是能命中父元素的倒数第1个为E的子元素，不论倒数第1个子元素是否为E

  <style>
    p:first-of-type {
    color:red;
    }
  </style>
  <body>
  <div class="test">
      <div>我是一个div元素</div>
      <p>1p元素</p>
      <p>2p元素</p></div>
  </body>
选中第2个 <p>2p元素</p>

E:only-of-type：匹配同类型中的唯一的一个同级兄弟元素E。（E本身及孙元素）
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body
该选择符总是能命中父元素的唯一同类型子元素E，不论该元素的位置

<head>
      <style>
        body:only-of-type {
            color: red;
        }
    </style>
</head>
<body>
    <div class="test">
        <p>结构性伪类选择符 E:only-of-type</p>
        <span>span1<p>innerP</p></span>
        <p>结构性伪类选择符 E:only-of-type</p>
    </div>
</body>
p:only-of-type :不选中任何元素，因为P元素不是唯一的
span:only-of-type：选中<span>，且包括孙元素<p>
body:only-of-type：选中全部

E:nth-of-type(n)：匹配同类型中的第n个同级兄弟元素E。
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body
该选择符总是能命中父元素的第n个为E的子元素，不论第n个子元素是否为E

    <div>
        <p>第1个p</p>
        <p>第2个p</p>
        <span>第1个span</span>
        <p>第3个p</p>
        <span>第2个span</span>
    </div>
如上HTML，假设要命中第一个span：
    span:nth-of-type(1){color:#f00;}
如果使用E:nth-child(n)：
    span:nth-child(3){color:#f00;}

CSS Selectors 选择器（选择符）

选择器

一、元素选择符

二、关系选择符

三、CSS Attribute Selectors 属性选择符

四、CSS Pseudo-Classes Selectors 伪类选择符

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端