欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-05-17 14:54:05
[TOC] 1. CSS定义 层叠样式表 2. 创建CSS的三种方法 2.1. 元素内嵌（权重最高） 2.2. 文档内嵌 通过选择器的方法调用指定的元素并设置相关的CSS 2.3. 外部引用 定义一个style01.css文件 在主文件中应用style 大量HTML使用同一组CSS，就可以将这些样式 ......

目录

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. 动态伪类

根据条件改变匹配元素

/*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;
}

上一篇： 徐峥沈腾发型互换后，毫无违和感！

下一篇： JavaScript DOM常用方法和属性实例讲解

推荐阅读