CSS 选择器

AGhosts

于 2016-10-28 16:53:54 发布

阅读量458

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/AGhosts/article/details/52957806

版权

css3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、属性选择器

（1）E[attr^="val"]：定义属性 attr 并且属性名是以val开头的
（2）E[atte$="val"]：定义属性 attr 并且属性名是以val结尾的
（3）E[atte*="val"]：定义属性 attr 并且属性名中任意位置含有val的

2、root选择器

定义：:root选择器，匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。

注：“:root”选择器等同于<html>元素。建议使用:root方法。在IE9以下还可以借助“:root”实现hack功能。

3、not选择器

定义：称为否定选择器，可以选择除某个元素之外的所有元素。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加灰色边。

<span style="font-family:SimSun;">input:not([type="submit"]){
  border: 1px solid #ccc;
}</span>

4、empty 选择器

定义：表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

5、target 选择器

定义：称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。

例如：点击链接显示隐藏的段落。

<span style="font-family:SimSun;"><h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
    content for Brand
</div></span>

<span style="font-family:SimSun;">.menuSection{
  display: none;
}
#brand:target{/*这里的:target就是指id="brand"的div对象*/
  display:block;
}</span>

注：触发元素的URL中的标志符通常会包含一个#号，后面带有一个标志符名称，上面代码中是：#brand

6、first-child/first-of-type 选择器

定义：first-child：表示的是选择父元素中的第一个子元素，记住是子元素，而不是后代元素。
first-of-type：表示指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。

7、nth-child(n)/nth-of-type(n)选择器

定义：nth-child(n)：表示用来定位某个父元素的一个或多个特定的子元素。

nth-of-type(n)：它只计算父元素中指定的某种类型的子元素。

注：其中“n”是其参数，而且可以是整数值，也可以是表达式(2n+1)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。

当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。

8、last-child/last-of-type 选择器

定义：last-child：表示的是选择的是元素的最后一个子元素。

last-of-type：表示选择某父元素下的某个类型的最后一个子元素。

9、nth-last-child(n)/nth-last-of-type(n)选择器

定义：nth-last-child(n)：从某父元素的最后一个子元素开始计算，来选择特定的元素。

nth-last-of-type(n)：选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始

10、only-child/only-of-type 选择器

定义： only-child：表示选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。

only-of-type：是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的。

11、:enabled/ :disabled 选择器

定义：在web表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。要正常使用“:disabled”选择器，需要在表单元素的HTML中设置“disabled”属性。

12、:checked/ ::selection 选择器

定义：:checked：表单元素中，单选按钮和复选按钮都具有选中和未选中状态。“:checked”表示的是选中状态。

::selection：用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的，可以通过“::selection”选择器，改变Web中选中的文本背景，文本。

注： 1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。

2、Firefox 支持替代的 ::-moz-selection。

13、:read-only/:read-write 选择器

定义： :read-only：表示用来指定处于只读状态元素的样式（元素中设置了“readonly=’readonly’”）。

:read-write：用来指定当元素处于非只读状态时的样式。

14、::before和::after 选择器

定义：::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。

.clearfix::before,
.clearfix::after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

AGhosts

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 选择器

1、属性选择器（1）E[attr^="val"]：定义属性 attr 并且属性名是以val开头的（2）E[atte$="val"]：定义属性 attr 并且属性名是以val结尾的（3）E[atte*="val"]：定义属性 attr 并且属性名中任意位置含有val的2、root选择器定义：:root选择器，匹配元素E所在文档的根元
复制链接

扫一扫