HTML和CSS前端教程03-CSS选择器

目录

  • 1. CSS定义
  • 2. 创建CSS的三种方法
    • 2.1. 元素内嵌(权重最高)
    • 2.2. 文档内嵌
    • 2.3. 外部引用
  • 3. CSS层叠和继承
    • 3.1. 浏览器样式
    • 3.2. 样式表层叠
    • 3.3. 样式继承
  • 4. CSS选择器
    • 4.1. 选择器的总汇

      • (1) 基本选择器
      • (2) 复合选择器
      • (3) 伪元素选择器::
      • (4) 伪类选择器

1. CSS定义

层叠样式表

2. 创建CSS的三种方法

2.1. 元素内嵌(权重最高)

<p style="color:red;font-size:50px;">

2.2. 文档内嵌

通过选择器的方法调用指定的元素并设置相关的CSS

<style type="text/css">
    p{
        color:red;
        font-size: 30px;
    }
</style>

2.3. 外部引用

  • 定义一个style01.css文件
@charset "utf-8";

p{
    color:red;
    font-size: 30px;
}
  • 在主文件中应用style
<!--在header中-->
<link rel="stylesheet" type="text/css", href="style01.css">

大量HTML使用同一组CSS,就可以将这些样式保存到一个单独的.CSS文件中,通过link引用就可以了

3. CSS层叠和继承

  • 样式表层叠: 同一元素通过不同方式设置样式表所产生的样式重叠
  • 样式表继承: 某一个被嵌套的元素得到它父类元素样式
  • 浏览器样式: 这个元素在浏览器运行时附加的样式

3.1. 浏览器样式

<b>b元素有加粗元素</b>

<span style="font-weight:bold;">span元素没有加粗样式,但是可以设置</span>  

<b style="font-weight:normal;">b元素手动取出加粗元素</b>

3.2. 样式表层叠


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

<style type="text/css">
    p{
        color:red;
        font-size: 30px;
    }
</style>

<!--同时叠加(不是覆盖)三个元素-->
<p style = "font-size:50px; color:orange;">我要叠加三个样式</p>

优先级: 元素内嵌 <- 文档内嵌 <- 外部引用 <- 浏览器

可以在不同样式中添加!important关键字来强行设置优先级

color: green !important

3.3. 样式继承

<style type="text/css">
    p{
        color:red;
        font-size: 30px;
    }
</style>

<p>这是<b>HTML5</b></p>  

此时显示的是这是HTML5,我们只设置了p为红色,但是b也为红色了,因为b是在p内部

  • 如果一个元素没有设置父元素相关的样式,那么就会使用继承机制将父类样式继承下来
  • 样式继承只适用于元素的外观(文字,颜色,字体等),布局样式无法继承

4. CSS选择器

定位到你想要设计的样式元素来设计元素

4.1. 选择器的总汇

(1) 基本选择器

使用频率最高的一些选择器

1.通用选择器*

  • *表示通用选择器,匹配所有HTML元素包括<HTML><body>标签
  • 可以为所有元素匹配并配置样式,但是无法筛选不必要元素
  • 定义一个CSS

@charset "utf-8"

* {
  border: 1px solid red;
}
/*通用选择器可以匹配到html和body元素*/

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

<p>这是一个段落</p>

<p>这是一个加粗</p>
<span>这是一个什么都没有</span>

2.元素选择器p


@charset "utf-8"

p {
  border: 1px solid red;
}
/*通用选择器可以匹配到html和body元素*/

3.ID选择器#adc

ID是唯一的,不可重复使用


@charset "utf-8"

#abc {
  border: 1px solid red;
}

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

<p id="abc">这是一个段落</p>

<p>这是一个加粗</p>
<span>这是一个什么都没有</span>

4. 类选择器.


@charset "utf-8"

.abc {
  border: 1px solid red;
}

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

<p class="abc">这是一个段落</p>

<p class="abc">这是一个加粗</p>
<span>这是一个什么都没有</span>

也可以限定元素

@charset "utf-8"

p.abc {
  border: 1px solid red;
}
/*只能适用于段落*/

也可以使用多个class

@charset "utf-8"

.abc {
  border: 1px solid red;
}
.def {
  font-size: 30px;
}
<p class="abc def">这是一个加粗</p>

5. 属性选择器[...]

@charset "utf-8"

[href]{
  color: red;
}
<a href="http://www.baidu.com">这是一个百度</a>

也可以设置相关的属性值

@charset "utf-8"

[type="password"]{
  border: 1px solid red;
}
<input type="password">

通过正则表达式来设置匹配

@charset "utf-8"

[href^="http"]{
  color: orange;
}
/*只能开头是http才能匹配*/
<a href="http://www.baidu.com">百度</a>
<a href = "javascript:void(0)">好搜</a>

通过精确匹配

@charset "utf-8"

[href*="baidu"]{
  color: orange;
}
/*只能包含baidu才能匹配*/

(2) 复合选择器

将不同选择器进行组合形成的新的特定匹配

1.分组选择器

多个选择器逗号分隔,同时设置一组样式

@charset "utf-8"

p,b,i,span {
  color: orange;
}

#abc,.abc,i,span {
  color: orange;
}

2.后代选择器

选择<p>元素内部所有的<b>元素,不在乎<b>的层次深度

@charset "utf-8"

p b {
  color: orange;
}
<p>这是一个HTML5<b>教程</b></p>

效果为: 这是一个HTML5教程

3. 子选择器

与后代选择器类似,但是只能运用于儿子,孙子就不行了

```css

@charset "utf-8"

p>b {

color: orange;

}

```

4.相邻兄弟选择器

匹配第一个元素相邻的第二个元素

@charset "utf-8"

p+b {
  color: orange;
}

5.普通兄弟

类似,只是靠的不是特别近

@charset "utf-8"

p~b {
  color: orange;
}

(3) 伪元素选择器::

1. 块级首行::first-line

  • 只适用于<p>、<div>等的首行文本选定
:: first-line {
  color: orange;
}

2. 块级首字母::first-letter

p:: first-letter {
  color: orange;
}

3. 文本前插入::before

  • 在文本前插入内容
a:: before {
  content: ‘点击-‘;
}

3. 文本后插入::after

(4) 伪类选择器

1. 结构性伪类:

  • 可以根据元素在文档中的位置选择元素
1.1. 根元素选择器
:root {
  border: 1px solid red;
}
1.2. 子类选择器
ul>li:first-child {
  color: red;
}
/*父类的第一个儿子*/
ul>li:last-child {
  color: red;
}
/*父类的最后一个儿子*/
ul>li:only-child {
  color: red;
}
/*选择只有一个子元素的那个元素*/
dive>p: only-of-type {
  color: red;
}
/*选择只有一个指定类型的子元素的那个元素*/
1.3.nth-child(n)系列
ul>li:nth-child(2) {
  color: red;
}
/*选择第2个*/
ul>li:nth-last-child(2) {
  color: red;
}
/*选择倒数第2个*/
ul>li:nth-of-type(2) {
  color: red;
}
/*特定类型第2个*/
ul>li:nth-last-of-type(2) {
  color: red;
}
/*特定类型倒数第2个*/

2.UI伪类

用于匹配表单的数据

enabled
input:enabled {
  border: 1px solid red;
}
/*选择表单中的enable元素*/
<form>
  <input tupe="text" disabled>
  <input tupe="text">

</form>
checked
input:checked {
  display: none;
}
default
input:default {
  display: none;
}
valid和not valida
input:valid {
  border: 1px solid green;
}

input:invalid {
  border: 1px solid red;
}
required
input:required {
  border: 1px solid red;
}

3. 动态伪类

根据条件改变匹配元素

link-超链接
/*Url没有访问的颜色*/
a:link {
  color: red;
}
/*Url被点击的颜色*/
a:visited {
  color: blue;
}
/*鼠标悬停的颜色*/
a:hover {
  color: orange;
}
/*鼠标长按的颜色*/
a:active {
  color: green;
}
<a href="baidu.com">百度</a>
focus-文本框获取的
/*鼠标获取到文本框的颜色*/
input:focus {
  border: 1px solid green;
}

其他伪类选择器

not否定选择器
/*选择百度除外的URL*/
a:not([href*="baidu"]) {
    color: green;
}
empty
/*空元素隐藏*/
:empty {
    display: none;
}
target-定位到锚点
/*空元素隐藏*/
b:target {
    color: red;
}

原文地址:https://www.cnblogs.com/haochen273/p/10305818.html

时间: 2024-11-05 17:19:36

HTML和CSS前端教程03-CSS选择器的相关文章

CSS基础教程——纯CSS开发的气泡式提示框

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:CSS基础教程 —— 纯CSS开发的气泡式提示框 作为前端开发人员,我们都熟悉使用CSS来生成页面上丰富的样式,对于边框border属性来说,也是我们最熟悉不过的CSS属性,今天我们这里将介绍如何使用纯CSS来生成一个气泡式样的提示框,希望大家喜欢! 在这篇文章中我们将使用:after伪标签来生成提示框的指示箭头. 首先我们定义提示框相关属性,我们添加了box阴影和文字阴影效果,这样让提示框更加漂亮: /* bubble */.tip

web前端教程:CSS 布局十八般武艺都在这里了

CSS布局 布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中.垂直居中方法,以及单列布局.多列布局的多种实现方式(包括传统的盒模型布局和比较新的flex布局实现),希望能给需要的小伙伴带来一些帮助. 目录 1.常用居中方法:水平居中,垂直居中, 2.单列布局 3.二列&三列布局:float+margin,position+margin,圣杯布局(float+负margin),双飞翼布局(float+负margin),flex布局 如果你想学习交流html5css3

前端教程(9)css入门教程-css属性设置

一 字体属性 1.font-weight:文字粗细 取值 描述 normal 默认值,标准粗细 bord 粗体 border 更粗 lighter 更细 100~900 设置具体粗细,400等同于normal,而700等同于bold inherit 继承父元素字体的粗细值 2.font-style:文字风格 normal 正常,默认就是正常的 italic 倾斜 3.font-size:文字大小 fs:一般是12px或13px或14px 注意: 1.通过font-size设置文字大小一定要带单位

前端教程(10)css入门教程-css网页布局

一 网页布局方式 #1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如word,nodpad++等等 而网页的布局方式指的就是浏览器这款工具是如何对网页中的元素进行排版的 #2.网页布局/排版的三种方式 2.1.标准流 2.2.浮动流 2.3.定位流 二 标准流 标准流的排版方式,又称为:文档流/普通流,所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列. # 1 浏览器默认的排版方式就是标准流排版方式 # 2 在CSS中将

HTML和CSS前端教程03-CSS文本样式

目录 1.CSS颜色-建议就用十六进制 2.CSS长度的度量单位-建议就用px 3.CSS文本样式 3.1. 字体属性 3.1. 文本样式 1.CSS颜色-建议就用十六进制 p{ color: #ff0000 } 2.CSS长度的度量单位-建议就用px p{ margin: 0; padding: 0; font-size: 20px; height: 50px; } 3.CSS文本样式 字体的大小,样式以及方位 3.1. 字体属性 属性名 说明 例子 font-size 字体大小 font-s

HTML和CSS前端教程05-CSS盒模型

目录 1. CSS盒模型 1.1 元素的尺寸 1.2. 元素内边距 padding 1.3. 元素外边距 margin 1.4. 处理溢出overflow 1.5. 元素的可见性Visibility 2. CSS元素的盒类型 2.1. 块级元素(区块) 2.2. 行内元素 2.3. 行内-块元素 2.4. 盒类型元素转换dispaly 3. CSS盒元素的浮动float 1. CSS盒模型 元素的尺寸 1.1 元素的尺寸 属性 值 说明 width auto.长度值或百分比 元素的宽度 heig

web前端篇:CSS使用,样式表特征,选择器

目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 CSS :Cascading Style Sheet 层叠样式表 作用 :修饰和美化页面元素,实现网页排版布局 2.CSS使用 1行内样式/内联样式 特点 :在具体的标签中使用style属性,引入CSS样式代码 语法: CSS 样式声明 / 语句: 对当前元素添加样式 语法:CSS 属

好程序员web前端教程分享异步加载CSS的一些方法

好程序员web前端教程分享异步加载CSS的一些方法,在我们写页面的时候,我们做最主要的任务就是提高页面的性能和弹性加载速度,以不会延迟页面的呈现的形式来加载CSS.这是因为在默认情况下, - 浏览器会同步加载外部的CSS - 在下载和解析CSS时会影响所有页面呈现 这两种情况都会导致潜在的延迟. 当然,这也是在开始渲染页面之前,应该至少加载网站的CSS的一部分,并且为了立即将该初始CSS添加到浏览器,我们建议内联css.对于整体数量较少的网站,仅此一项就足够了,但如果CSS很大(例如,大于15到

前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器

前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介 ???叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化 ????特点: ??????1.丰富的样式定义 ,易于使用和修改,多页面应用,页面压缩,层叠 ??????2.使数据和