css基础学习总结(一)

晚睡早起₍˄·͈༝·͈˄*₎◞ ̑̑

于 2024-08-27 19:08:49 发布

阅读量342

点赞数 6

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

本文链接：https://blog.csdn.net/qq_73340809/article/details/141610380

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

一. 选择器

一. 选择器

1. 标签选择器

选择器	例子	描述
element	p/div/span	选择所有含有指定标签的元素

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       div {
           color: red;
       }
       span {
           color: blue;
       }
       p {
           color: green;
       }
   </style>
</head>
<body>
   <div>Hello</div>
   <span>World</span>
   <p>你好</p>
</body>
</html>

2. 类选择器

选择器	例子	描述
.class	.info	选择 class=“info” 的所有元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .info{
            color: pink;
        }
    </style>
</head>
<body>
    <div class="info">Hello</div>
    <div class="a">World</div>
    <div class="b">你好</div>
</body>
</html>

3. ID选择器

选择器	例子	描述
#id	#Oh	选择 id=“Oh” 的元素

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       #Oh{
           color: red;
       }
   </style>
</head>
<body>
   <div class="info" id="o1">Hello</div>
   <div class="a" id="Oh">World</div>
   <div class="b" id="o2">你好</div>
</body>
</html>

4. 分组选择器

选择器	例子	描述
element,element	div, p	选择所有div元素和所有p元素

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       div,p {
           color: red;
       }
   </style>
</head>
<body>
   <div class="info" id="o1">Hello</div>
   <p class="a" id="Oh">World</p>
   <span class="b" id="o2">你好</span>
</body>
</html>

5. 派生与子元素选择器

选择器	例子	描述
element element.class	ul li.name	选择所有具备当前祖辈容器为li,且li的祖辈容器必须为ul,且需要引入name类

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       ul li.name {
           color: red;
       }
   </style>
</head>
<body>
   <ul>
       <li>Hello</li>
       <li>World</li>
       <li class="name">你好</li>
   </ul>
</body>
</html>

选择器	例子	描述
element>element	ul > li	选择父元素是 ul 的所有 li 元素

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       ul > li {
           color: red;
       }
   </style>
</head>
<body>
   <ul>
       <li>Hello</li>
       <ol>
           <li>World</li>
       </ol>
       <li class="name">你好</li>
   </ul>
</body>
</html>

6. 属性选择器

选择器	例子	描述
[attribute]	[target]	选择带有 target 属性的所有元素

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       [target] {
           color: red;
       }
   </style>
</head>
<body>
   <ul>
       <li>Hello</li>
       <ol>
           <li target="世界">World</li>
       </ol>
       <li class="name">你好</li>
   </ul>
</body>
</html>

7. 伪类选择器

选择器	例子	描述
:active	a:active	选择活动链接。
:checked	input:checked	选择每个被选中的 input 元素。
:default	input:default	选择默认的 input 元素。
:disabled	input:disabled	选择每个被禁用的 input 元素。
:empty	p:empty	选择没有子元素的每个 p 元素（包括文本节点）。
:enabled	input:enabled	选择每个启用的 input 元素。
:first-child	p:first-child	选择属于父元素的第一个子元素的每个 p 元素。
:focus	input:focus	选择获得焦点的 input 元素。
:fullscreen	:fullscreen	选择处于全屏模式的元素。
:hover	a:hover	选择鼠标指针位于其上的链接。
:in-range	input:in-range	选择其值在指定范围内的 input 元素。
:indeterminate	input:indeterminate	选择处于不确定状态的 input 元素。
:invalid	input:invalid	选择具有无效值的所有 input 元素。
:lang(language)	p:lang(it)	选择 lang 属性等于 “it”（意大利）的每个 p 元素。
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 p 元素。
:visited	a:visited	选择所有已访问的链接。
:first-of-type	p:first-of-type	选择属于其父元素的首个 p 元素的每个 p 元素。

8. 伪对象选择器

选择器	例子	描述
::after	p::after	在每个p的内容之后插入内容。
::before	p::before	在每个 p 的内容之前插入内容。
::first-letter	p::first-letter	选择每个 p 元素的首字母。
::first-line	p::first-line	选择每个 p 元素的首行。

9. 选择器的优先级别

行内样式（style=“…”）>ID 选择器(#box{…})>类选择器(.con{…})>标签选择器(dic{…})>通用选择器(*{…})

css优先级的 6大分类

通常可以将css的优先级由高到低分为6组：

第一优先级：无条件优先的属性只需要在属性后面使用！important。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。
第二优先级：在html中给元素标签加style，即内联样式。该方法会造成css难以管理，所以不推荐使用。
第三优先级：由一个或多个id选择器来定义。例如，#id{margin:0;}会覆盖.classname{margin:3pxl}
第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;}
第五优先级：由一个或多个类型选择器定义。如div{marigin:6px;}覆盖*{margin:10px；}
第六优先级：通配选择器，如*{marigin:6px;}

晚睡早起₍˄·͈༝·͈˄*₎◞ ̑̑

关注

6
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
0
评论
css基础学习总结(一)

第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;})>类选择器(.con{…})>标签选择器(dic{…})>通用选择器(*{…第三优先级：由一个或多个id选择器来定义。}会覆盖.classname{margin:3pxl}第五优先级：由一个或多个类型选择器定义。}覆盖*{margin:10px；第二优先级：在html中给元素标签加style，即内联样式。第六优先级：通配选择器，如*{marigin:6px;
复制链接

扫一扫