CSS选择器总结

CSS中的选择器规则非常重要,种类也比较多,而jquery中的元素选择器与之也非常类似,所以很有必要进行学习总结一番。

1.元素选择器:

例:选择所有p元素

p {background-color:gray}

 以上p可以是任意的html元素名字,如body,h1,h2,div,span等。

2.选择器分组

例:选择所有p元素和h2元素

p,h2 {background-color:red}

3.类选择器

例:选择所有class=‘demo‘的元素

.demo {background-color:gray}

4.类结合元素选择器

例:选择所有class=‘demo‘的h1元素

h1.demo {background-color:red}

5.多类选择器

例:选择同时class标记为demo1,demo2的元素

.demo1.demo2{background-color:red}

6.ID选择器

例:选择ID=demo的元素

#demo {background-color:red}

  这里需要注意的是:(1)ID在整个html文档中是唯一的,而class不唯一(2)类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写,所以类和 ID 值的大小写必须与文档中的相应值匹配。

7.属性选择器

a)简单属性选择器

例:选择含有demo的属性的所有元素

*[demo] {color:red}

  例:只选择有 href 属性的锚(a 元素)

a[href] {color:red}

  例:选择同时有 href 和 title 属性的 HTML 超链接

a[href][title] {color:red}

 (b)根据具体属性值选择

例:选出title是‘demo1‘,href是‘#‘的超链接

a[title=‘demo‘][href=‘#‘] {color:red}

  需要注意的是title必须是‘demo‘,不能多也不能少。

(c)根据部分属性值进行选择

例:选出title属性里包含‘demo‘的超链接,比如title本来是‘demo1‘

a[title~=‘demo‘] {color:red}

  需要注意的是省略了‘~’,将找出‘title‘属性值只能是‘demo‘的超链接。

(d)字串匹配属性选择器

 利用几个正则符号来表示如下:

[abc^="def"]   表示选择 abc 属性值以 "def" 开头的所有元素;

[abc$="def"]   表示选择 abc 属性值以 "def" 结尾的所有元素;

[abc*="def"]    表示选择 abc 属性值中包含子串 "def" 的所有元素;

(e)特定属性类型

例:选择 lang 属性等于 en 或以 en- 开头的所有元素

*[lang|="en"] {color: red;}

  所以,以下示例标记中的前三个元素将被选中,而不会选择后两个元素:

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G‘day!</p>
<p lang="fr">Bonjour!</p>    
<p lang="cy-en">Jrooana!</p>

8.后代选择器

h1 em {color:red;}

例:上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本(如段落或块引用中的 em)则不会被这个规则选中:

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

需要注意的是,后代选择器有一个易被忽视的方面,即两个元素之间的层次间隔可以是无限的,例如,如果写作 ul em,这个语法就会选择从 ul 元素继承的所有 em 元素,而不论 em 的嵌套层次多深。

9.子元素选择器

如果希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器。

例:把第一个 h1 下面的两个 strong 元素变为红色,但是第二个 h1 中的 strong 不受影响,因为第二个h1的子元素只有em,而strong是其孙子元素。

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

 

h1 > strong {color:red;}

10.相邻兄弟选择器

如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。

例:如果要增加紧接在 h1 元素后出现的段落的上边距

h1 + p {margin-top:50px;}

请看下面这个文档树片段:

<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>

 在上面的片段中,div 元素中包含两个列表:一个无序列表,一个有序列表,每个列表都包含三个列表项。这两个列表是相邻兄弟,列表项本身也是相邻兄弟。不过,第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟,因为这两组列表项不属于同一父元素(最多只能算堂兄弟)。

li + li {font-weight:bold;}

  因此,上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。

11.伪类

(a)锚伪类

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

 需要注意的是:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的;a:active 必须被置于 a:hover 之后,才是有效的。

(b)first-child类

例:给定以下规则

p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}

第一个规则将作为某元素第一个子元素的 p 元素(如果不是p元素就是没找到)设置为粗体。第二个规则将作为某个元素(在 HTML 中,这肯定是 ol 或 ul 元素)第一个子元素的li 元素(如果不是i元素就是没找到)变成大写。

<div>
<p>These are the necessary steps:</p>  <--!>是<div>第一个元素,并且还是<p>元素。
<ul>
<li>Intert Key</li>  <--!>是<ul>第一个元素,并且还是<li>元素
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>  
</div>

最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。必须声明 <!DOCTYPE>,这样 :first-child 才能在 IE 中生效。

又例如:

<html>
<head>
<style type="text/css">
p > i:first-child {
  font-weight:bold;
  } 
</style>
</head>

<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>

 首先p>i是p元素下的所有子元素i, 然后first-child,即图中加粗的部分。

再例如:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<style type="text/css">
p:first-child i {
color:blue;

</style>
</head>

<body>
<h1>kdsk</h1>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
<div>
<p>some<i>text</i><span><i>test</i></span></p>
<p>some<i>text</i></p>
</div>
</body>
</html>

 首先p:first-child是某元素第一个<p>元素,所有<body>下没找到,而<div>找到了,因为它第一个子元素就是p;然后再在该p元素下找出所有后代子元素i,即上面代码块中标蓝色的两个text。

12.伪元素

(a):first-line

用于向文本的首行设置特殊样式,注意只能用于块级元素,下面的属性可应用于:first-line.

font
color
background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

 例:根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化

p:first-line
  {
  color:#ff0000;
  font-variant:small-caps;
  }

(b) :first-letter

用于向文本的首字母设置特殊样式,只能用于块级元素。下面属性可应用于:first-letter.

font
color
background
margin
padding
border
text-decoration
vertical-align (仅当 float 为 none 时)
text-transform
line-height
float
clear

  例:向文本的首字母设置特殊样式

p:first-letter
  {
  color:#ff0000;
  font-size:xx-large;
  }

  (c):before

可以在元素的内容前面插入新内容.

例:在每个 <h1> 元素前面插入一幅图片

h1:before
  {
  content:url(logo.gif);
  }

 (d):after

以在元素的内容之后插入新内容

例:在每个 <h1> 元素后面插入一幅图片

h1:after
  {
  content:url(logo.gif);
  }

  

 

CSS选择器总结

上一篇:在webpack构建的项目中使用移动端ui组件框架


下一篇:Android中Activity的android:windowSoftInputMode属性