CSS3：基本、属性、伪类选择器

作者: 越IT | 来源:发表于2017-01-11 23:29 被阅读55次

一、基本选择器

回顾选择器

通配符选择器、元素选择器、类选择器、ID选择器、后代选择器

新增基本选择器

子元素选择器、相邻兄弟元素选择器、通用兄弟选择器、群组选择器

1.基本选择器——子元素选择器

【概念】：子元素选择器只能选择某元素的子元素（直接后代选择器）

语法格式：父元素>子元素（father>children）

【兼容性】：IE8+、FireFox、chrome、Safari、opera

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素选择器</title>
<style type="text/css">
section > div {
    color: #f00;
}
</style>
</head>
<body>
<section>
    <article>
        <div>article里面的文字</div>
    </article>
    <div>article外面的文字</div>
</section>
</body>
</html>

效果

2.基本选择器——相邻兄弟元素选择器

【概念】：相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素。

语法格式：元素+兄弟相邻元素（Element+Sibling）

【兼容性】：IE8+、FireFox、chrome、Safari、oper

<meta charset="UTF-8">
<title>兄弟元素选择器</title>
<style type="text/css">
section > div + article {
    color: #f00;
}
</style>
</head>
<body>
<section>
    <div>article外面的文字</div>
    <article>
        <div>article里面的文字</div>
    </article>
    <article>
        <div>article里面的文字</div>
    </article>
</section>
</body>
</html>

效果

3.基本选择器——通用兄弟选择器

【概念】：选择某元素后面的所有兄弟元素，而且他们具有一个相同的父元素

语法格式：元素_{后面所有兄弟相邻元素（Element} Siblings）

【兼容性】IE8+、FireFox、chrome、Safari、oper

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通用兄弟选择器</title>
<style type="text/css">
section > div ~ article {
    color: #f00;
}
</style>
</head>
<body>
<section>
    <article>
        <div>article里面的文字</div>
    </article>
    <div>article外面的文字</div>
    <article>
        <div>article里面的文字</div>
    </article>
    <article>
        <div>article里面的文字</div>
    </article>
    <article>
        <div>article里面的文字</div>
    </article>
    <article>
        <div>article里面的文字</div>
    </article>
    <article>
        <div>article里面的文字</div>
    </article>
</section>
</body>
</html>

效果

4.基本选择器——群组选择器

【概念】：群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号“,”隔开
【语法格式】：元素1,元素2, ..., 元素n（Eelement1, Element2, ..., Elementn）
【兼容性】：IE6+、FireFox、chrome、Safari、oper

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>群组选择器</title>
<style type="text/css">
section > article,
section > aside,
section > div {
    color: #f00;
    margin-top: 10px;
    background: #abcdef;
}
</style>
</head>
<body>
<section>
    <article>article</article>
    <aside>aside</aside>
    <div>div</div>
</section>
</body>
</html>

效果

二、属性选择器

对带有指定属性的HTML元素设置样式
使用CSS3属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。

Element[attribute]

【概念】：为带有attribute属性的Element元素设置样式
【兼容性】：IE8+、FireFox、chrome、Safari、opera

Element[attribute=“value”]

【概念】：为attribute=“value”属性的Element元素设置样式
【兼容性】：IE8+、FireFox、chrome、Safari、opera

Element[attribute~=“value”]

【概念】：选择attribute属性包含单词“value”的元素，并设置其样式
【兼容性】：IE8+、FireFox、chrome、Safari、opera

习题：one，two，three，four，five哪个变红？

答案：one，two

Element[attribute^=“value”]

【概念】：设置attribute属性值以“value”开头的所有Element元素的样式
【兼容性】：IE8+、FireFox、chrome、Safari、opera

Element[attribute$=“value”]

【概念】设置attribute属性值以“value”结尾的所有**Element元素的样式
【兼容性】：IE8+、FireFox、chrome、Safari、opera

Element[attribute*=“value”]

【概念】：设置attribute属性值包含“value”的所有Element元素的样式
【兼容性】：IE8+、FireFox、chrome、Safari、opera

Element[attribute|=“value”]

【概念】：选择attribute属性值以“”value-”**开头的元素，并设置其样式
【兼容性】：IE8+、FireFox、chrome、Safari、opera

三、伪类选择器

动态伪类

锚点伪类、用户行为伪类

UI

元素状态伪类

CSS3结构类

否定选择器

伪元素

·动态伪类

动态伪类

这些伪类并不存在于HTML中，只有当用户和网站交互的时候才能体现出来

1.锚点伪类

:link,    :visited

2.用户行为伪类

:hover,    :active,    :focus

案例:focus案例

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>动态伪类</title>
        <style type="text/css">
         input{
            width: 200px;
            height: 30px;
            border: 5px solid #f00;
         }
         input:focus{
            background: #abcdef;
         }
            
        </style>
    </head>
    <body>
        <input type="text">
    </body>
</html>

伪类选择器.gif

·UI元素状态伪类

【概念】：把":enabled",":disabled",":checked"伪类称为UI元素状态伪类

【兼容性】：
":enabled",":disabled"：IE9+、FireFox、Chrome、Safari、Opera
":checked仅opera

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>UI元素状态伪类</title>
    <style type="text/css">
    input{
        width: 200px;
        height: 30px;
    }
    input:enabled{
        width: 200px;
        height: 30px;
        border: 1px solid #f00;
    }
    input:disabled{
        background: #abcdef;
        border: 1px solid #ff0;
    }
    </style>
</head>
<body>
<input type="text" disabled="disabled">
<input type="text">
<input type="text"> 
</body>
</html>

UI元素伪类enabled，disabled.gif

·CSS3结构类

CSS3的:nth选择器

【概念】：我们把CSS3的:nth选择器也成为CSS3结构类

选择方法：

:first-child、:last-child、:nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()、:first-of-type、:last-of-type、:only-child、:only-of-type、:empty

1.Element:first-child

【概念】
选择属于其父元素的首个子元素的每个Element元素，并为其设置样式
【兼容性】
IE8+、FireFox、Chrome、Safari、Opera

2.Element:last-child

【概念】
选择属于其父元素的最后一个子元素的Element元素，并为其设置样式
【兼容性】
IE8+、FireFox、Chrome、Safari、Opera

Element:nth-child(N)

【概念】
nth-child(N)选择器匹配属于其父元素的第N个子元素，不论元素的类型
【兼容性】
IE9+、FireFox4+、Chrome、Safari、Opera

·关于参数（N）

1.Element:nth-child(number)

选择某元素下的第number个Element元素关于参数(N)

2.Element:nth-child(n)

n是一个简单表达式，取值从“0”开始计算。这里只能是“n”，不能用其他字母代替。

3.Element:nth-child(odd)、Element:nth-child(even)

odd和even是可用于匹配下标是奇数或偶数的Element元素的关键词（第一个的下标是1）

案例题：

列表UL背景颜色有没有变化？
列表项奇数项还是偶数项为绿色？

odd,even的练习题

答案：ul 没有变化；奇数项为绿色

4.Element:nth-last-child(N)

【概念】
匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。（注意：直接从1开始计数，不是0，与JS有区别）
【兼容性】
IE9+、FireFox4+、Chrome、Safari、Opera

5.Element:nth-of-type(N)

【概念】
:nth-of-type(N)选择器匹配属于父元素的特定类型的第N个子元素的每个元素
【兼容性】
IE9+、FireFox4+、Chrome、Safari、Opera

案例div:nth-of-type(N)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nth-of-type</title>
<style type="text/css">
div:nth-of-type(2) {
    color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>
<section>
    <div>1-1</div>
    <div>1-2</div>
    <div>1-3</div>
</section>
<div>0-2</div>
<div>0-3</div>
<section>
    <div>2-1</div>
    <div>2-2</div>
    <div>2-3</div>
</section>
</body>
</html>

上述源码的1-2;0-2;2-2会变红

对比案例div:nth-child

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>noth-child</title>
<style type="text/css">
div:nth-child(2) {
    color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>
<section>
    <div>1-1</div>
    <div>1-2</div>
    <div>1-3</div>
</section>
<div>0-2</div>
<div>0-3</div>
<section>
    <div>2-1</div>
    <div>2-2</div>
    <div>2-3</div>
</section>
</body>
</html>

上述源码：1-2和2-2会变红

6.Element:nth-last-of-type(N)

【概念】
匹配属于父元素的特定类型的第N个子元素的每个元素，从最后一个子元素开始计数
【兼容性】
IE9+、FireFox4+、Chrome、Safari、Opera
【注意对比】：

nth-last-of-type(n)指定元素类型
nth-last-child(n)不指定元素类型

案例：div:nth-last-0f-type(2)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nth-Last-of-type</title>
<style type="text/css">

div:nth-last-of-type(2) {
    color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>
<section>
    <div>1-1</div>
    <div>1-2</div>
    <div>1-3</div>
</section>
<div>0-2</div>
<div>0-3</div>
<section>
    <div>2-1</div>
    <div>2-2</div>
    <div>2-3</div>
</section>
</body>
</html>

1-2,0-2,2-2变红

对比案例div:nth-last-child(2)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nth-Last-child</title>
<style type="text/css">
div:nth-last-child(2) {
    color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>
<section>
    <div>1-1</div>
    <div>1-2</div>
    <div>1-3</div>
</section>
<div>0-2</div>
<div>0-3</div>
<section>
    <div>2-1</div>
    <div>2-2</div>
    <div>2-3</div>
</section>
</body>
</html>

1-2,0-3,2-2变红

7.Element:first-of-type

【概念】
:first-of-type选择器匹配属于其父元素的特定类型的首个子元素的每个元素
相当于noth-of-type(1)
【兼容性】
IE9+、FireFox、Chrome、Safari、Opera

案例first-of-type

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First-of-type</title>
<style type="text/css">
div:first-of-type {
    color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>
<section>
    <div>1-1</div>
    <div>1-2</div>
    <div>1-3</div>
</section>
<div>0-2</div>
<div>0-3</div>
<section>
    <div>2-1</div>
    <div>2-2</div>
    <div>2-3</div>
</section>
</body>
</html>

效果：0-1,1-1,2-1

8.Element:last-of-type

【概念】
:last-of-type选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素
【兼容性】
IE9+、FireFox、Chrome、Safari、Opera

案例last-of-type

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Last-of-type</title>
<style type="text/css">
div:last-of-type {
    color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>
<section>
    <div>1-1</div>
    <div>1-2</div>
    <div>1-3</div>
</section>
<div>0-2</div>
<div>0-3</div>
<section>
    <div>2-1</div>
    <div>2-2</div>
    <div>2-3</div>
</section>
</body>
</html>

案例效果：1-3,0-3,2-3红色

9.Element:only-child

【概念】
:only-child选择器匹配属于其父元素的唯一子元素的每个元素
【兼容性】
IE9+、FireFox、Chrome、Safari、Opera

案例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>only-child</title>
<style type="text/css">
article:only-child {
    background: #f00;
}
</style>
</head>
<body>
<section>
    <article>1</article>
    <article>2</article>
</section>
<section>
    <article>3</article>
</section>
<section>
    <div>4</div>
    <article>5</article>
    <div>6</div>
</section>
<section>
    <div>7</div>
    <article>8</article>
    <article>9</article>
    <div>10</div>
</section>
</body>
</html>

效果：仅第3个背景红色

10.Element:only-of-type

【概念】
:only-of-type选择器匹配属于其父元素的特定类型的唯一子元素的每个元素
【兼容性】
IE9+、FireFox4+、Chrome、Safari、Opera

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>only-of-type</title>
<style type="text/css">
article:only-of-type {
    background: #f00;
}
</style>
</head>
<body>
<section>
    <article>1</article>
    <article>2</article>
</section>
<section>
    <article>3</article>
</section>
<section>
    <div>4</div>
    <article>5</article>
    <div>6</div>
</section>
<section>
    <div>7</div>
    <article>8</article>
    <article>9</article>
    <div>10</div>
</section>
</body>
</html>

效果：3和5都是红色。

11.Element:empty

【概念】
:empty选择器匹配没有子元素（包括文本节点）的每个元素
【兼容性】
IE9+、FireFox、Chrome、Safari、Opera

12.否定选择器（:not）

【概念】
:not(Element/selector)选择器匹配非指定元素/选择器的每个元素
【语法格式】
父元素:not(子元素/子选择器) （Father:not(Children/selector)）
【兼容性】
IE9+、FireFox、Chrome、Safari、Opera

not案例：最后一个竖线清除

最后一个竖线清除效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>not</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    border: none;
}
a {
    text-decoration: none;
    color: #333;
    font-size: 14px;
    display: block;
    float: left;
    width: 100px;
    height: 30px;
}
nav {
    width: 800px;
    margin: 0 auto;
}
nav > a:not(:last-of-type) {
    border-right: 1px solid red;
}
</style>
</head>
<body>
<nav>
    <a href="#">first</a>
    <a href="#">second</a>
    <a href="#">third</a>
    <a href="#">fourth</a>
    <a href="#">fifth</a>
</nav>
</body>
</html>

三、伪元素

CSS伪元素用于向某些选择器设置特殊效果

【语法格式】
元素::伪元素（Element::pseudo-element）

【兼容性】
IE9+、FireFox、Chrome、Safari、Opera
【备注】

对于新版本的浏览器，伪元素:或::都可以，用两个:是为了和之前的选择器进行区分。
伪元素和伪类是不同的：

伪类：整体是个选择器，它选中的只是针对一个元素
伪元素：在之前的元素中，增加了一个在HTML并不存在的元素，即相当于伪造的元素。

1.伪元素——Element::first-line

【概念】
根据“first-line”伪元素中的样式对Element元素的第一行文本进行格式化
【说明】
“first-line”伪元素只能用于块级元素

2.伪元素——Element::first-letter

【概念】
用于向文本的首字母设置特殊样式
【说明】
“first-letter”伪元素只能用于块级元素

3.伪元素——Element::before

【概念】
在元素的内容前面插入新内容
【说明】
常用“content”配合使用

【注意】::before伪元素的特点：
1、第一个子元素
2、行级元素
3、内容通过content写入
4、标签中找不到对应的标签

案例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>before</title>
<style type="text/css">
div {
    width: 300px;
    height: 100px;
    border: 1px solid #000;
}
div::before {
    content: "我在内容的前面";
}
</style>
</head>
<body>
<div>伪元素</div>
</body>
</html>

源码效果：

4.伪元素——Element::after

【概念】
在元素的内容后面插入新内容
【说明】
常用“content”配合使用，多用于清除浮动

Element::after清除浮动案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clear</title>
<style type="text/css">
header {
    background: #abcdef;
}
header::after {
    display: block;
    content: "";
    clear: both;
}
header > article {
    float: left;
    width: 40%;
    height: 30px;
    background: #f00;
}
header > aside {
    float: right;
    width: 40%;
    height: 50px;
    background: #ff0;
}
</style>
</head>
<body>
<header>
    <article></article>
    <aside></aside>
</header>
</body>
</html>

5.伪元素——Element::selection

【概念】
用于设置在浏览器中选中文本后的背景色与前景色
【兼容性】
::selection在IE家族中，只有IE9+版本支持，在Firefox中需要加上其前缀“-moz”

案例：

selection效果.gif

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Selection</title>
<style type="text/css">
div::selection {
    background: red;
    color: #ff0;
}
</style>
</head>
<body>
<div>SelectionSelectionSelectionSelectionSelectionSelectionSelection</div>
</body>
</html>

CSS权重

什么是权重

当很多的规则被应用到某一个元素上时，权重是一个决定哪种规则生效，或者是优先级的过程

权重等级与权值

行内样式（1000）>ID选择器（100）>类、属性选择器和伪类选择器（10）>元素和伪类（1）>*(0)

权重计算口诀

从0开始，一个行内样式+1000，一个id+100，一个属性选择器、class或者伪类+10，一个元素名或者伪元素+1

CSS权重规则

包含更高权重选择器的一条规则拥有更高的权重
ID选择器（idValue）的权重比属性选择器（[id="idValue"]）高带有上下文关系的选择器比单纯的元素选择器权重要高
带有上下文关系的选择器比单纯的元素选择器权重要高
与元素“挨得近”的规则生效
最后定义的这条规则会覆盖上面与之冲突的规则
无论多少个元素组成的选择器，都没有一个class选择器权重高
通配符选择器权重是0，被继承的CSS属性也带有权重，权重也是0

CSS3：基本、属性、伪类选择器

一、基本选择器

回顾选择器

新增基本选择器

1.基本选择器——子元素选择器

2.基本选择器——相邻兄弟元素选择器

3.基本选择器——通用兄弟选择器

4.基本选择器——群组选择器

二、属性选择器

Element[attribute]

Element[attribute=“value”]

Element[attribute~=“value”]

习题：one，two，three，four，five哪个变红？

Element[attribute^=“value”]

Element[attribute$=“value”]

Element[attribute*=“value”]

Element[attribute|=“value”]

三、伪类选择器

动态伪类

UI

元素状态伪类

CSS3结构类

否定选择器

伪元素

·动态伪类

动态伪类

1.锚点伪类

2.用户行为伪类

案例:focus案例

·UI元素状态伪类

案例：

·CSS3结构类

CSS3的:nth选择器

选择方法：

1.Element:first-child

2.Element:last-child

Element:nth-child(N)

·关于参数（N）

1.Element:nth-child(number)

2.Element:nth-child(n)

3.Element:nth-child(odd)、Element:nth-child(even)

案例题：

4.Element:nth-last-child(N)

5.Element:nth-of-type(N)

案例div:nth-of-type(N)

对比案例div:nth-child

6.Element:nth-last-of-type(N)

案例：div:nth-last-0f-type(2)

对比案例div:nth-last-child(2)

7.Element:first-of-type

案例first-of-type

8.Element:last-of-type

案例last-of-type

9.Element:only-child

案例：

10.Element:only-of-type

11.Element:empty

12.否定选择器（:not）

not案例：最后一个竖线清除

三、伪元素

CSS伪元素用于向某些选择器设置特殊效果

1.伪元素——Element::first-line

2.伪元素——Element::first-letter

3.伪元素——Element::before

案例：

4.伪元素——Element::after

Element::after清除浮动案例

5.伪元素——Element::selection

案例：

CSS权重

什么是权重

权重等级与权值

权重计算口诀

CSS权重规则

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读