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

96
越IT
2017.01.11 23:29* 字数 2942

一、基本选择器

回顾选择器

通配符选择器、元素选择器、类选择器、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)

选择某元素下的第numberElement元素关于参数(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

Web note ad 1