CSS选择器&伪类

css选择器 

 

• CSS 元素选择器
• CSS 选择器分组
• CSS 类选择器详解
• CSS ID 选择器详解
• CSS 属性选择器详解
• CSS 后代选择器
• CSS 子元素选择器
• CSS 相邻兄弟选择器
• CSS 伪类
• CSS 伪元素

开始了- - 理论不讲，直接上例子

• CSS 元素选择器p{ }
  可以设置 XML 文档中元素的样式。
  
• CSS 选择器分组

同时设置几个标签样式 h1,h2{ }

这个是通配符选择器

*{ }

• CSS 类选择器详解

只有段落显示为红色文本：

p.important {color:red;}

p.important 解释为：“其 class 属性值为 important 的所有段落”

<p class="important warning">通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。

• CSS ID 选择器详解

ID 选择器会使用一次，而且仅一次。

ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。

ID 能包含更多含义

类似于类，可以独立于元素来选择 ID。有些情况下，您知道文档中会出现某个特定 ID 值，但是并不知道它会出现在哪个元素上，所以您想声明独立的 ID 选择器。例如，您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容，它可能在任何元素中，而且只能出现一个。在这种情况下，可以编写如下规则：

• CSS 属性选择器详解

 把包含标题（title）的所有元素变为红色，可以写作：

*[title] {color:red;}

有 href 属性的锚（a 元素）应用样式：

a[href] {color:red;}

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

a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

属性与属性值必须完全匹配

根据部分属性值选择

假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：

p[class~="important"] {color: red;}

 p.important 和 p[class="important"] 应用到 HTML 文档时是等价的。

img[title~="Figure"] {border: 1px solid gray;}

[abc^="def"]	选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"]	选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"]	选择 abc 属性值中包含子串 "def" 的所有元素

a[href*="w3school.com.cn"] {color: red;}

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

上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。

• CSS 子元素选择器

h1 > strong {color:red;}

第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

table.company td > p

选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性。

• CSS 后代选择器
  

对 h1 元素中的 em 元素应用样式，可以这样写：

h1 em {color:red;}

div.sidebar {background:blue;}
 两个元素之间的层次间隔可以是无限的

• CSS 相邻兄弟选择器

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

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

  用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器：

li + li {font-weight:bold;}

 html > body table + ul {margin-top:20px;}

这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。

• CSS 伪类

语法

伪类的语法：

selector : pseudo-class {property: value}

CSS 类也可与伪类搭配使用。

selector.class : pseudo-class {property: value}


a.red : visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>

锚伪类

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

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

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

提示：伪类名称对大小写不敏感。

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

q:lang(no)
   {
   quotes: "~" "~"
   }

匹配所有 <p> 元素中的第一个 <i> 元素：

p > i:first-child {}

属性	描述	CSS
:active	向被激活的元素添加样式。	1
:focus	向拥有键盘输入焦点的元素添加样式。	2
:hover	当鼠标悬浮在元素上方时，向元素添加样式。	1
:link	向未被访问的链接添加样式。	1
:visited	向已被访问的链接添加样式。	1
:first-child	向元素的第一个子元素添加样式。	2
:lang	向带有指定 lang 属性的元素添加样式。	2

• CSS 伪元素

伪元素的语法：

selector:pseudo-element {property:value;}

CSS 类也可以与伪元素配合使用：

selector.class:pseudo-element {property:value;}

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

p.article:first-letter
  {
  color: #FF0000;
  }

<p class="article">This is a paragraph in an article。</p>

"first-letter" 伪元素只能用于块级元素。

注释：下面的属性可应用于 "first-letter" 伪元素：

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

"first-line" 伪元素只能用于块级元素。

注释：下面的属性可应用于 "first-line" 伪元素：

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

属性	描述	CSS
:first-letter	向文本的第一个字母添加特殊样式。	1
:first-line	向文本的首行添加特殊样式。	1
:before	在元素之前添加内容。	2
:after	在元素之后添加内容。	2