CSS选择器

贺兰猪

于 2021-12-27 16:20:24 发布

阅读量190

点赞数

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

本文链接：https://blog.csdn.net/u013773608/article/details/122026156

版权

前端开发专栏收录该内容

17 篇文章 0 订阅

订阅专栏

三种插入样式表的方法：

行内 CSS
内部 CSS
外部 CSS

行内 CSS：也称内联样式，可用于为单个元素应用唯一的样式，将 style 属性添加到相关元素。如

<h3 style = "color:red;text-align:left;">This is a head tag</h1>

内部CSS：内部样式是在在 HTML 页面的 <head> 部分内的 <style> 元素中进行定义。如

<head>
<style>
body {
  background-color: white;
}

h3 {
  color: black;
  margin-left: 20px;
} 
</style>
</head>

外部CSS：通过使用外部样式表，可以只需修改一个文件就达到修改多处页面样式的目的。在 head 部分的 <link> 元素内包含对外部样式表文件的引用。如

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

当为某个元素指定了多个样式时，页面中的样式将按照以下顺序层叠：

行内样式（在 HTML 元素中）【最高优先级，将覆盖2、3】
外部和内部样式表（在 head 部分）
浏览器默认样式

CSS选择器：

元素选择器
类选择器
id选择器
属性选择器
后代选择器
子元素选择器
相邻兄弟选择器
通配符选择器
伪类选择器

CSS选择器的作用是找到特定的html页面元素。

元素选择器

也称类型选择器，通常是某个 HTML 元素，比如 p、h1、em、a等，甚至可以是 html 本身

html {color:white;}
h1 {color:red;}

类选择器

使用类选择器之前，要为相应元素添加class属性。

<h1 class="important">
This heading is very important.
</h1>

<p class="important">
This paragraph is very important.
</p>

使用：

*.important {color:red;}（*是通配符，可以省略）

结合元素选择器：如果希望只有段落显示为红色文本：p.important {color:red;}

多类选择器：单词顺序不重要

<p class="color size">
This is a special paragraph.
</p>

.color {color:pink;}
.size {font-size:20px;}
或者
.color.size {color:pink;font-size:20px;}

ID选择器

使用ID选择器之前，要为相应元素添加id属性。

<p id="introduce">This is a paragraph of introduction.</p>

使用：

*#introduce {font-weight:bold;}（可以省略通配符）或者 #introduce {font-weight:bold;}

使用类选择器还是 ID 选择器？

在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次（因为id是唯一的），而类选择器可以使用多次。
不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。

属性选择器

根据元素的属性及属性值来选择元素。

又想偷懒了，贴个链接=。= CSS 属性选择器详解

后代选择器

可以选择作为某元素后代的元素。两元素间的层次间隔不重要，就像你是你太祖爷爷的后代，无需考虑你们之间隔了多少代 =。=

使用：对 h1 元素中的 em 元素应用样式如下。

h1 em {color:pink;}

子元素选择器

与后代选择器相比，就只能选择作为某元素子元素的元素。就像你爷爷的儿砸是你爸，你只是你爷爷的后代并不是儿砸 =。=

使用：选择作为 h1 元素子元素的 em 元素，比后代选择器写法多了个 >，空格无影响。

h1 > em {color:pink;}

通配符选择器

就是选择所有标签。上面提到过*是通配符，那么通配符选择器的使用如下

*{
    margin:0;//定义外边距
    padding:0;//定义内边距
}

通配符选择器会匹配页面的所有元素，从而导致页面响应速度慢，不建议随便使用。

伪类选择器

为某些选择器添加特定的效果。比如说链接伪类选择器。

a:link /* 未访问的链接 */
a:visited /* 已访问的链接 */
a:hover /* 当鼠标悬停在链接上 */
a:active /* 被选择的链接(点击鼠标未松开时) */

顺序尽量不要颠倒，否则容易引起错误。实际开发中很少写全四个。

贺兰猪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器

三种插入样式表的方法：行内 CSS 内部 CSS 外部 CSS行内 CSS：也称内联样式，可用于为单个元素应用唯一的样式，将 style 属性添加到相关元素。如<h3 style = "color:red;text-align:left;">This is a head tag</h1>内部CSS：内部样式是在在 HTML 页面的 <head> 部分内的 <style> 元素中进行定义。如<head><style
复制链接

扫一扫