CSS学习笔记-CSS选择符\CSS伪类\CSS伪元素\CSS特指度

Moplit

于 2021-05-08 10:48:44 发布

阅读量238

点赞数

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

本文链接：https://blog.csdn.net/weixin_45118086/article/details/116520055

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Chapter2 CSS工作原理

CSS注释语法：

<style>
	/*注释*/
</style>

2.1 剖析CSS规则

规则实际就是一条完整的CSS指令，声明了要修改的元素和要应用给该元素的样式

比如以下规则把文本设成红色

p {color:red;}

为文档添加样式的三种方法

1、行内样式

<p style="color:red;font-size:12px">blabla</p>

行内样式只影响它所在的标签，会覆盖嵌入样式与链接样式

2、嵌入样式
<head>
 <style>
     h1 {font-size:12px;}
     p {color:red;}
 </style>
</head>
作用范围为当前页面，覆盖外部样式表

3、链接样式
<link href="style.css" rel="stylesheet" type="text/css" />
4、在样式表中引入其他样式表采用以下方法

@import url(css/style.css)

需要在所有样式之前才会被加载

CSS命名规则

在这里插入图片描述

基本结构如上图。扩展规则如下：

多个声明包含在一个规则里

p {color:red; font-size:12px; font-weight:bold;}

多个选择符组合

h1 h2 h3 {color:blue; font-size:12px;}

多条规则应用给一个选择符

h3 {color:red;}
h3 {font-size:12px;}

选择符包含三种：上下文选择符、ID和类选择符、属性选择符

2.2 上下文选择符

解决基于位置变换某个标签的样式的问题

格式：

标签1 标签2 {声明}

标签2是选择的目标，标签1是标签2的祖先元素

严格来说，上下文选择符为后代组合式选择符

本节所用代码:

<!DOCTYPE html>
<hmtl>
    <head>
        <meta charset="utf-8">
        <title>上下文选择符</title>
    </head>
    <body>
        <article>
            <h1>一级标题    <em>我歪了</em>    ops</h1>
            <p>段落1blabla    <em>我也歪了</em>    oops</p>
        </article>
        <aside>
            <p>段落2blabla    <em>又双叒叕歪了</em>    打破复读</p>
        </aside>
    </body>
</hmtl>

摘自MDN：

font-weight CSS 属性指定了字体的粗细程度。一些字体只提供 normal 和 bold 两种值。

不同写法的上下文选择符的作用：

article p {font-size:bold;}/*值用article的子元素中的p才会应用该规则*/
em {color:green;}/*本页面所有的em元素内容都会被渲染为绿色*/
/*支持多级选择*/
article p em {color:green;}/*选中的em必须有一个祖先是p，并且还要有一个祖先article*/

2.3 特殊的上下文选择符

上文所述的上下文选择符是以某个祖先标签作为上下文，有时候可能需要更为具体的上下文，这就需要使用特殊的上下文选择符。

2.3.1 子选择符

标签1 > 标签2 标签1必须是标签2的父元素。

本节所用代码

<section>
            <h2>An H2 Heading</h2>
            <p>This is paragraph 1</p>
            <p>Paragraph2 has  <a href="#">a link </a>  in it.</p>
            <a href="#">Link</a>
</section>
section > h2 {font-style:italic;}

font-style CSS 属性允许你选择 font-family 字体下的 italic 或 oblique 样式。

italic:斜体

2.3.2 紧邻同胞选择符

标签1+标签2

标签2必须紧跟在其同胞标签1的后面

h2+p {font-variant:small-caps;}

font-variant 属性是font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, font-variant-east-asian (en-US)等属性的简写。你也可以使用简写 font 设定font-variant在CSS Level 2 (Revision 1)中的值（即normal 或 small-caps）

2.3.3 一般同胞选择符

标签1~标签2

h2~a {color:red;}

2.3.4 通用选择符

它匹配任何元素

* {color:green;}

在这里插入图片描述

color属性设置的是前景色，即影响文本也影响边框(变宽后面会讲解)，由于大多数时间边框都是隐藏的，因此color常用来设置文本颜色。

p * {color:green}

把p中的所有内容渲染为绿色

section * a {color:green}

section的孙子元素(非子元素)中的a标签内容会被渲染为绿色。

2.4 ID和类选择符

选择元素的另一个手段，通过它们，可以不考虑文档的层次结构而选择元素。

可以给id和class属性设定任何值，只要不以数字或特殊符号开头就好

2.4.1 类属性

类属性就是HTML元素的class属性

示例用法：

<h1 class="specialtext">
    This is a heading with the <span> same class</span>
    as the second paragraph.
</h1>
<p>
    This tag has no class.
</p>
<p class="specialtext">
    blabla <span>wula!</span>.
</p>

<span> 标签被用来组合文档中的行内元素。如果不应用样式，则在浏览器中不会有视觉上的差异

1.类选择符

.类名

.specialtext {fontstyle:italic;}

注意，span标签会继承h1的样式。

2.标签带类选择符

p.specialtext {color:red};

p.specialtext span {color:blue;}

3.多类选择符

可以给元素添加多个类

<p class="specialtext featured">
    Here the span tag <span>may or may nit styled.</span>
</p>

即HTML的class属性可以有多个空格分隔的值

选择同时存在这两个类名的元素：

.specaltext.featured {font-size:%120;}

没有空格，有空格就变成上下文选择符了

2.4.2 ID属性

ID与类的写法类似，其选择符为**#**

示例:

<p id="specialtext">
    This is the special text.
</p>

#specialtext {CSS样式声明}
p#specialtext {CSS样式声明}

此外，ID还可以用于页内导航

<a href="#id">Biography</a>
<a href="#">返回顶部</a>
<!--如果没有#，浏览器会加载bio目录下的默认页面-->

注意同一页面内的ID值不能相同

2.4.3 什么时候用ID 什么时候用class

ID与class应当分别用于不同的场景

1.什么时候使用ID

ID的用途是在页面中唯一的标识一个元素，因此，同一页面中的每一个ID的属性都必须是一个独一无二的值，此外，也可以使用ID把JS和某个标签关联起来。

ID表示的是页面中唯一的一个HTML元素，可以结合上下文选择符来进行使用。

2.什么时候使用类

类的目的是为了标识一组具有相同特征的元素。

2.5 属性选择符

基于HTML标签的属性来选择元素

2.5.1 属性名选择符

标签名[属性名]

img[title] {border:2px solid blue;}

选中带title属性的img标签

img的title属性用于说明，鼠标悬停在图片上会显示title的值

2.5.2 属性值选择符

标签名[属性名="属性值"]

img[title="red flower"] {border:4px solid green;}

2.6 伪类

分为两种：

UI伪类在HTML元素处于某个状态时为该元素应用CSS样式
结构化伪类在标记中存在某种结构上的关系时为相应元素应用CSS样式

2.6.1 UI伪类

最常使用UI伪类的元素时链接标签a，可以在用户鼠标悬停时改变文本颜色等

1.链接伪类

针对链接的伪类共四个，对应链接的四种状态。

链接的四种状态：

Link 链接等待用户点击
Visited 链接已经被用户点击
Hover 鼠标悬停在链接上
Active 链接正在被点击

对应的伪类选择符：

a:link {color:black;}

a:visited {color:gray;}

a:hover {text-decoration:none;}//不显示下划线

a:active {color:red;}

<!DOCTYPE html>
<hmtl>
    <head>
        <meta charset="utf-8">
        <title>示例模板</title>
        <style>
            a:link {color:blue;}  
            a:visited {color:green;}
            a:hover {text-decoration:none;}
            a:active {color:red;}
        </style>
    </head>
    <body>
        <a href="#">链接</a>
    </body>
</hmtl>

由于此四个伪类的特指度不同，因此顺序不可更改

一个*😗表示伪类，两个代表CSS3新增伪元素

2. :focus伪类

e:focus

e表示元素，如p、h1等

input:focus {border:1px solid blue;}

在光标位于input字段的时候，为该字段添加一个蓝色边框。

3. ：target伪类

e:target

如果用户点击一个指向页面中其他元素的链接，那么这个元素就是target

#more_info:target {black:green;}

more_info作为目标时，渲染为绿色

2.6.2 结构化伪类

根据标记的结构应用样式

1. :first-child :last-child

e:first-child

e:last-child

字面意思，第一个孩子，最后一个孩子

2. :nth-child

e:nth-child(n)

第n个孩子

2.7 伪元素

文档中若有实无的元素

1. ::first-letter

e::first-letter

p::first-letter {font-size:%300;}

内容的首字母

2. ::first-line

e::first-line

首行

3. ::before ::after

e::before

e::after

在特定元素前面或后面添加特殊内容

<p class="age">25</p>
p.age::before {content:"Age: "}
p.age::after {content:" years old."}
Age: 25 years old.

搜索引擎不会检测伪元素

2.8 继承

CSS属性是会集成的，以后细说

2.9 层叠

层叠样式表中的层叠，是一种样式在文档层次中逐层叠加的过程，目的是让浏览器面对某个标签特定属性值得多个来源时，确定应该使用哪一个。

层叠是CSS得核心机制。

2.9.1 样式来源

样式表、嵌入、行内。

层叠得顺序：

浏览器默认演示表
用户样式表
链接样式表
嵌入样式
行内样式

行内样式最后重叠，在最上层进行显示。

2.9.2 层叠规则

找到应用给每个元素和属性的所有声明
按照顺序和权重排序

浏览器依次检查5个来源，设定匹配属性。使用!important来加重权重

p {color:green !important;}

按特指度排序

2.9.3 特指度的计算

每个选择符按如下公式计算：

I–C--E

选择符中有一个ID，在I上加1
有一个类，在C加1
有一个标签名，在E加1

最后得到一个三位数，比较即可

总结：

1：ID胜过类
2：行内胜过嵌入
1胜过2
设定样式胜过继承样式

Moplit

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记-CSS选择符\CSS伪类\CSS伪元素\CSS特指度

Chapter2 CSS工作原理CSS注释语法：<style> /*注释*/</style>2.1 剖析CSS规则规则实际就是一条完整的CSS指令，声明了要修改的元素和要应用给该元素的样式比如以下规则把文本设成红色p {color:red;}为文档添加样式的三种方法1、行内样式<p style="color:red;font-size:12px">blabla</p>行内样式只影响它所在的标签，会覆盖嵌入样式与链接样式2、嵌入样式
复制链接

扫一扫