1.01.17CSS选择器
1.实体字符
- 定义
在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体。<<>> 空格¥￥©
2.HTML语义化标签
- 含义
- 语义化标签是HTML5新出推荐的
- 语义化标签相当于设计好class=“语义”的一些div盒子，语义化标签是为了对浏览器更友好，便于浏览器解释
- 比如：
<div class="nav"></div>相当于<nav>
- 比如：
- HTML5 提供了定义页面不同部分的新语义元素,列举一些常用的：
<article>相当于<div class="article"></div>- 元素定义为独立的自包含内容
<section>相当于<div class="section"></div>- 元素定义为文档中的节，元素被定义为相关元素块
- 注意：section与artcile可以相互嵌套，section元素包含 article元素的，还有article元素包含sections元素的，section元素包含section元素，同时article元素包含article元素。
<footer>相当于<div class="footer"></div>- footer元素为文档或节规定页脚footer元素应该提供有关其包含元素的信息。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。您可以在一个文档中使用多个 footer元素。
<header>相当于<div class="header"></div>- header元素为文档或节规定页眉。header元素应该被用作介绍性内容的容器。一个文档中可以有多个header元素。
<main>相当于<div class="main"></div>- 规定文档的主内容
<nav>相当于<div class="nav"></div>- 定义导航链接
3.CSS基础
- 定义
- Cascading Style Sheets,层叠样式表
- 什么是CSS
- 网页由HTML+CSS+JS，分别代表网页结构(内容)+表现(样式)+行为(逻辑)
- css是一个网页的样式文件,负责美化页面
- 独立的.css文件，是层叠样式表文件
- CSS的四种引入方式
-
行内式(内联样式)：
- 在标签的内部,用style属性写的样式，就是行内式
-
内嵌式(内部样式)：
- 在html文档的head标签里面，用style标签实现的样式，即内嵌式
-
外链式：
- 在head标签中，使用link标签引入的外部样式，即外链式(推荐使用外链式)
- 网页加载时，遇到link标签则会同步把样式加载出来
-
导入式：
- 在内嵌式内部，使用@import导入的外部样式，即导入式(不推荐使用)
- 导入式需要页面加载完成才会开始加载样式，当网速较慢，网页加载完成但样式还未加载，则会显示没有样式的网页
-
样式优先级：
- 行内式优先级较高，比内嵌式与外链式高
- 内嵌式与外链式中，最后加载的优先级高
- 谁离元素近，谁的优先级高，就近原则
- 导入式优先级等于内嵌式优先级
- !important 关键字，可以提高样式优先级，有了该关键字，优先级到达最高
-
题外话：href与src引入的区别：
- href表示超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系
- src表示引用资源，表示**替换当前元素，**用在img，script，iframe上，src是页面内容不可缺少的一部分。src是source的缩写，是指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并应用到当前文档中，例如js脚本，img图片和frame等元素。
<script src="js.js"></script>当浏览器解析到这一句的时候**会暂停其他资源的下载和处理，直至将该资源加载，编译，执行完毕，**图片和框架等元素也是如此，类似于该元素所指向的资源嵌套如当前标签内，这也是为什么要把js饭再底部而不是头部。<link href="common.css" rel="stylesheet"/>当浏览器解析到这一句的时候会识别该文档为css文件，会下载并且不会停止对当前文档的处理- link和@import的区别
两者都是外部引用CSS的方式，但是存在一定的区别：
区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。
-
4.CSS语法
css的语法:
css选择器{
样式:值;
样式:值;
样式:值;
}
5.CSS选择器
1. 元素选择器
-
标签名选择器
如：div{
样式:值;
} -
类名选择器
如：.类名{
样式：值;
} -
id选择器
如：#id{
样式：值;
} -
分组选择器
多个选择器用逗号隔开，多个选择器选中的元素共用一套样式，如：
div,.类名,#id{
样式：值;
} -
交集选择器
既有符合选择器1又符合选择器2的元素使用一套样式，如
选择器1选择器2{
样式：值;
}- 注意：选择器之间没有空格，直接连接
-
通配符选择器:
一个 * ：表示选择页面中的所有元素，如：
*{
样式：值;
}
2. 关系选择器
-
子代选择器 >
如：父代选择器>子代选择器{
样式：值
} -
后代选择器 空格
如：前代选择器 后代选择器(可以是子代、孙代、曾孙代){
样式：值;
}
注意：在写选择器时不要随便空格，空格就是选择了他的后代- 比如：
当divbox有多个儿子元素与孙子元素时,.divbox (空格):hover{样式：值;}与.divbox:hover{样式：值;},产生的效果会不同
- 比如：
-
兄弟选择器 ~
如：选择器~兄弟元素选择器{
样式：值;
}
注意：只能选择该选择器后面的兄弟，前面的兄弟不会起作用 -
相邻选择器 +
如：选择器+相邻元素的选择器{
样式：值;
}
注意：只能选择该选择器后面的邻居，前面的邻居不会起作用
3. 属性选择器
- [attr ]
- [attr = value]
- [attr ~= value]
- [attr *= value]
- [attr ^= value]
- [attr $= value]
- [attr |= value]
HTML文件：
<div>
<input type="radio" name="sex">
<input type="radio" name="sex">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div>
<hr>
<div class="parent">
<div class="child1child2 child3">1</div>
<div class=" child1 child2">2</div>
<div class="child1 child2 child3">3</div>
<div class="child1 child2 ">4</div>
<div class="child1 child2 child3">5</div>
<div class="child1">6</div>
<div class="child1 child2 child3">7</div>
</div>
<hr>
<div>
<!-- <div data-自定义属性名="属性值"></div> -->
<div name="gz gz2205 gz2209">1</div>
<div name="gz">2</div>
<div name="gz-2209 gz2209">3</div>
<div name="gz-">4</div>
</div>
CSS文件：
/* 选中页面中, 具有name属性的元素 */
[name]{
width: 30px;
height: 30px;
}
/* 严格相等, 属性值必须完全等于引号中的值 */
[class="child1"]{
color: red
}
/* 多个空格隔开的值中, 其中的一个值中 child1 就可以被选中 */
[class~="child1"]{
/* 文本删除线 */
text-decoration: line-through;
}
/* 值的整个字符串中, 只要包含有特定字符就行 */
[class*="2 ch"]{
background-color: tomato;
}
/* 值的整个字符串中, 以特定字符串开头 */
[class^="ch"]{
/* 斜体 */
font-style: italic;
}
/* 值的整个字符串中, 以特定字符串结尾 */
[class$="d2"]{
font-weight: bold;
}
/* 值的整个字符串中, 以特定字符开头并且紧跟-连字符, 或者值仅为特定字符 */
[name|="gz"]{
font-size: 40px;
}
4. 伪类选择器
- 伪类选择器前面是有冒号(:)的
- 伪类选择器一般的用法，都使用交集选择器：
如：选择器：伪类选择器{
样式：值;
} - 也可以直接用，如：
：伪类选择器{
样式:值;
} - 伪类选择器后可以接其他选择器的，可以参考下面的：hover例子
-
用于a标签
- link
- 未访问时的样式
- 用法：
a:link{
样式：值;
}
- visited
- 访问过后的样式
- 用法
a:visited{
样式：值;
}
- 注意：a标签的四种状态(link、visited、hover、active)的样式时，要遵循LVHA的顺序，不然会有样式覆盖，有些样式会不生效，没有效果
- link
-
其他
-
active
- 点击但不松开的样式（针对a标签）或获取焦点时（针对输入框）的样式
- 用法
a:active{
样式：值;
}
input:active{
样式：值;
}
-
hover
- 鼠标悬浮时的样式
- 用法
- ：hover后面不带东西时,选择器1选中的元素样式会改变：
选择器1：hover{
样式：值
} - ：hover后面带东西时,悬浮住选择器1，其他的选择器选择中的元素的样式改变：
选择器1：hover~兄弟选择器{
样式：值;
}
- ：hover后面不带东西时,选择器1选中的元素样式会改变：
-
focus
- 获取焦点时的样式
- 一般用在input标签：type=radio checkbox text
-
disabled
- 被禁用的元素的样式，一般用于带有disabled属性的元素
-
enabled
- 可以交互并且可用的元素的样式，一般用于不带有disabled属性并且可以用作交互的元素
-
checked
- 处于选中状态的元素
- 一般针对单选框与复选框
- 获取焦点与选中状态的区别:
- 就是单选框与复选框点击了选中状态，其一定获取了焦点
- input type="text"获取焦点时，其不是选中状态
-
not
- 选中不含有选择器的元素
- 用法：
选中选择器1选中的但不包含选择器2的元素：
选择器1：not(选择器2){
样式：值;
}
-
empty
- 选中空元素，即没有任何子元素或内容的标签,还有一些单标签（因为其绝对不含子标签与内容）
-
target
- a标签设置了锚点，锚到的元素的样式
-
-
用于描述位置的伪类选择器
- 选中的是该元素的父代元素的子元素(选中的是一组兄弟元素中的元素)
- 一般搭配后代或子代选择器使用
- first-child
- last-child
- nth-child()
- 从前往后数
- ()里面可以写n,n默认为>=0的整数
- 选前面x个,()里面可以写-n+x：nth-child(-n+x)
- 选后面x个,()里面可以写n+x：nth-child(n+x)
- nth-last-child()
- 从后往前数，规则如nth-child
- only-child
HTML：
- 选中的是该元素的父代元素的子元素(选中的是一组兄弟元素中的元素)
<ul>
<!-- <div>这是一个div</div> -->
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
<li>这是第6个li</li>
<li>这是第7个li</li>
<li>这是第8个li</li>
<!-- <i>asdfasdf</i> -->
</ul>
<ol>
<!-- <p>a</p> -->
<li>这是唯一一个li</li>
</ol>
对应的CSS:
/* 伪类选择器 */
/* :first-child 第一个子元素*/
ul>li:first-child{
color: lightcoral;
}
/* :last-child 最后一个子元素*/
ul>li:last-child{
color: lightgreen;
}
/* :nth-child( n【从0开始】 | odd | even ) 指定第n个元素*/
/* 选中第三个子元素 */
ul>li:nth-child(3){
color: orange;
}
/* 选中奇数个li */
/* ul>li:nth-child(odd){ */
ul>li:nth-child(2n-1){
font-weight: bolder;
letter-spacing: 3px;
}
/* 选中偶数个li */
/* ul>li:nth-child(even){ */
ul>li:nth-child(2n){
background-color: slategrey;
}
/* 前面3个li */
/* n = 0 1 2 3 4 5 6 7 8 ....... */
/* -n+3 = 3 2 1 (0 -1 -2 -3) */
ul>li:nth-child( -n+3 ){
font-style: italic;
}
/* :nth-last-child(n) 选中倒数第n个元素*/
ul>li:nth-last-child(2){
line-height: 60px;
}
/* 最后两个元素 */
/* n： 0 1 2 3 4 5 .... */
/* -n+2: 2 1 (0 -1) */
ul>li:nth-last-child(-n+2){
border-left: 10px solid red;
}
/* :only-child 选中唯一一个子元素*/
ol>li:only-child{
color: red;
}
- 选中的是该元素的父代元素的指定类型子元素(选中的是一组指定类型的兄弟元素中的元素)
- first-of-type
- last-of-type
- nth-of- type
- only-of-type
HTML：
<ul>
<div>div元素</div>
<div>div元素</div>
<div>div元素</div>
<div>div元素</div>
<div>div元素</div>
<li>第1个li</li>
<li>第2个li</li>
<li>第3个li</li>
<li>第4个li</li>
<li>第5个li</li>
<li>第6个li</li>
<li>第7个li</li>
<li>第8个li</li>
<i>斜体</i>
<i>斜体</i>
<i>斜体</i>
<span>啊的撒法发</span>
</ul>
对应的CSS：
/* :first-of-type 选中第一个指定类型（这里是li）的元素*/
ul>li:first-of-type{
color: red;
}
/* :last-of-type 选中最后一个指定类型（这里是li）的元素*/
ul>li:last-of-type{
color: blue;
}
/* :nth-of-type(n) 选中第n个指定类型(这里是li)的元素 */
ul>li:nth-of-type(1){
color: skyblue;
}
/* 选中倒数第3个指定类型(这里是li)的元素 */
ul>li:nth-last-of-type(3){
color: teal;
}
/* 选中子元素中, 唯一一个指定类型（span）的元素 */
ul>span:only-of-type{
background-color: red;
}
5. 伪元素选择器
-
伪元素选择器前面是有两个冒号(::)的
-
伪元素无法选中，要想给伪元素添加伪类，可以先伪类后伪元素
-
伪元素不可以设置宽高，他是行内块元素
-
before
- 元素前面的样式
- 一定要content属性,不然不起效果,content可以为空值：content:""
- 同span元素特性一致,即span有的css属性他也都有
- 他是选中元素的子元素，所有单标签没有before,因为单标签规定不具有子元素
-
after
- 元素后面的样式
- 一定要content属性,不然不起效果,content可以为空值：content:""
- 同span元素特性一致,即span有的css属性他也都有
- 他是选中元素的子元素，所有单标签没有after,因为单标签规定不具有子元素
-
selection
- 元素被I型光标（鼠标）选中时的样式，一般用于图片和文字标签
-
first-line
- 首行文字的样式
-
first-letter
- 首字的文字样式
6. 选择器的优先级
- !important关键字>内联样式(元素自身style设置属性) > id选择器>类选择器(属性选择器、伪类选择器) >元素选择器>通配符选择器>继承的样式>浏览器的默认样式
- 选择器层级越多，样式优先级越高
- 层级方面的优先级也受上面那条规则的影响，就是说，一个2层级的id选择器>一个3层级的类名选择器
- 选择器权重相同,遵循就近原则
- 有时候他祖先的优先级高，后代继承下去之后，后代优先级会降低
- 使用VS Code编辑器时，鼠标悬浮在CSS文件的选择器上可以显示优先级的权重
7. 基准参考点
- 把相同的域名放到头部，页面中可以忽略掉域名，直接写路径和文件名就行
- base规定的是页面上所有链接的默认URL，是所有！ 其包括src，href等所有URL。使用到的链接都会与base里的href链接拼接
图片和文字标签
-
first-line
- 首行文字的样式
-
first-letter
- 首字的文字样式
6. 选择器的优先级
- !important关键字>内联样式(元素自身style设置属性) > id选择器>类选择器(属性选择器、伪类选择器) >元素选择器>通配符选择器>继承的样式>浏览器的默认样式
- 选择器层级越多，样式优先级越高
- 层级方面的优先级也受上面那条规则的影响，就是说，一个2层级的id选择器>一个3层级的类名选择器
- 选择器权重相同,遵循就近原则
- 有时候他祖先的优先级高，后代继承下去之后，后代优先级会降低
- 使用VS Code编辑器时，鼠标悬浮在CSS文件的选择器上可以显示优先级的权重
7. 基准参考点
- 把相同的域名放到头部，页面中可以忽略掉域名，直接写路径和文件名就行
- base规定的是页面上所有链接的默认URL，是所有！ 其包括src，href等所有URL。使用到的链接都会与base里的href链接拼接
3155
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
