首页 > > 网页制作 > css >

css选择器补充

2018-06-24 02:07:28来源：未知阅读 ()

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

1、相邻选择器

E+F { sRules }

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

2、兄弟选择器

E~F { sRules }

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

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

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

3、属性选择器

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

E[att] { sRules }

选择具有att属性的E元素。

<style>

img[alt] {

margin: 10px;

}

</style>

<img src="图片url" alt="" />

<img src="图片url" />

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

E[att="val"] { sRules }

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

<style>

input[type="text"] {

border: 2px solid #000;

}

</style>

<input type="text" />

<input type="submit" />

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

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

选择具有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"] { sRules }

选择具有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"] { sRules }

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

<style>

div[class$="c"] {

border: 2px solid #000;

}

</style>

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

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

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

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

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

选择具有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"] { sRules }

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

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

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

在这个例子中，前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>

</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>

</ul>

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

有一点需要注意的是：

HTML示例代码：

<div>

<span>第1个span</span>

<span>第2个span</span>

</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>

<span>第1个span</span>

<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" /><span>蓝色</span></label></li>

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

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

</ul>

</fieldset>

<fieldset>

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

<ul>

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

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

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

</ul>

</fieldset>

</form>

</body>

E:target { sRules }

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

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

示例代码：

#demo:target{color:#f00;}

<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 type="text" 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;

}