【css】css引入方法及选择器详解(基本选择器层次选择器结构伪类选择器属性选择器)

一二小选手

于 2024-08-07 11:40:24 发布

阅读量697

点赞数 21

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/m0_66584716/article/details/140987625

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

css概念

CSS：Cascading Style Sheet（级联样式表）

表现HTML或XHTML文件样式的计算机语言

包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

CSS2.0 融入了DIV+CSS的概念，提出了HTML结构与CSS样式表的分离
CSS2.1 融入了更多高级的用法，如浮动，定位等。
CSS3.0 它包括了CSS2.1下的所有功能，是目前最新的版本，它向着模块化的趋势发展，又加了很多使用的新技术，如字体、多背景、圆角、阴影、动画等高级属性，但是它需要高级浏览器的支持。
由于现在IE 6、IE 7使用比例已经很少，对市场企业进行调研发现使用CSS3的频率大幅增加，学习CSS3已经成为一种趋势。

优势

内容与表现分离
网页的表现统一，容易修改
丰富的样式，使得页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS，有利于网页被搜索引擎收录

语法

选择器 { 
    声明1;
    声明2;
    ……  
}
/*CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;”都要写上*/

style标签

<style type="text/css"> </style>

引入方式

行内样式(使用style属性引入CSS样式)

<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>

内部样式表(CSS代码写在<head>的<style>标签中)

<style>h1{color: green; }</style>
<!--
优点：方便在同页面中修改样式
缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底
-->

外部样式表(CSS代码保存在扩展名为.css的样式表中 HTML文件链接式或导入式引用扩展名为.css的样式表)

<head>
    <!-- 链接外部样式表 -->
	<link href="style.css" rel="stylesheet" type="text/css" />
    <!-- 导入外部样式表 -->
    <style type="text/css">
		<!--@import url("style.css");-->
	</style>
</head>

链接式与导入式的区别

<link/> 标签属于XHTML，@import 是属于CSS2.1
使用<link/> 链接的CSS 文件先加载到网页当中，再进行编译显示
使用@import 导入的CSS 文件，客户端显示HTML 结构，再把CSS 文件加载到网页当中
@import 是属于CSS2.1 特有的，对不兼容CSS2.1 的浏览器是无效的

CSS样式优先级（就近原则）

行内样式 > 内部样式表？外部样式表（哪个离元素近）

基本选择器

全局选择器

*{......}
标签选择器(直接应用于HTML标签)

<h1>…<h6>、<p>、<img/>
类选择器(可在页面中多次使用)

class = "类名称" .class{......}
ID选择器(在同一个页面中只能使用一次)

id = "标识名称" #id{......}
并集选择器(用,隔开)

#id,.class,span{......}
交集选择器(css中后者重复属性会覆盖前者)

class="al a2"

基本选择器的优先级

ID选择器 > 类选择器 > 标签选择器 > 全局选择器

标签选择器是否也遵循“就近原则”？

不遵循，无论是哪种方式引入CSS样式，一般都遵循ID选择器 > class类选择器 > 标签选择器 > 全局选择器的优先级

高级选择器

层次选择器、结构伪类选择器、属性选择器

层次选择器

选择器	类型	功能描述
E F	后代选择器	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E > F	子选择器	选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
E + F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E ~ F	通用兄弟选择器	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

<body>
    <ul class="content">
        <li class="one"><a>1</a></li>
        <li><a>2</a></li>
        <li><a>3</a></li>
    </ul>
    <ul>
        <li class="four">4</li>
        <li>5</li>
    </ul>
</body>

后代选择器

body li{  background: red;  } /* 1 2 3 4 5*/
/* 后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入 */

子选择器

.content>li{  background: pink;  }
/* 1 2 3 */

相邻兄弟选择器

.four+li {  background: green;  }
/* 5 */

通用兄弟选择器

.one~li{  background: yellow;  }
/* 2 3 */

结构伪类选择器

选择器	功能描述
E:first-child	作为父元素的第一个子元素的元素E
E:last-child	作为父元素的最后一个子元素的元素E
E F:nth-child(n)	选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd
E:first-of-type	选择父元素内具有指定类型的第一个E元素
E:last-of-type	选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n)	选择父元素内具有指定类型的第n个F元素

<body>
    <ul>
        <a>1</a>
        <li>2</li>
        <a>3</a>
        <li>4</li>
    </ul>
</body>

ul li:first-child{ background: red;} /* 无效 */
ul li:last-child{ background: green;} /* 有效 4 */
ul a:nth-child(1){ background: yellow;} /* 有效 1 */
ul li:nth-child(1){ background: yellow;} /* 无效 */

ul li:first-of-type{ background: red;} /* 2 */
ul li:last-of-type{ background: red;} /* 4 */
ul li:nth-of-type(1){ background: red;} /* 2 */

E F:nth-child(n)和E F:nth-of-type(n)的区别

E F:nth-child(n)：第n个元素必须是那个子元素E才生效（按顺序查找）
E F:nth-of-type(n)：第n个那个子元素E生效（按元素查找）

属性选择器

属性选择器	功能描述
E[attr]	选择匹配具有属性attr的E元素
E[attr=val]	选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
E[attr^=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr*=val]	选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配

<body>
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#2">2</a></li>
        <li><a href="123">3</a></li>
        <li><a>4</a></li>
    </ul>
</body>

/* 含有href属性的a标签背景变为黄色 */
a[href] {
    background: yellow;
}
/* 1 2 3 */

/* 含有href 属性且值为# 的a 标签背景变为红色 
	E[attr=val]属性选择器中，属性和属性值必须完全匹配才能被选中 */
a[href = '#'] {
    background: red;
}
/* 1 */

/* 含有href 属性且值包含# 的a 标签背景变为红色 */
a[href* = '#'] {
    background: red;
}
/* 1 2 */

a[href^=http] { background: red; }
/* 含有href 属性且值由http 开头的a 标签背景变为红色 */
a[href$=png] { background: red; }
/* 含有href 属性且值由png 结尾的a 标签背景变为红色 */

一二小选手

关注

21
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
【css】css引入方法及选择器详解(基本选择器层次选择器结构伪类选择器属性选择器)

不遵循，无论是哪种方式引入CSS样式，一般都遵循ID选择器 > class类选择器 > 标签选择器 > 全局选择器的优先级。E F:nth-child(n)和E F:nth-of-type(n)的区别。外部样式表(CSS代码保存在扩展名为.css的样式表中 HTML文件。内部样式表(CSS代码写在<head>的<style>标签中)交集选择器(css中后者重复属性会覆盖前者)层次选择器、结构伪类选择器、属性选择器。标签选择器(直接应用于HTML标签)类选择器(可在页面中多次使用)并集选择器(用,隔开)
复制链接

扫一扫