文章目录

一、引入方式
- 1. 行内样式/内联样式
- 2. 内部样式
- 3. 外部样式
二、选择器
- 1. 基础选择器
- - 1.1 标签选择器
  - 1.2 类选择器
  - - 1.2.1 基本语法：
  - 1.3 id选择器
  - 1.4 通配符选择器
  - 1.5 CSS选择器优先级
  - 1.5 基础选择器小结
- 2. 复合选择器(了解)
- - 2.1 后代选择器 / 包含选择器
  - 2.2 子选择器
  - 2.3 并集选择器
  - 2.4 伪类选择器
  - - 2.4.1 链接伪类选择器
    - - 2.4.2 focuse伪类选择器
  - 2.5 符合选择器小结

一、引入方式

1. 行内样式/内联样式

直接把样式以style属性的方式，写到元素内部；

<p style="color:green">这是一个行内样式例子</p>

2. 内部样式

通过style标签将CSS代码嵌入到HTML内部;

这种方法不太常见，仅在初学时方便使用~

<style>p {color: blue;font-size: 30px;}
</style>

3. 外部样式

将CSS代码单独放到一个文件里xxx.css，在HTML中使用link标签将css文件引入;可以实现样式与页面的分离，是实际开发中最常用的引入方式；

<head><linkrel="stylesheet"type="text/css"href="xxx.css"/></head>

二、选择器

选择器功能：选中页面中指定的标签元素；先选中元素，才能设置元素的相关属性；

1. 基础选择器

1.1 标签选择器

标签选择器能够将同一类标签全部选择查出来，但不能差异化选择；

<style>p{color:red;}div{color:green;}
</style>
<p>第一行</p>
<p>第一行</p>
<p>第一行</p>
<div>case2</div>
<div>case2</div>
<div>case2</div>

页面效果如下所示，标签选择器将所有的p标签全部设置为蓝色，选中所有的div标签设置为绿色；但如果我想要三个p标签呈现不同的颜色，标签选择器就无法实现了，因为它不能差异化选择，也就是说，只要选中，就是全部的该标签。

1.2 类选择器

既可以选中一类元素，也可以进行差异化设置；是使用的最多的一种选择器~

1.2.1 基本语法：

标签使用class属性来调用
类名用.开头

<style>.blue{color:blue;}
</style><div class = "blue">张三</div><div>张三</div>

页面效果如下所示，类选择器设置了字体颜色为蓝色的样式，下面的两行代码都是div标签，但是一个使用class属性来调用了该类选择器，另一个是默认样式，结果只有调用了类选择器的div文字显示蓝色，而两一个div显示默认黑色。由此我们可以发现，类选择器相比于标签选择器，最大的功能区别是可以差异化选择标签。

3. 一个类可以被多个标签使用，一个标签也能使用多个类；

<!--一个标签可以使用多个类--><style>.one{color:red;}.two{background-color: green;}</style><div class = "one two">张三</div>

一个class标签额可以使用多个类one，two，生成的文字效果同时具备良好着呢的样式；

1.3 id选择器

和类选择器类似~ 但是id选择器与类选择器最大的区别在于 id选择器只能使用一次。同一个类名可以应用于页面上任意多个元素，但一个ID只能应用于页面上的一个元素。

<style>#blue{color:blue;}</style>
<div id="blue">哈哈哈</div>

1.4 通配符选择器

使用*的定义，选取所有的标签；常用来清除浏览器的默认样式；

1.5 CSS选择器优先级

原则：选择器能选择的元素越少，其优先级就越高；
优先级排序：id选择器 > 类选择器 > 标签选择器；

1.5 基础选择器小结

选择器	作用	注意事项	标签使用属性
标签选择器	选出所有相同的标签	无法差异化选择	/
类选择器	选出一个或多个标签	可以差异化选择，最常用	class
id选择器	能选出一个标签	同一个 id 在一个 HTML 中只能出现一次	#
通配符选择器	选择所有标签	常用于清除浏览器默认样式

2. 复合选择器(了解)

2.1 后代选择器 / 包含选择器

选中一个元素里面的子元素或者孙子元素(后代)；

元素1 元素2 {样式声明}

2.2 子选择器

与后代选择器相似，但是只选择子标签，不选择后代标签；

元素1>元素2 { 样式声明 }

2.3 并集选择器

同时针对多个元素，设置相同的样式；

元素1, 元素2 { 样式声明 }

可以同时选择多组标签；

2.4 伪类选择器

用于选中元素的各种状态；

2.4.1 链接伪类选择器

a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起）
以上四种是链接标签时对各种状态设置样式的方法；比较常见的时a:hover 鼠标悬停时的样式设置；

2.4.2 focuse伪类选择器

选取获取焦点的input元素，效果如下所示，刷新页面后被选中的文本框的背景就会变成蓝色；

<style>input:focus {background-color: lightblue;}</style>请输入姓名:<input type="text"><br>请输入学号:<input type="text"><br>

2.5 符合选择器小结

选择器	作用	注意事项
后代选择器	选择后代	可以是孙子元素
子选择器	选择子元素	只能选择亲儿子，不能选孙子
并集选择器	选择相同样式的元素	代码重用++
链接伪类选择器	选择不同状态的链接	/
:focus伪类选择器	选择被选中的元素	/

【CSS】常见选择器用法相关推荐

css class选择器用法,CSS类选择器用法简明介绍
你对CSS类选择器的使用是否熟悉,这里向大家描述一下,在CSS中,CSS类选择器通常以一个点号显示,需要注意一点的就是不要使用数字起始类名!因为它无法在Mozilla或Firefox中起作用. CSS ...
CSS常见选择器的用法
目录 1.CSS引入方式 1.内部样式 2.内联样式 3.外部样式 2.选择器 1.标签选择器 2.类选择器 3. id选择器 4.通配符选择器 5.后代选择器 6.子选择器 7.并集选择器 8.伪类 ...
html css三类选择器,css三类选择器用法引用
css(层叠样式表): css用法:选择符{样式属性:取值;...} css选择器的分类: ①:标签选择器,such as:p{attribute:value;},p为标签选择器的name,该页面中所 ...
css常用选择器：相邻兄弟选择器（+）、子选择器（＞）、兄弟选择器（~）、属性选择器等用法
前言:我们在码代码的时候,经常会遇到需要给第一个或者最后一个元素添加或删除样式,还有一些比较特殊的是选取第几个元素添加或删除样式,下面记录css选择器中常见的选择器:相邻兄弟选择器(+).子选择器(& ...
html兄弟选择器怎么用,CSS的相邻兄弟选择器用法示例讲解
对于有相同父元素的相邻HTML元素查找便可以使用CSS的相邻兄弟选择器,这里我们就来看一下CSS的相邻兄弟选择器用法简单讲解: 可选择紧接在另一个元素后的元素,且二者有相同的父级元素下面代码中,it ...
Python全栈（九）Web前端基础之3.CSS常见样式和选择器
文章目录一.CSS常见样式 1.常见文本样式 2.列表常见样式 3.背景样式 4.浮动样式二.CSS常用选择器 1.CSS元素选择器介绍 2.元素选择器 3.id选择器 4.类选择器 5.通配选择 ...
html5类选择器用什么表示,HTML_揭秘常用的五类CSS选择器用法，有许多新手朋友不知道在什么 - phpStudy...
揭秘常用的五类CSS选择器用法有许多新手朋友不知道在什么情况下运用什么样的CSS选择器,针对新手朋友,对CSS选择器作一些简单的说明,这里重点介绍一下最常用的五类CSS选择器的使用. 本文向大家描述 ...
CSS节选——选择器
CSS,cascading style sheet,层叠样式表,请留意层叠概念. css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类--:hover,:link,:active,:targ ...
CSS基础（emmet 语法,CSS 复合选择器, 布局认知,背景样式）
CSS基础 1. emmet 语法 -- 开发效率 1.1 emmet 语法生成 html 标签 emmet 的特点和作用是什么? 通过简写提高编码效率. emmet 生成 HTML 结构语法序号 ...

【CSS】常见选择器用法