1500字范文 > 学CSS选择器看这篇文章就够了（近2万字详解）

学CSS选择器看这篇文章就够了（近2万字详解）

时间：2023-03-18 20:25:33

📜个人简介

⭐️个人主页：微风洋洋🙋‍♂️
🍑博客领域：编程基础💡,后端💡,大数据,信息安全
🍅写作风格：干货,干货,还是tmd的干货
🌸精选专栏：【JavaScript】【HTML+CSS】【Java学习笔记】【Java必刷题】
🚀支持洋洋：点赞👍、收藏⭐、留言💬

好久不见，甚是想念！

大家好！

我是微风洋洋今天这篇文章就是来和大家详细聊聊CSS选择器，希望大家读完有所收获，那我辛苦码字也就值了。如果你觉得对你有一丢丢启发的话，不妨点赞、收藏、关注支持一下，你的支持将是我继续创作的最大动力。下一篇将介绍CSS元素样式，到时不见不散~~~

文章目录

一、CSS3概述二、CSS的基本选择器1.标记选择器2.类选择器3.ID选择器三、在HTML中使用CSS的方法行内样式嵌入样式链接样式导入样式样式的优先级1．行内样式和嵌入样式比较2．嵌入样式和链接样式比较3．链接样式和导入样式四、CSS复合选择器交集选择器并集选择器后代选择器子选择器相邻选择器五、CSS3新增的选择器属性选择器伪类选择器1. 基本结构伪类选择器2. 与元素位置有关的结构伪类选择器3.UI伪类选择器伪元素选择器1．:first-letter和:first-line2．选择器:before和:after六、使用CSS设计网站页面

一、CSS3概述

1．CSS的发展

2．浏览器对CSS3的支持

流行的浏览器对CSS都有很好的支持，但不同浏览器对CSS3很多细节的处理存在差异。

3．CSS的编辑器

Dreamweaver CS5、WebStorm、IntelliJ IDEA、VSCode

CSS的一个示例

示例：使用传统的HTML设计页面。

实现效果

HTML代码

使用CSS改进HTML设计页面

使用CSS有以下几个主要优点。

（1）结构和风格分离

（2）扩充HTML标记

（3）提高网站维护效率

（4）可以实现精美的页面布局

二、CSS的基本选择器

CSS可以认为是多个选择器组成的集合，每个选择器由3个基本部分组成——“选择器名称”、“属性”和“值”，格式定义如下。

selector {

property:value;

}

1.标记选择器

一个HTML页面由很多不同的标记组成，例如<p>、<h1>、<div>等。CSS标记选择器就用于声明这些标记的CSS样式。

tagName {

property:value;

}

2.类选择器

类选择器用来为一系列标记定义相同的呈现方式。

.className {

property:value;

}

示例所示为标记选择器和类选择器的综合应用

3.ID选择器

ID选择器和类选择器在设置格式的功能上类似，都是对特定属性的属性值进行设置。

ID选择器的一个重要功能是用做网页元素的唯一标识，所以，一个HTML文件中一个元素的ID属性值中惟一的。

定义ID选择器的语法格式如下。

#idName{

property:value ;

}

在定义ID选择器时，需要在idName前面加一个“#”符号，如下面的示例所示。

#font1{

font-family:“幼圆”;

color:#00F;

}

类选择器与ID选择器主要区别如下。

（1）类选择器可以给任意数量的标记定义样式，但ID选择器在页面的标记中只能使用一次。

（2）ID选择器比类选择器具有更高的优先级，即当ID选择器与类选择器在样式定义上发生冲突时，优先使用ID选择器定义的样式。

示例ID选择器的应用

<!DOCTYPE html><html><head><meta charset="utf-8"><style type="text/css">p {text-indent: 2em;}#first {/*ID选择器*/font-family: "幼圆";color: #00F;}#second {line-height: 130%;font-family: "隶书";}</style></head><body><p id="first">开展计算思维教学是计算机科学发展的必然结果。</p><p id="second">计算机早期的发展，在计算机科学的引领下，指导什么能做，什么不能做；什么做的快，什么做的慢；什么做的好，什么做的不好。</p><p>现在已经没有章法了，似乎计算机没有不能做的。而且计算机的超快计算速度和超大存储能力傲视着理论研究。这掩盖了一些深层次的本质问题。</p></body></html>

效果

三、在HTML中使用CSS的方法

行内样式

最简单的一种使用方式，直接把CSS代码添加到HTML的代码行中，由<style>标记支持，代码示例如下：

<h1 style="color:blue;font-style:bold"></h1>

嵌入样式

将样式定义作为网页代码的一部分，写在HTML文档的<head>和</head>之间，通过<style>和</style>标记来声明。

嵌入的样式与行内样式有相似的，也有不同，行内样式的作用域只有一行，而嵌入的样式可以作用于整个HTML文档中。

示例是包含行内样式和嵌入样式。

链接样式

链接样式是在HTML中引入CSS使用频率最高的方法。

体现了“页面内容”和“样式定义”分离实现了内容描述和CSS代码的分离网站的前期制作和后期维护都十分方便。

链接样式先要定义一个扩展名为“.css”的文件（即外部样式表），该文件包含需要用到的CSS规则，不包含任何其他的HTML代码。

链接样式表的方法就是在HTML文件的<head>部分添加代码，格式如下。

<link rel="stylesheet" type="text/css" href=" mystyle.css" />

链接样式表的一个示例

HTML文件

<!DOCTYPE html><html><head><meta charset="utf-8"><link href="css/mystyle.css" type="text/css" rel="stylesheet"/></head><body><p id="first">开展计算思维教学是计算机科学发展的必然结果。</p><p id="second">计算机早期的发展，在计算机科学的引领下，指导什么能做，什么不能做；什么做的快，什么做的慢；什么做的好，什么做的不好。</p><p>现在已经没有章法了，似乎计算机没有不能做的。而且计算机的超快计算速度和超大存储能力傲视着理论研究。这掩盖了一些深层次的本质问题。</p></body></html>

CSS文件

导入样式

导入样式和链接样式的操作过程基本相同，都需要一个单独的外部CSS文件，然后再将其导入到HTML文件中，但在语法和运行过程上有所差别。

导入样式是HTML文件初始化时将外部CSS文件导入到HTML文件内，作为文件的一部分，类似于嵌入。

导入外部样式需要在内嵌样式表的<style>标记中使用@import导入一个外部的CSS文件，示例代码如下。

<style type="text/css">@import "mystyle.css";</style>

示例

样式的优先级

1．行内样式和嵌入样式比较

行内样式的优先级大于嵌入样式

2．嵌入样式和链接样式比较

嵌入样式的优先级高于链接样式。

3．链接样式和导入样式

链接样式的优先级高于导入样式的优先级。

通过前面的例子，CSS样式表方式的优先顺序由高到低次依为：行内样式、嵌入样式、链接样式和导入样式。

四、CSS复合选择器

复合选择器就是两个或多个基本选择器通过不同方式组合而成的选择器，可以实现更强、更方便的选择功能，主要有交集选择器、并集选择器和后代选择器等。

交集选择器

交集选择器是由两个选择器直接连接构成的，其结果是选中两者各自作用范围的交集。其中，第一个必须是标记选择器，第二个必须是类选择器或ID选择器，例如：“h1.class1；p#id1”。

交集选择器的基本语法格式如下。

tagName.className {

property:value;

}

示例演示了交集选择器的作用

代码

<!DOCTYPE html><head><meta charset="utf-8"><style>div {color: blue;font-size: 9px;}.class1 {font-size: 12px;}div.class1 {color: red;font-size: 10px;font-weight: bold;}</style></head><body><div>正常div标记，蓝色，9px</div><p class="class1">类选择器，12px</p><div class="class1">交集选择器，红色，加粗，10px</div></body></html>

效果

并集选择器

并集选择器就是对多个选择器进行集体声明，多个选择器之间用“，”隔开，每个选择器可以是任何类型选择器。

如果某些选择器定义的样式完全相同，或者部分相同，则可以使用并集选择器。

下面是并集选择器的语法格式。

selector1,selector2,… {

property:value;

}

示例演示了并集选择器的作用

代码

后代选择器

在CSS选择器中，还可以通过嵌套的方式，对特殊位置的HTML标记进行控制。例如，当<div>与</div>之间包含<b>标记时，就可以使用后代选择器定义出现在<div>标记中的<b>标记的格式。后代选择器的写法是把外层的标记写在前面，内层的标记写在后面，之间用空格隔开。

selector1 selector2 {

property:value;

}

两个选择器之间用空格隔开，并且selector2是selector1包含的对象。

示例

代码

<!DOCTYPE html ><head><meta charset="utf-8"></head><style>div {font-family: "幼圆";color: #003;font-size: 12px;font-weight: bold;}div li {/*后代选择器*/margin: 0px;padding: 5px;list-style: none; /*隐藏默认列表符号*/}div li a {/*后代选择器*/text-decoration: none; /*取消超链接下划线*/}</style><body><div><a href="#">请选择下列选择器</a><ul><li><a href="#">交集选择器</a></li><li><a href="#">并集选择器</a></li><li><a href="#">后代选择器</a></li><li><a href="#">子选择器</a></li><li><a href="#">相邻选择器</a></li></ul></div></body></html>

效果

子选择器

子选择器语法格式如下：

selector1>selector2

示例

代码

<!DOCTYPE html><head><meta charset="utf-8"><style>div > p {font-family: "幼圆";color: #F00;}</style></head><body>子选择器是在CSS2.1以后的版本中增加的。<div><p>本行应用了子选择器,幼园红色</p><em><p>本行不属于相邻选择器，因为div标记和p标记不同级</p></em><p>本行应用相邻选择器,幼园红色</p></div></body></html>

效果

相邻选择器

相邻选择器的定义符号是加号（+），可以选中紧跟在它后面的一个兄弟元素（这两个元素具有共同的父元素）

示例

代码

<!DOCTYPE html><head><meta charset="utf-8"><style>div + p {font-family: "幼圆";color: #F00;}</style></head><body><div>相邻选择器是在CSS2.1以后的版本中增加的。</div><p>本行应用相邻选择器,幼园红色</p><p>本行不与div相邻,相邻选择器无效</p>**************************<div>相邻选择器是在CSS2.1以后的版本中增加的。<p>本行不属于相邻选择器，因为div标记和p标记不同级</p></div>***************************<div>相邻选择器是在CSS2.1以后的版本中增加的。</div>本行无标记，不影响应用相邻选择器<p>本行应用相邻选择器,幼园红色</p></body></html>

效果

五、CSS3新增的选择器

属性选择器

通过各种各样的属性，可以给元素增加很多附加信息。例如，通过id属性，可以区分不同的元素；通过class属性，可以设置元素的样式。

为了扩展属性选择器的功能，可以使用^、$和*这三个通配符。

属性选择器及其功能

示例是关于属性选择器的一个例子

代码

<!DOCTYPE html><html><head><meta charset="utf-8"><style type="text/css">* {/*网页中所有文字的格式*/text-decoration: none;font-size: 16px;}a[href^=http]:before {/*在指定属前之前插入内容*/content: "超文本传输协议: ";color: red;}a[href$=jpg]:after, a[href$=png]:after {/*在指定属前之后插入内容*/content: " 图像";color: green;}</style></head><body><ul><li><a href="http://dltravel.html">Welcome to DL</a></li><li><a href="firework.png">Firework素材</a></li><li><a href="photoShop.jpg">Photoshop素材</a></li></ul></body>

效果

伪类选择器

伪类选择器区别于类选择器，类选择器是由用户自行定义，而伪类选择器是在CSS中已经定义好的选择器。

伪类选择器可以分为结构伪类选择器和UI元素伪类选择器2种。

1. 基本结构伪类选择器

基本结构伪类选择器

伪类选择器可以分为结构伪类选择器和UI元素伪类选择器2种。

2. 与元素位置有关的结构伪类选择器

与元素位置有关的结构伪类选择器

示例

代码

<!DOCTYPE html><html><head><meta charset="utf-8"><style type="text/css">table {border:none;font: 14px 宋体;}table caption { /*表格标题*/padding: 5px;background-color: lightgrey;font-size: 24px;}thead {/*表头定义*/background-color:dodgerblue;color: white;}tbody tr:nth-child(odd){/*表体定义，奇数行偶数行分别定义*/background-color:#cbcbcb ;}tbody tr:nth-child(even){background-color: #aaa;}td,th {padding: 5px;border-bottom: 1px solid white;}</style></head><body><table cellspacing="0"><caption>大连广场</caption><thead><tr><th>广场名称</th><th>特点描述</th></tr></thead><tbody><tr><td>星海广场</td><td>从星海广场沿中央大道北行500米左右是星海会展……</td></tr><tr><td>人民广场</td><td>城雕前100双脚印揭示了大连一步一个脚印地走过了百年……</td></tr><tr><td>中山广场</td><td>是一个购物，餐饮，休闲，娱乐一站式购物街区……</td></tr><tr><td>友好广场</td><td>博物馆/纪念展览馆，主题公园/游乐场……</td></tr><tr><td>五四广场</td><td>从百盛的兴起，到家乐福的进驻，再到罗斯福的开业……</td></tr></tbody></table></body></html>

效果

3.UI伪类选择器

常用的UI伪类选择器

示例

代码

<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><title>Document</title><style>input[type="text"]:enabled{background-color:#FF0;}input[type="text"]:disalbed{background-color:#F0F;}</style></head><body><form>姓          名:<input type="text" name="text1" disabled/> <br>身份证号码:<input type="text" name="text2" enabled /></form></body></html>

效果

示例是超级链接的伪类选择器的应用。

示例展示了伪类选择器:focus和:first-child的功能

代码

<!DOCTYPE html><head><meta charset=" utf-8"/><title>伪类选择器</title><style>input:focus {background: #FF6;font-family: "黑体";font-size: 12px;}div:first-child {color: #060;font-family: "黑体";font-size: 12px;}</style></head><body>first-child 伪类选择器示例:<div>本块是body的first-child，按指定格式显示</div><strong><div>本块是strong的first-child，本行按指定格式显示</div><div>本行非first-child，未按指定格式显示</div></strong><p>:focus伪类选择器示例：<form name="form1" method="get">请输入姓名：<input type="text" name="name"/></form></body></html>

效果

伪元素选择器

1．:first-letter和:first-line

:first-letter用于选中元素内容的首字符。:first-line用于选中元素中的首行文本。

2．选择器:before和:after

:before和:after两个伪对象必须配合content属性使用才有意义。它们的作用是在指定的标记内产生一个新的行内标记，该行内元素的内容由content属性里的内容决定。

before选择器用于在某个元素之前插入内容。

: before {

content:文字或其他内容

}

after选择器用于在某个元素之后插入内容。

: after {

content:文字或其他内容

}

示例

代码

<!DOCTYPE HTML><html><head><meta charset=utf-8><style>li:after {content: "(仅用于测试，请勿用于商业用途。)";font-size: 12px;color: red;}p:before {content: "★ ";}</style></head><body><h1>课程清单</h1><ul><li><a href="html.mp4">HTML5</a></li><li><a href="css.mp4">CSS3</a></li><li><a href="JS.mp4">JavaScript</a></li></ul><h2>HTML5</h2><p>Canvas</p><p>WebWorker</p><p>WebStorage</p><p>离线应用</p><p>WebSocket</p></body></html>

效果

六、使用CSS设计网站页面

示例的布局使用表格，页面中的元素如文字、超级链接、表单、水平线等由CSS来控制，页面效果如图所示。

代码

<!DOCTYPE html><head><meta charset="utf-8"><title>Web前端技术</title><style type="text/css"></style></head><body><table id="out"><tr><td style="text-align:center;padding:0;"><img src="images/title3.jpg" style="width:760px; height:161px;"/></td></tr><tr><td class="menu_style"><a href=""> HTML</a><a href=""> CSS</a><a href="">JavaScript</a><a href="">Ajax</a><a href="">XML</a><a href=""></a></td></tr><tr><td><table id="main"><tr><td class="wodeweizhi"><p class="zw">我的位置>>CSS</p><hr/><p class="zw">CSS(Cascading StyleSheets，层叠样式表)是标准的布局语言，用来控制元素的尺寸、颜色和排版，用来定义如何显示HTML元素，纯CSS的布局与XHTML相结合，可使内容表现与结构相分离，并使网页更容易维护，易用性更好。请参阅<a href="#">CSS详解</a>。</p><p class="zw"> 常见的CSS开发工具有包括记事本、EditPlus文本编辑器；可视化网页开发工具Dreamweaver CS5、Frontpage等.</p><p class="zw">关于CSS的一些问题，欢迎和我们交流<a href="#">Email me</a>. </p></td><td><form id="form1" name="form1" method="post" action=""><table id="search"><tr><td style="width:50%;"><img src="images/username.jpg" /></td><td><input type="text" name="uname" id="uname"/></td></tr><tr><td><img src="images/password.jpg" /></td><td><input type="text" name="pwd" id="pwd"/></td></tr><tr><td><span class="dianjizheli">点击这里</span><a href="#">注册</a></td><td><img src="images/login_1.jpg" style="width:44px;height:17px;"/></td></tr></table></form><div class="dianxingkuangjia"><p>典型框架</p><p><a href="#">JQuery</a></p><p><a href="#">Dojo</a></p><p><a href="#">Prototype</a></p></div></td></tr></table></td></tr><tr><td class="foot_style"><p>版权所有</p></td></tr></table></body></html>