CSS 实际应用-一些有趣的 CSS 选择符

  • CSS
    实际应用-无高度时,宽度也就无效
  • CSS 实际应用-让人想不到的 line-height 的 em
    算法
  • CSS 实际应用-font-size、color 哪个会继承给
    a?
  • CSS 实际应用-慎用 * 选择符(*
    的优先级是?)
  • CSS
    实际应用-三种设置第一项的办法
  • CSS 实际应用-:first-child
    为什么无效
  • CSS 实际应用-一些有趣的 CSS 选择符

 


前面文章总结了常用的8种选择器,今天再来补充5中选择器,其中一部分是css3中新加入的。

CSS 选择符有很多,本文只举几个有趣的例子简单说一说,完整内容可参考:

 

a b

1、相邻选择器

要求 b 是 a 的后代。包括儿子、孙子、重孙子……

E+F { sRules }

a>b

相邻选择符只会命中符合条件的相邻的兄弟元素。

要求 b 是 a 的儿子。不能是孙子、重孙子……,但要注意,如果 b 下还有
b,虽然没有直接作用于下级 b,但下级 b 可能会从上级 b 继承。

 

a~b

2、兄弟选择器

要求 b 是 a 的弟弟。

E~F { sRules }

a+b

兄弟选择符会命中所有符合条件的兄弟元素,而不强制是紧邻的元素。

要求 b 是 a 的第一个弟弟。

<style>

/* 相邻选择符(E+F) */

h3 + p { color: #f00; }

/* 兄弟选择符(E~F) */

h3 ~ p { color: #f00; }

</style>

<h3>这是一个标题</h3>

<p>p1</p>

<p>p2</p>

<p>p3</p>

a[prop=”value”]

这个例子中,如果是相邻选择符,那么只有
p1 会变成红色;如果是兄弟选择符,那么
p1/p2/p3 都会变成红色;

要求 a 的 prop 属性值等于 value 的元素。

 

a[prop^=”value”]

3、属性选择器

要求 a 的 prop 属性值以 value 开头。

 属性选择器一共有7种选择形式。

a[prop$=”value”]

E[att] { sRules }

要求 a 的 prop 属性值以 value 结尾。

澳门新葡萄京官网首页,选择具有att属性的E元素。

a[prop*=”value”]

<style>

img[alt] {

margin: 10px;

}

</style>

<img src="图片url" alt="澳门新葡萄京官网首页 1" />

<img src="图片url" />

要求 a 的 prop 属性值含有 value。相当于 SQL 的 like %value%。

 

a[prop~=”value”]

此例,将会命中第一张图片,因为匹配到了alt属性

要求 a 的 prop 属性值含有 value。这个含有和
* 的意义不一样,它是指属性值用空格分隔,分隔出来后,若有等于
value 的,就选中。比如 class=”f1 f2″ 匹配 a[class~=”f1″],但
class=”f12 f2″ 不匹配。

E[att=”val”] { sRules }

a:first-child

选择具有att属性且属性值等于val的E元素。

要求 a 是其父元素的第一个元素。注意不是指“第一个
a 元素”,而是指“第一个元素”。

<style>

input[type="text"] {

border: 2px solid #000;

}

</style>

<input type="text" />

<input type="submit" />

a:last-child

 

要求 a 是其父元素的最后一个元素。

此例,将会命中第一张input,因为匹配到了type属性,并且属性值为text

a:first-of-type

 

要求 a 是其父元素的第一个同类型元素。

E[att~=”val”] { sRules }

first-child 与 first-of-type 的区别是?看个例子:

选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素(包含只有一个值且该值等于val的情况)。

<style type=”text/css”> p:first-of-type { color:red; }
</style> <div> <span>s</span>
<p>1</p> <p>2</p> <p>3</p>
</div>

<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 是红色,再看:

 

<style type=”text/css”> .p2:first-of-type { color:red; }
</style> <div> <p class=”p1″>1</p> <p
class=”p2″>2</p> <p class=”p2″>3</p> </div>

此例,将会命中1, 3两个div,因为匹配到了class属性,且属性值中有一个值为a

1、2、3 都不是红色,再看 first-child:

 

<style type=”text/css”> p:first-child { color:red; }
</style> <div> <span>s</span>
<p>1</p> <p>2</p> <p>3</p>
</div>

E[att^=”val”] { sRules }

1、2、3 都不是红色。

选择具有att属性且属性值为以val开头的字符串的E元素。

a:last-of-type

<style>

div[class^="a"] {

border: 2px solid #000;

}

</style>

<div class="abc">1</div>

<div class="acb">2</div>

<div class="bac">3</div>

要求 a 是其父元素的最后一个同类型元素。

 

a:nth-child(n)

此例,将会命中1, 2两个div,因为匹配到了class属性,且属性值以a开头

意同 :first-child,只是这个 n 指定第几个,如果 n 是 1,则等同于
first-child。

E[att$=”val”] { sRules }

a:nth-last-child(n)

选择具有att属性且属性值为以val结尾的字符串的E元素。

与 :nth-child 相比,它是从后面往上数。

<style>

div[class$="c"] {

border: 2px solid #000;

}

</style>

<div class="abc">1</div>

<div class="acb">2</div>

<div class="bac">3</div>

a:nth-of-type(n)

 

意同 :first-of-type,只是这个 n 指定第几个,如果 n 是 1,则等同于
first-of-type。

此例,将会命中1, 3两个div,因为匹配到了class属性,且属性值以c结尾

a:nth-last-of-type(n)

E[att*=”val”] { sRules }

与 :nth-of-type 相比,它是从后面往上数。

选择具有att属性且属性值为包含val的字符串的E元素。

input:enabled

<style>

div[class*="b"] {

border: 2px solid #000;

}

</style>



<div class="abc">1</div>

<div class="acb">2</div>

<div class="bac">3</div>

选择启用的 input 元素。

 

input:disabled

此例,将会命中所有div,因为匹配到了class属性,且属性值中都包含了b

选择禁用的 input 元素。

E[att|=”val”] { sRules }

input:checked

 

选择选择的 input 元素。

选择具有att属性,其值是以val开头并用连接符”-“分隔的字符串的E元素;如果值仅为val,也将被选择。

:not(selector)

这样理解会更简单:如果元素E拥有att属性,并且值为val,或者值是以val-开头的,那么E将会被选择。

示例 :not(p),指除 p 以外的元素。

<style>

div[class|="a"] {

border: 2px solid #000;

}

</style>



<div class="a">0</div>

<div class="a-test">1</div>

<div class="b-test">2</div>

<div class="c-test">3</div>
  • CSS
    实际应用-无高度时,宽度也就无效
  • CSS 实际应用-让人想不到的 line-height 的 em
    算法
  • CSS 实际应用-font-size、color 哪个会继承给
    a?
  • CSS 实际应用-慎用 * 选择符(*
    的优先级是?)
  • CSS
    实际应用-三种设置第一项的办法
  • CSS 实际应用-:first-child
    为什么无效
  • CSS 实际应用-一些有趣的 CSS 选择符

 


在这个例子中,前2个div将会被命中:

第1个div,拥有class属性,并且值为a,所以被命中;

第2个div,拥有class属性,值是a开头并紧跟着连接符“-”,所以被命中;

 

4、伪类选择器

 伪类选择器的种类比较多,一共有二十多种。

E:link { sRules }

设置超链接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 { sRules }

设置超链接a在其链接地址已被访问过时的样式。

E:hover { sRules }

设置元素在其鼠标悬停时的样式。

E:active { sRules }

设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。

E:focus { sRules }

设置对象在成为输入焦点(该对象的onfocus事件发生)时的样式。

webkit内核浏览器会默认给:focus状态的元素加上outline的样式。

E:lang(fr) { sRules }

匹配使用特殊语言的E元素。

<style>

p:lang(zh-cmn-Hans) {

color: #f00;

}

p:lang(en) {

color: #090;

}

</style>

</head>

<body>

<p lang=”zh-cmn-Hans”>大段测试文字</p>

<p lang=”en”>english</p>

E:not(s) { sRules }

匹配不含有s选择符的元素E。

有了这个选择符,那么你将可以很好的处理类似这样的场景:假定有个列表,每个列表项都有一条底边线,但是最后一项不需要底边线

.demo li:not(:last-child) {

border-bottom: 1px solid #ddd;

}

上述代码的意思是:给该列表中除最后一项外的所有列表项加一条底边线

E:first-child { sRules }

匹配父元素的第一个子元素E。

要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是body,即E可以是body的子元素。

<ul>

<li>列表项一</li>

<li>列表项二</li>

<li>列表项三</li>

<li>列表项四</li>

</ul>

在上述代码中,如果我们要设置第一个li的样式,那么代码应该写成li:first-child{sRules},而不是ul:first-child{sRules}。

示例代码:

p:first-child{color:#f00;}

 

<div>

<h2>我是一个标题</h2>

<p>我是一个p</p>

</div>

只是在p前面加了一个h2标签,你会发现选择器失效了,没有命中p,why?

E:first-child选择符,E必须是它的兄弟元素中的第一个元素,换言之,E必须是父元素的第一个子元素。与之类似的伪类还有E:last-child,只不过情况正好相反,需要它是最后一个子元素。

E:last-child { sRules }

匹配父元素的最后一个子元素E。

 

E:nth-child(n) { sRules }

匹配父元素的第n个子元素E,假设该子元素不是E,则选择符无效。

要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是body,即E可以是body的子元素

该选择符允许使用一个乘法因子(n)来作为换算方式,比如我们想选中所有的偶数子元素E,那么选择符可以写成:E:nth-child(2n)

使用E:nth-child(n)实现奇偶:

示例代码:

<style>

li:nth-child(2n){color:#f00;} /* 偶数 */

li:nth-child(2n+1){color:#000;} /* 奇数 */

</style>

 

<ul>

<li>列表项一</li>

<li>列表项二</li>

<li>列表项三</li>

<li>列表项四</li>

</ul>

因为(n)代表一个乘法因子,可以是0, 1, 2, 3, …, 所以(2n)换算出来会是偶数,而(2n+1)换算出来会是奇数

有一点需要注意的是:

HTML示例代码:

<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:#f00;}

很明显第2个p会被命中然后变成红色

CSS Case 2:

p:nth-child(3){color:#f00;}

这是会命中第3个p么?如果你这么认为那就错了,这条选择符就不会命中任何一个元素。

CSS Case 3:

p:nth-child(4){color:#f00;}

这时你以为会命中第4个p,但其实命中的却是第3个p,因为它是第4个子元素

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

E:nth-last-child(n) { sRules }

匹配父元素的倒数第n个子元素E,假设该子元素不是E,则选择符无效。

E:first-of-type { sRules }

匹配同类型中的第一个同级兄弟元素E。

要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是html,即E可以是html的子元素,也就是说E可以是body

该选择符总是能命中父元素的第1个为E的子元素,不论第1个子元素是否为E

E:last-of-type { sRules }

匹配同类型中的最后一个同级兄弟元素E。

 

E:nth-of-type(n) { sRules }

匹配同类型中的第n个同级兄弟元素E。

有一点需要注意的是:

HTML示例代码:

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

E:nth-last-of-type(n) { sRules }

匹配同类型中的倒数第n个同级兄弟元素E。

E:checked { sRules }

匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)

<style>

input:checked + span {

background: #f00;

}

input:checked + span:after {

content: " 我被选中了";

}

</style>

</head>

<body>

<form method="post" action="#">

<fieldset>

<legend>选中下面的项试试</legend>

<ul>

<li><label><input type="radio" name="colour-group" value="0" />蓝色</label></li>

<li><label><input type="radio" name="colour-group" value="1" />红色</label></li>

<li><label><input type="radio" name="colour-group" value="2" />黑色</label></li>

</ul>

</fieldset>

<fieldset>

<legend>选中下面的项试试</legend>

<ul>

<li><label><input type="checkbox" name="colour-group2" value="0" />蓝色</label></li>

<li><label><input type="checkbox" name="colour-group2" value="1" />红色</label></li>

<li><label><input type="checkbox" name="colour-group2" value="2" />黑色</label></li>

</ul>

</fieldset>

</form>

</body>

 

E:target { sRules }

匹配相关URL指向的E元素。

解释:URL后面跟锚点#,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element),:target选择器用于选取当前活动的目标元素。

示例代码:

#demo:target{color:#f00;}

 

<div id=”demo”>

<p>E:target伪类使用方法</p>

</div>

假设上述代码在页面 a.html 中,那么当访问 a.html#demo 时,这个div元素将会被:target命中

 

5、伪元素选择器

 

E:first-letter/E::first-letter { sRules }

设置对象内的第一个字符的样式。

此伪对象仅作用于块对象。内联对象要使用该伪对象,必须先将其设置为块级对象。

该伪类常被用来配合font-size属性和float属性制作首字下沉效果。

CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes
Selectors),但以前的写法仍然有效。

即E:first-letter可转化为E::first-letter

 

E:first-line/E::first-line { sRules }

设置对象内的第一行的样式。

此伪对象仅作用于块对象。内联对象要使用该伪对象,必须先将其设置为块级对象。

E:before/E::before { sRules }

设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用,并且必须定义content属性

E:after/E::after { sRules }

设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用,并且必须定义content属性

E::placeholder { sRules }

设置对象文字占位符的样式。

  • ::placeholder 伪元素用于控制表单输入框占位符的外观,它允许开发者/设计师改变文字占位符的样式,默认的文字占位符为浅灰色。
  • 当表单背景色为类似的颜色时它可能效果并不是很明显,那么就可以使用这个伪元素来改变文字占位符的颜色。
  • 需要注意的是,除了Firefox是 ::[prefix]placeholder,其他浏览器都是使用 ::[prefix]input-placeholder

input::-webkit-input-placeholder {

color: #999;

}

input:-ms-input-placeholder { // IE10+

color: #999;

}

input:-moz-placeholder { // Firefox4-18

color: #999;

}

input::-moz-placeholder { // Firefox19+

color: #999;

}

 

E::selection { sRules }

设置对象被选择时的样式。

需要注意的是,::selection只能定义被选择时的background-color,color及text-shadow(IE11尚不支持定义该属性)。

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注