点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

CSS选择器总结-zhongJaywang

来源：动视网责编：小采时间：2020-11-27 16:44:24

CSS选择器总结-zhongJaywang

CSS选择器总结-zhongJaywang:最近在www.w3school.com.cn学习了CSS选择器，下面做一个知识汇总。部分源码来自www.w3school.com.cn！插入样式表的方法有三种：第一种：外部样式表 head> link rel=stylesheet type=text/css href=mystyle.css

推荐度：

点击下载本文 文档为doc格式

导读CSS选择器总结-zhongJaywang:最近在www.w3school.com.cn学习了CSS选择器，下面做一个知识汇总。部分源码来自www.w3school.com.cn！插入样式表的方法有三种：第一种：外部样式表 head> link rel=stylesheet type=text/css href=mystyle.css

最近在www.w3school.com.cn学习了CSS选择器，下面做一个知识汇总。部分源码来自www.w3school.com.cn！

插入样式表的方法有三种：

第一种：外部样式表

第二种：内部样式表

第三种：内联样式表

This is a paragraph

CSS基本的选择器有四种，其它复杂的选择器都由这四种组合而成

元素选择器（类型选择器）
id选择器
类选择器
属性选择器

选择器的基础语法，规则由两个主要的部分构成：选择器，以及一条或多条声明。

//CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

//每条声明由一个属性和一个值组成。

selector {property: value}

1. 元素选择器（类型选择器）

```
h1 {font-family: sans-serif;}
```

同时也可以为XML文档设置样式：

XML文档：




George
John
Reminder
Don't forget the meeting!

CSS样式：

note
 {
 font-family:Verdana, Arial;
 margin-left:30px;
 }

to
 {
 font-size:28px;
 display: block;
 }

from
 {
 font-size:28px;
 display: block;
 }

heading
 {
 color: red;
 font-size:60px;
 display: block;
 }

body
 {
 color: blue;
 font-size:35px;
 display: block;
 }

2.id选择器

id 属性只能在每个 HTML 文档中出现一次！

HTML代码：

这个段落是红色。

这个段落是绿色。

CSS样式：

#red {color:red;}
#green {color:green;}

3.类选择器

在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。

This heading will be center-aligned

This paragraph will also be center-aligned.

CSS样式：

.center {text-align: center}

4.属性选择器

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

为了更准确的定位HTML元素并对其添加样式，在上面四种基础选择器上面，CSS选择器还可以分成：分组选择器，派生选择器，后代选择器，子元素选择器，相邻兄弟选择器，伪类和伪元素。

*1.分组选择器

/* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}

/* grouping */
h1, h2, h3, h4, h5, h6 {color:blue;}

*2.派生选择器

派生选择器是通过依据元素在其位置的上下文关系来定义样式的。

HTML代码：

我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用

我是斜体字。这是因为 strong 元素位于 li 元素内。
我是正常的字体。

CSS代码：

li strong {
 font-style: italic;
 font-weight: normal;
 }

*3.后代选择器

后代选择器又称包含选择器，可以选择某元素的任意一代的后代元素。

HTML代码：

This is a important heading

This is a important paragraph.

CSS代码：

h1 em {color:red;}

*4.子元素选择器

子元素选择器只可选择某元素第一代后代的选择器。

HTML代码：

This is very very important.
This is really very important.

CSS代码：

h1 > strong {color:red;}

*5.相邻兄弟选择器

相邻兄弟选择器会选择某一元素紧随其后的元素，但是前提是他们拥有相同的父级。

eg1:

HTML代码：


 
This is a heading

 This will be styled.
 This will not be styled.

CSS代码：

h2 + strong {color:red;}

语法规则是h2和strong之间有一个“＋”，“＋”和前面的h1或者后面的strong之间的空格都是可有可无的。

在以上例子中，第一个strong紧邻着h2并且他们拥有相同的父级(h1)，所以h2 + strong会选择到第一个而不会选到第二个.

eg2:

HTML代码：

 
 
 List item 1 
 List item 2 
 List item 3 
 
  
 List item 1 
 List item 2 
 List item 3

CSS代码：

li + li {color:red;}

在以上的例子中li+li是选择紧挨着li后面的第一个

，所以第一个

不会被选择；而第二个

是紧挨着第一个li的，所有会被选择；第三个

是紧挨着第二个

的，也会被选择。

*6伪类

伪类的语法：

selector : pseudo-class {property: value}

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

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

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

超链接例子：

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

*7伪元素

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