CSS，cascading style sheet，层叠样式表，请留意层叠概念。

css3为了区分伪类和伪元素，伪元素采用双冒号写法。

常见伪类——:hover,:link,:active,:target,:not(),:focus。

常见伪元素——::first-letter,::first-line,::before,::after,::selection。

::before和::after伪元素的用法

::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。

这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。

所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。

举例：网站有些联系电话，希望在它们前加一个icon☎，就可以使用:before伪元素，如下：
<!DOCTYPE html>

<meta charset="utf-8" />

<style type="text/css">

    .phoneNumber::before {

    content:'\FFFD';

    font-size: 15px;

}

</style>

<p class="phoneNumber">12345645654</p>

::before 示例

::before 和:before有什么区别？

这个问题看来很简单，但如果之前没有琢磨这个问题，给人感觉也是门头一垂，听到这个题目就懵逼了，因为原来从来没有注意过这个问题，即便有注意这个问题也不能很好的回答清楚。回答的技巧就是从相同点和不同点，以及他们的作用，及注意事项上去回答。

解答要点

相同点

都可以用来表示伪类对象，用来设置对象前的内容

:befor和::before写法是等效的

不同点

:befor是Css2的写法，::before是Css3的写法

:before的兼容性要比::before好 ，不过在H5开发中建议使用::before比较好

加分项

伪类对象要配合content属性一起使用

伪类对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入

伪类对象的特效通常要使用:hover伪类样式来激活
.test:hover::before { /* 这时animation和transition才生效 */ }

序列选择器

#1、作用：

css3中新推出的选择器中，最具代表性的的9个，又称为序列选择器，过去的选择器中要选中某个必须加id或class，学习了这9个后，不用加id或class，想选中同级别的第几个就选第几个

#2、格式

#2.1 同级别

:first-child    p:first-child    同级别的第一个

:last-child    p:last-child    同级别的最后一个

:nth-child(n)                    同级别的第n个

:nth-last-child(n)            同级别的倒数第n个

#2.2 同级别同类型

:first-of-type                    同级别同类型的第一个

:last-of-type                    同级别同类型的最后一个

:nth-of-type(n)                    同级别同类型的第n个

:nth-last-of-type(n)            同级别同类型的倒数第n个

#2.3 其他

:only-of-type                    同类型的唯一一个

:only-child                         同级别的唯一一个
#1、同级别的第一个

#1.1 示范一

p:first-child {

    color: red;

}

代表：同级别的第一个，并且第一个要求是一个p标签

<p>我是段落1</p>

<p>我是段落2</p>

<p>我是段落3</p>

<p>我是段落4</p>

<p>我是段落5</p>

<div>

    <p>我是段落6</p>

</div>

这样的话第一个p和div中的第一个p都变成红色，

#1.2 示范二

p:first-child {

    color: red;

}

代表：同级别的第一个，并且第一个要求是一个p标签

<h1>w我是标题</h1>

<p>我是段落1</p>

<p>我是段落2</p>

<p>我是段落3</p>

<p>我是段落4</p>

<p>我是段落5</p>

<div>

    <p>我是段落6</p>

</div>

这样的话只有div中的第一个p变红，因为在有在div内同一级别的第一个才是p

注意点：

    :fist-child就是第一个孩子，不区分类型

#2、同级别的最后一个

p:last-child {

    color: red;

}

代表：同级别的最后一个，并且最后一个要求是一个p标签

<h1>我是标题</h1>

<p>我是段落1</p>

<p>我是段落2</p>

<p>我是段落3</p>

<p>我是段落4</p>

<p>我是段落5</p>

<div>

    <p>我是段落6</p>

</div>

<p>我是段落7</p>

这样的话只有6跟7都变红

#3、同级别的第n个

p:nth-child(3) {

    color: red;

}

代表：同级别的第3个，并且第3个要求是一个p标签

<h1>我是标题</h1>

<p>我是段落1</p>

<p>我是段落2</p>

<p>我是段落3</p>

<p>我是段落4</p>

<p>我是段落5</p>

<div>

    <p>我是段落6.1</p>

    <p>我是段落6.2</p>

    <h1>我是标题</h1>

</div>

<p>我是段落7</p>

这样的话只有“我是段落2”变红

#4、同级别的倒数第n个

p:nth-last-child(3) {

    color: red;

}

代表：同级别的倒数第3个，并且第3个要求是一个p标签

<h1>我是标题</h1>

<p>我是段落1</p>

<p>我是段落2</p>

<p>我是段落3</p>

<p>我是段落4</p>

<p>我是段落5</p>

<div>

    <p>我是段落6.1</p>

    <p>我是段落6.2</p>

    <h1>我是标题</h1>

</div>

<p>我是段落7</p>

这样的话只有“我是段落6.1”和“我是段落5”被选中

同级别

<h1>我是标题</h1>

<p>我是段落1</p>

<p>我是段落2</p>

<p>我是段落3</p>

<p>我是段落4</p>

<p>我是段落5</p>

<div>

    <p>我是段落6.1</p>

    <p>我是段落6.2</p>

    <h1>我是标题</h1>

</div>

<p>我是段落7</p>

#1、同级别同类型的第一个

p:first-of-type {

    color: red;

}

“我是段落1”和“我是段落6.1”被选中

#2、同级别同类型的最后一个

p:last-of-type {

    color: red;

}

“我是段落7”和“我是段落6.2”被选中

#3、同级别同类型的第n个

p:nth-of-type(2) {

    color: red;

}

“我是段落2”和“我是段落6.2”被选中

#4、同级别同类型的倒数第n个

p:nth-last-of-type(2) {

    color: red;

}

“我是段落5”和“我是段落6.1”被选中

同级同类型

#1、同类型的唯一一个

p:only-of-type {

    color: red;

}

<h1>我是标题</h1>

<div>

    <p>我是段落6.1</p>

    <p>我是段落6.2</p>

    <h1>我是标题</h1>

</div>

<p>我是段落7</p>

“我是段落7“被选中

#2、同级别的唯一一个

p:only-child {

    color: red;

}

<h1>我是标题</h1>

<div>

    <p>我是段落6.1</p>

</div>

<p>我是段落7</p>

“我是段落6.1”被选中

其他

属性选择器

#1、作用：根据指定的属性名称找到对应的标签，然后设置属性

       该选择器，最常用于input标签

#2、格式与具体用法：

    [属性名]

    其他选择器[属性名]

    [属性名=值]

    [属性名^=值]

    [属性名$=值]

    [属性名*=值]

    例1：找到所有包含id属性的标签

        [id]

    例2：找到所有包含id属性的p标签

        p[id]

    例3：找到所有class属性值为part1的p标签

        p[class="part1"]

    例4：找到所有href属性值以https开头的a标签

        a[href^="https"]

    例5：找到所有src属性值以png结果的img标签

        img[src$="png"]

    例6：找到所有class属性值中包含part2的标签

        [class*="part"] 
!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>后代选择器</title>

    <style type="text/css">

        [id] {

            color: red;

        }

        p[id] {

            font-size: 30px;

        }

        p[class="part1"] {

            color: green;

        }

        a[href^="https"] {

            font-size: 50px;

        }

        img[src$="png"] {

            width: 100px;

        }

        [class*="part"] {

            text-decoration: line-through;

        }

    </style>

</head>

<body>

    <h1 id="id1">哈哈啊</h1>

    <p id="id2">我是段落</p>

    <p class="part1">我是段落</p>

    <p class="xxx part2 yyy">我是段落</p>

    <a href="#">我是我</a>

    <a href="http://www.baidu.com">http://www.baidu.com</a>

    <a href="https://www.baidu.com">https://www.baidu.com</a>

    <img src="1.png" alt="">

    <img src="2.jpg" alt="">

    <p>我是段落</p>

    <p>我是段落</p>

</body>

</html>

示例

 兄弟选择器

#1、作用：给指定选择器后面紧跟的那个选择器选中的标签设置属性

#2、格式

选择器1+选择器2 {

    属性：值;

}

#3、注意点：

1、相邻兄弟选择器必须通过+号链接

2、相邻兄弟选择器只能选中你紧跟其后的那个标签，不能选中被隔开的标签

相邻兄弟选择器，CSS2推出

#1、作用：给指定选择器后面的所有选择器中的所有标签设置属性

#2、格式：

选择器1~选择器2 {

    属性：值;

}

#3、注意点：

1、通用兄弟选择器必须用~来链接

2、通用兄弟选择器选中的是指选择器后面的某个选择器选中的所有标签

无论有没有被隔开，都可以被选中

通用兄弟选择器，CSS3推出

伪类选择器

#1、作用：常用的几种伪类选择器。

#1.1 没有访问的超链接a标签样式：

a:link {

  color: blue;

}

#1.2 访问过的超链接a标签样式：

a:visited {

  color: gray;

}

#1.3 鼠标悬浮在元素上应用样式：

a:hover {

  background-color: #eee;

}

#1.4 鼠标点击瞬间的样式：

a:active {

  color: green;

}

#1.5 input输入框获取焦点时样式：

input:focus {

  outline: none;

  background-color: #eee;

}

#2 注意：

1 a标签的伪类选择器可以单独出现，也可以一起出现

2 a标签的伪类选择器如果一起出现，有严格的顺序要求，否则失效

    link，visited，hover，active

3 hover是所有其他标签都可以使用的

4 focus只给input标签使用
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>后代选择器</title>

    <style type="text/css">

        a:link {

            color: #cccccc;

        }

        a:visited {

            color: #55BBBB;

        }

        a:hover {

            color: green;

        }

        a:active {

            color: red;

        }

        input:hover {

            outline: none;

            background-color: #cccccc;

        }

    </style>

</head>

<body>

<a href="https://www.baidu.com/a/b/c/d.html">点击我</a>

<input type="text">

</body>

</html>

示例

伪元素选择器

#1、常用的伪元素。

#1.1 first-letter：杂志类文章首字母样式调整

例如：

p:first-letter {

  font-size: 48px;

}

#1.2 before

用于在元素的内容前面插入新内容。

例如：

p:before {

  content: "*";

  color: red;

}

在所有p标签的内容前面加上一个红色的*。

#1.3 after

用于在元素的内容后面插入新内容。

例如：

p:after {

  content: "?";

  color: red;

}

在所有p标签的内容后面加上一个蓝色的?。
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>后代选择器</title>

    <style type="text/css">

        p:first-letter {

            font-size: 50px;

        }

        /*两个冒号与一个是一样的，老版本用的是一个冒号，考虑到兼容性推荐使用一个冒号*/

        a::after {

            content: "?";

            color: red;

        }

        a:before {

            content: "-";

            color: green;

        }

    </style>

</head>

<body>

<p>英雄不问出处，流氓不论岁数</p>

<a href="#" class="help">老男孩是干什么的</a>

<a href="#" class="help">老男孩是干什么的</a>

<a href="#" class="help">老男孩是干什么的</a>

</body>

</html>

示例

CSS三大特性

1、继承性

#1、定义：给某一个元素设置一些属性，该元素的后代也可以使用，这个我们就称之为继承性

#2、注意：

    1、只有以color、font-、text-、line-开头的属性才可以继承

    2、a标签的文字颜色和下划线是不能继承别人的

    3、h标签的文字大小是不能继承别人的，会变大，但是会在原来字体大小的基础上变大

    ps:打开浏览器审查元素可以看到一些inherited from。。。的属性

#3、应用场景：

    通常基于继承性统一设置网页的文字颜色，字体，文字大小等样式

2、层叠性

#1、定义：CSS全称：Cascading StyleSheet层叠样式表，层叠性指的就是CSS处理冲突的一种能力，即如果有多个选择器选中了同一个标签那么会有覆盖效果

#2、注意：

1、层叠性只有在多个选择器选中了同一个标签，然后设置了相同的属性，

才会发生层叠性

ps：通过谷歌浏览器可以查看到，一些属性被划掉了

3、优先级

#1、定义：当多个选择器选中同一个标签，并且给同一个标签设置相同的属性时，如何层叠就由优先级来确定

#2、优先级

    整体优先级从高到底：行内样式>嵌入样式>外部样式

    行内样式并不推荐使用，所以我们以嵌入为例来介绍优先级

注意：

1、大前提：直接选中 > 间接选中(即继承而来的)

2、如果都是间接选中，那么谁离目标标签比较近，就听谁的

3、如果都是直接选中，并且都是同类型的选择器，那么就是谁写的在后面就听谁的

4、如果都是直接选中，并且是不同类型的选择器，那么就会按照选择器的优先级来层叠

    id > 类 > 标签 > 通配符(也算直接选中) > 继承 > 浏览器默认（即没有设置任何属性）

5、优先级之!important
　　
#1、作用：还有一种不讲道理的!import方式来强制指定的属性的优先级提升为最高，但是不推荐使用。因为大量使用!import的代码是无法维护的。

#2、注意：

    1、!important只能用于直接选中，不能用于间接选中

    2、!important只能用于提升被指定的属性的优先级，其他属性的优先级不会被提升

    3、!important必须写在属性值分号的前面




6、优先级之权重计算




#1、强调

如果都是直接选中，并且混杂了一系列其他的选择器一起使用时，则需要通过计算机权重来判定优先级

#2、计算方式

#1、id数多的优先级高

#2、id数相同，则判定类数多的优先级高

#3、id数、class数均相同，则判定标签数多的优先级高

#4、若id数、class数、标签数均相同，则无需继续往下计算了，谁写在后面谁的优先级高




 


												


											
CSS节选——选择器的更多相关文章
	

    
								
  1. CSS的选择器
		
    <div id="demo"> <div class="inner"> <p><a href="#" ...
    
		
    2. 
						
  2. JS实战 · 仿css样式选择器
		
    代码如下: <html> <head>     <meta http-equiv="Content-Type" content="text/ ...
    
		
    3. 
						
  3. CSS 后代选择器
		
    后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起 ...
    
		
    4. 
						
  4. css后代选择器（div.class中间不带空格）
		
    如果我要查找<div>上用了.class的元素,查找方法:div.class:中间是不空格的. 以上这种形式为css后代选择器 参考:http://www.w3school.com.cn/ ...
    
		
    5. 
						
  5. CSS样式选择器优先级
		
    CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...
    
		
    6. 
						
  6. css中选择器的使用
		
    css是英文Cascading Style Sheets的缩写.它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.我们再将html比喻 ...
    
		
    7. 
						
  7. CSS 派生选择器
		
    派生选择器 通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁. 在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由 ...
    
		
    8. 
						
  8. CSS 类选择器
		
    在 CSS 中,类选择器以一个点号显示: .center {text-align: center} 在上面的例子中,所有拥有 center 类的 HTML 元素均为居中. 在下面的 HTML 代码中, ...
    
		
    9. 
						
  9. CSS id 选择器
		
    id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. 下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. position布局影响点击事件以及冒泡获取事件目标
			
    在编写功能时总是会出现很多意想不到的问题,现在就讲讲我遇到的两个问题,通过举一个相似的例子来解说. <1> 元素互相独立,不存在包含于被包含 选择城市的按钮,为它绑定点击事件,点击后就弹出 ...
    
			
    2. 
						
  2. 已有Web项目添加Maven支持
			
    IDE:MyEclipse 当我们在现有的Web开发项目中集成 Maven 的时候,需要修改以下几个地方: 1.将以下代码拷贝到工程根路径下的 .project 文件中的 <buildSpec& ...
    
			
    3. 
						
  3. Google APAC----Africa 2010, Qualification Round(Problem A. Store Credit)----Perl 解法
			
    原题地址链接:https://code.google.com/codejam/contest/351101/dashboard#s=p0 问题描述: Problem You receive a cre ...
    
			
    4. 
						
  4. php下载远程大文件（获取远程文件大小）
			
    function download_file($url) { // $url = http://192.168.8.95/vm/download_file?downurl=http://192.168 ...
    
			
    5. 
						
  5. IEC62304-2006解读
			
    IEC62304强调医疗软件在明确和满足其预期用途的前提下,不能引发不可接受的风险 62304提供一个医疗软件开发的框架,并指出框架下每个过程的要求,62304将过程分解为若干活动,活动分解为若干任务 ...
    
			
    6. 
						
  6. forkjoin框架疑问记录
			
    今天在看jdk1.7的forkjoin框架时候,里面有个例子如下: product类: public class Product { private String name; private doub ...
    
			
    7. 
						
  7. MAC电脑安装svn客户端cornerstone
			
    个人感觉在mac上最好用的svn客户端就是cornerstone,公司客户端也统一使用这个 sudo spctl --master-disable 这条命令作用就是使得mac运行安装任何来源App,不 ...
    
			
    8. 
						
  8. Oracle11g服务详细介绍及哪些服务是必须开启的
			
    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/DaisyLoveZly/article/details/79463713 七个服务的含义分别为:1. ...
    
			
    9. 
						
  9. SpringMvc学习---基础知识考核
			
    SpringMVC 1.SpringMVC的工作流程 流程 : 1.用户发送请求至前端控制器DispatcherServlet2.DispatcherServlet收到请求调用HandlerMappi ...
    
			
    10. 
						
  10. Handlebars.js中集合(list)通过中括号的方式取值
			
    有这么一个需求,在一个table中,tr是通过each取值,取出的值要与table标题相对应,如何实现?例如: <table> <thead> <tr> {{#ea ...
    
			
    11.