CSS基础(三):选择器

常用选择器

元素选择器,即html标记如div,ul,li,p,h1~h6,table等。

p { font-size:14px; }
h1 { color:#F00; }

复合选择器, 由两个选择器直接构成,第一个必须是元素选择器,第二个必须是类选择器和ID选择器,这两个选择器之间不能有空格。

p.special { color:#red}
.special { color:#green; }

后代选择器,用来寻找特定元素或元素组的后代,后代选择器由其他两个选择器之间的空格表示。在这里只有h2标记里面的字体显示为红色,并且有10px的内边距。

<div>测试1
<h2>测试1</h2>
</div>
div h2{color:#F00;padding:10px;}

id选择器,标有特定 id 的 HTML 元素指定特定的样式,用#来表示。id 属性只能在每个 HTML 文档中出现一次。

<div id="main"></div>
#main {font-size:18px;}

类选择器,标有class的 HTML 元素指定特定的样式,用.来表示。类名的第一个字符不能使用数字。

<div class="main"></div>
.main {font-size:18px;}

伪类,表示表单元素或链接的状态。

如a:link,a:hover,a:visited,a:active,分别为用于链接尚未被用户访问的状态,用于用户移动他们的鼠标在元素上,而尚未触发或点击它的时候,用于用户访问过的链接,用于用户点击元素的情况。

通用选择器

像通配符的作用,可以匹配所有元素,由*表示,对页面上所有的元素应用样式。例如删除每个元素上默认的浏览器内边距和外边距。但是使用*这种方式加载很慢,不建议使用。

* {margin:0; padding:0;}

高级选择器

子选择器,选择元素的直接后代。这个与后代选择器不一样,后者指选择一个元素的所有后代。

<ul id="nav">
<li>1</li>
<li>1</li>
<li>
    <ul>
        <li>2</li>
        <li>2</li>
    </ul>
</li>
</ul>
#nav>li {padding-left:20px;}

在这个例子中,只有外层列表的li会有20px的左边距,内层嵌套的不会有影响。

相邻同胞选择器,定位同一个父元素下某个元素之后的元素。

h2 + p {font-size:18px;}

属性选择器,根据某个元素的属性是否存在或属性值来寻找元素。

a[title=”test”] {color:#F00;}

CSS的优先级

 如何计算指定选择器的优先级?如果你考虑到将优先级表示为用逗号隔开的四个数字就会相当简单,比如:1, 1, 1, 1 或0, 2, 0, 1

  1. 第一个数字(a)通常就是0,除非在标签上使用style属性;
  2. 第二个数字(b)是该选择器上的id的数量的总和;
  3. 第三个数字(c)是用在该选择器上的其它属性选择器和伪类的总和。这里包括class (.example) 和属性选择器(比如 li[id=red]);
  4. 第四个数字(d)计算元素(就像table、p、div等等)和伪元素(就像:first-line等);
  5. 通用选择器(*)是0优先级;
  6. 如果两个选择器有同样的优先级,在样式表中后面的那个起作用。

让我们看几个例子,这样或许比较容易理解些:

  • #sidebar h2 — 0, 1, 0, 1
  • h2.title — 0, 0, 1, 1
  • h2 + p — 0, 0, 0, 2
  • #sidebar p:first-line — 0, 1, 0, 2

在下面的例子中,第一个将会起作用,因为它比第二个优先级高:

  • #sidebar p#first { color: red; } — 0, 2, 0, 1
  • #sidebar p:first-line { color: blue; } — 0, 1, 0, 2

文章参考

http://www.qianduan.net/taming-advanced-css-selectors.html

http://www.ruanyifeng.com/blog/2009/03/css_selectors.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏俞其荣的博客

Vue.js模板方法

28913
来自专栏前端知识分享

第27天:js-表单获取焦点和数组声明遍历

1、this指事件的调用者 2、input.value 表单更换内容 3、innerHTML更换盒子里的内容,文字、标签都能换。 4、isNaN("12")如果...

1792
来自专栏河湾欢儿的专栏

标签类型

标签类型 块 1.独占一行 2.支持所有样式 3.不设置宽度的时候,宽度撑满整个一行 内嵌 1.可以在一行显示 2.不支持宽高,不支持上下的mar...

1043
来自专栏菩提树下的杨过

silverlight中的几个冷门标记 {x:Null},d:DesignWidth,d:DesignHeight

{x:Null}:用于设置某属性值为Null,比如<Rectangle Fill="{x:Null}" />,其实就相当于<Rectangle />,个人感觉这...

2036
来自专栏前端知识分享

第79天:jQuery事件总结(二)

       上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件、事件冒泡和事件移除等内容。

1182
来自专栏一枝花算不算浪漫

[jQuery学习系列四 ]4-Jquery学习四-事件操作

3909
来自专栏超然的博客

vue—你必须知道的

不要在实例属性或者回调函数中(例如,vm.$watch('a', newVal => this.myMethod())使用箭头函数。因为箭头函数会绑定父级上下文...

1442
来自专栏偏前端工程师的驿站

CSS魔法堂:选择器及其优先级

一、前言                               首先看看一道阿里这期网申的题目吧! 1.找出下面优先级相同的选择器   A. im...

2336
来自专栏九彩拼盘的叨叨叨

学习前端 第5周 第4天

923
来自专栏python3

tkinter -- Menu

程序每次打印出当前选中的语言,与 Checkbutton 不同的是,同一个组内只有一个处于选中状态

873

扫码关注云+社区

领取腾讯云代金券