CSS选择器和CSS3选择器

最新推荐文章于 2023-05-13 01:36:30 发布

不爱编程的小方

最新推荐文章于 2023-05-13 01:36:30 发布

阅读量205

点赞数 1

分类专栏： html&css

本文链接：https://blog.csdn.net/qq_38053677/article/details/103911515

版权

html&css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

CSS导入方式

类别	引入方法	位置	加载
行内样式	开始标签内style	html文件内	同时
内部样式	<head>中<style>内	html文件内	同时
链入外部样式	<head>中<link>引用	css样式文件与html文件分离	页面加载时，同时加载CSS样式
导入式@import	<head>中<style>内	css样式文件与html文件分离	在读取完html文件之后加载

使用链入外部样式的好处？

css和html文件分离
多个文件可以使用同一个样式文件
多个文件引用同一个css文件，css只需要下载一次

link和@import的区别？

区别1： link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。

区别2：加载顺序的差别。

当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式，网速慢的时候还挺明显。简而言之就是，link引用CSS时，在页面载入时同时加载；@import需要等页面完全载入后才加载

区别3：兼容性的差别。

由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

区别4：使用dom控制样式时的差别。

当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

区别5：链入方式上有区别。

<!--link导入方式：-->
<link rel="stylesheet" type="text/css" href="index.css"> 

<!--@import导入的方式：-->
<style type="text/css">   
@import url('index.css');  
</style>

并且@import可以在CSS文件中再次引入其他样式表。

css导入方式优先级

对于同一个元素，同时使用上面表格的四种导入方式来设置CSS样式来查看他们的优先级

行内样式 > 内部样式 > 外部样式

说明：

1、链入外部样式表与内部样式表之间的优先级取决于所处位置的先后

2、最后定义的优先级最高（就近原则）

CSS选择的艺术

标签选择器

p{color:red}

通过标签选择器设置样式，那使用该标签的内容都引用该样式。

类选择器

为HTML标签添加class属性

<h1 class = "red">内容1</h1>

通过类选择器来为具有此class属性的元素设置CSS样式

.red{color:red}

可对不同类型元素的同一个名称的类选择器设置不同的样式规则

p.red{font-size:50px}

每一个标签可以属于多个类选择器

<h1 class = "red one">内容</h1>

ID选择器

为HTML标签添加id属性

<h1 id="one">内容</h1>

通过ID选择器来设置CSS样式

#one{
    color:red
}

群组选择器

h1,p,p.red,h2{
    font-size:50px
}

全局选择器

*{
    font-size:50px
}

后代选择器

p a em {...}	/*p标签中a标签中的em*/

#p1 em {...}	/*id为p1的标签中的em*/

p.red a em{...}	/*class为red的p标签中的a标签中的em*/

伪类选择器

伪类选择器定义特殊状态下的样式，无法用标签、id、class及其它属性实现

链接伪类——链接的4种状态：激活状态、已访问状态、未访问状态、和鼠标悬停状态

伪类	说明
:link	未访问的链接
:visited	已访问的链接
:hover	鼠标悬停状态
:active	激活的链接

伪类:hover和:active

1 :hover用于访问的鼠标经过某个元素时

2 :active用于一个元素被激活时（即按下鼠标之后放开鼠标之前的时间）

IE6及更早版本，支持a元素的4种状态

IE6浏览器不支持其他元素的hover和active

链接伪类的顺序

:Link > :Visited > :Hover > :Active

说明：

1 a:hover必须置于a:link和a:visited之后，才有效

2 a:actived必须置于 a:hover之后，才有效

3 伪类名称对大小写不敏感

CSS继承和层叠

继承的好处：

1、父元素设置样式，子元素可以继承部分属性

2、减少CSS属性

注意：不是所有属性都是可以继承的，在IE中，table表格不会继承父元素的属性。

CSS层叠：

1、可以定义多个样式

2、不冲突时，多个样式可以层叠为一个

3、冲突时，按不同样式规则优先级来应用样式

CSS权重

CSS优先级规则

同一个样式表中：

1.权值相同

就近原则（离被设置元素越近优先级越高）

2.权值不同

根据权值来判断CSS样式，哪种CSS样式权值高，就使用哪种样式

选择器的权值：

标签（元素）选择器和伪元素选择器：权值为1
类选择器、属性选择器和伪类选择器：权值为10
ID选择器：权值为100
通配符选择器：权值为0
行内样式：权值为1000

！important规则
可调整样式规则的优先级（最高）
添加在样式规则之后，中间用空格隔开

div{color:red !important;}

CSS命名规范

采用英文字母、数字以及”-“和”_“命名
以小写字母开头，不能以数字和”-“，”_“开头
命名形式：单字，连字符，下划线和驼峰

/*一个单词，采用全部小写方式*/
.special{......}
/*多个单词*/
/*驼峰写法，除第一个单词外，其他首字母大写*/
.mainTitle{......}
/*采用"-"连接符*/
.main-title{......}
/*采用"_"下划线*/
.main_title{......}

使用有意义命名

CSS3选择器

回顾CSS选择器：

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

新增基本选择器：

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

基本选择器

子元素选择器

概念：

子元素选择器只能选择某元素的子元素

语法格式：

父元素 > 子元素（Father > Childern）

兼容性：

IE8+、FireFox、Chrome、Safari、Opera

别名：

直接后代选择器

相邻兄弟元素选择器

概念：

相邻兄弟元素选择器可以选择紧邻在另一元素后的元素，而且他们都具有一个相同的父元素

语法格式：

元素 + 兄弟相邻元素（Element + Sibling）

兼容性：

IE8+、FireFox、Chrome、Safari、Opera

通用兄弟选择器

概念：

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

语法格式：

元素 ~ 后面所有兄弟相邻元素（Element ~ Siblings）

兼容性：

IE8+、FireFox、Chrome、Safari、Opera

群组选择器

概念：

群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号”，“隔开

语法格式：

元素1,元素2,…,元素n（Element1,Element2,…,Elementn）

兼容性：

IE6+、FireFox、Chrome、Safari、Opera

属性选择器

对带有指定属性的HTML元素设置样式

Element[attribute]

概念：

选择所有带有attribute属性选择器

兼容性：

IE8+，FireFox、Chrome、Safari、Opera

Element[attribute=“value”]

概念：

选择所有使用atribute=“value”的元素

兼容性：

IE8+，FireFox、Chrome、Safari、Opera

Element[attribute~=“value”]

概念：

选择attribute属性包含单词“value”的元素

兼容性：

IE8+，FireFox、Chrome、Safari、Opera

Element[attribute^=“value”]

概念：

选择attribute属性值以“value”开头的所有元素

兼容性：

IE8+，FireFox、Chrome、Safari、Opera

Element[attribute$=“value”]

概念：

选择attribute属性值以“value”结尾的所有元素

兼容性：

IE8+，FireFox、Chrome、Safari、Opera

Element[attribute*=“value”]

概念：

选择attribute属性值包含“value”的所有元素

兼容性：

IE8+，FireFox、Chrome、Safari、Opera

Element[attribute|=“value”]

概念：

选择attribute属性值为“value”或以“value-”开头的元素

兼容性：

IE8+，FireFox、Chrome、Safari、Opera

伪类选择器

动态伪类：

锚点伪类
用户行为伪类

UI元素状态伪类

CSS3结构类

否定选择器

伪元素

动态伪类

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

锚点伪类 :link ， :visited

用户行为伪类 :hover ， :active ，：focus

UI元素状态伪类

概念：

我们把“:enabled”，“:disable”，“:checked”伪类称为UI元素状态伪类

兼容性：

IE9+，FireFox、Chrome、Safari、Opera

CSS3结构类

CSS3的:nth选择器

我们把CSS3的:nth选择器也称为CSS3结构类

选择方法：

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

Element:first-child

概念：

选择属于其父元素的首个子元素的每个Element元素

兼容性：

IE8+，FireFox、Chrome、Safari、Opera

Element:last-child

概念：

指定属于其父元素的最后一个子元素的Element元素

兼容性：

IE8+，FireFox、Chrome、Safari、Opera

Element:nth-child(N)

概念：

:nth-child(N)选择器匹配属于其父元素的第N个子元素，不论元素的类型

兼容性：

IE9+，FireFox4+，Chrome，Safari，Opera

关于参数（N）

Element:nth-child(number)

选择某元素下的第number个Element元素

Element:nth-child(n)

n是一个简单的表达式，取值从“0”开始计算。这里只能是“n”，不能用其他字母代替，可以实现一些巧妙的用法，如2n+1表示奇数，2n表示偶数等

Element:nth-child(odd)，Element:nth-child(even)

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

Element:nth-last-child(N)

概念：

匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数

兼容性：

IE9+，FireFox4+，Chrome，Safari，Opera

Element:nth-of-type(N)

概念：

:nth-of-type(N)选择匹配属于父元素的特定类型的第N个子元素的每个元素

兼容性：

IE9+，FireFox4+，Chrome，Safari，Opera

Element:nth–last-of-type(N)

概念：

匹配属于父元素的特定类型的第N个子元素的每个元素，从最后一个子元素开始计数

兼容性：

IE9+，FireFox4+，Chrome，Safari，Opera

Element:first-of-type

概念：

:first-of-type选择器匹配属于其父元素的特定的首个子元素的每个元素

兼容性：

IE9+，FireFox4+，Chrome，Safari，Opera

Element:last-of-type

概念：

:last-of-type选择器匹配属于其父元素的特定的首个子元素的每个元素

兼容性：

IE9+，FireFox4+，Chrome，Safari，Opera

Element:only-child

概念：

:only-child选择器匹配属于其父元素的唯一子元素的每个元素

兼容性：

IE9+，FireFox，Chrome，Safari，Opera

Element:only-of-type

概念：

:only-of-type选择器匹配属于其父元素的特定类型的唯一子元素的每个元素

兼容性：

IE9+，FireFox4+，Chrome，Safari，Opera

Element:empty

概念：

:empty选择器匹配没有子元素（包括文本节点）的每个元素

兼容性：

IE9+，FireFox，Chrome，Safari，Opera

否定选择器（:not）

概念：

:not(Element/selector)选择器匹配非指定元素/选择器的每个元素

语法格式：

	父元素：not(子元素/子选择器)	（Father:not(Children/selector)）

兼容性：

IE9+，FireFox，Chrome，Safari，Opera

举个例子：

<!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

Element::first-line

概念：

根据“first-line”伪元素中的样式对Element元素的第一行文本进行格式化

说明：

“first-line”伪元素只能用于块级元素

Element::first-letter

概念：

用于向文本的首字母设置特殊样式

说明：

“first-letter”伪元素只能用于块级元素

Element::before

概念：

在元素的内容前面插入新的内容

说明：

常用“content”配合使用

Element::after

概念：

在元素的内容后面插入新内容

说明：

常用“content”配合使用，多用于清除浮动

Element::selection

概念：

用于设置在浏览器选中文本后的背景色和前景色

兼容性说明：

::selection在IE家族中，只有IE9+版本支持，在Firefox中需要加上其前缀“-moz”

不爱编程的小方

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器和CSS3选择器

文章目录CSS导入方式css导入方式优先级CSS选择的艺术标签选择器类选择器ID选择器群组选择器全局选择器后代选择器伪类选择器CSS继承和层叠CSS权重CSS命名规范CSS3选择器基本选择器子元素选择器相邻兄弟元素选择器通用兄弟选择器群组选择器属性选择器Element[attribute]Element[attribute=“value”]Element[attribute~=“value”]El...
复制链接

扫一扫

专栏目录