笔记五：CSS简介和CSS选择器

最新推荐文章于 2024-04-16 12:23:43 发布

@HongLi

最新推荐文章于 2024-04-16 12:23:43 发布

阅读量188

点赞数

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

本文链接：https://blog.csdn.net/m0_54249336/article/details/118583978

版权

web前端学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、什么是CSS

CSS 指的是层叠样式表* (Cascading Style Sheets)，CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素，CSS 节省了大量工作。它可以同时控制多张网页的布局。

二、CSS基本语法

CSS 选择器

CSS 语法规则集（rule-set）由选择器和声明块（样式对集）组成
选择器：指向您需要设置样式的 HTML 元素。
声明块（样式对集）：包含一条或多条用分号分隔的声明

三、简单选择器（根据名称、id、类来选取元素）

CSS 选择器用于选择出要设置样式的 HTML 元素。

最基本的三个简单选择器：元素选择器、类选择器、 id选择器

通用选择器：通用选择器（*），选择的是页面中所有标签

    <style>

        /* 通用选择器 */
        *{
            background-color: silver;
        }
        
    </style>

元素选择器：根据元素名称来选择 HTML 元素，选择的是页面中所有该标签

    <style>

        /* 元素选择器 */
        div {
            background-color: blue;
        }

    </style>

类选择器： 选择有特定 class 属性的 HTML 元素。选择的是页面中所有类名相同的标签

    <style>
        
        /* 类选择器：请写一个句点（.）字符，后面跟类名。*/
        .test {
            height: 60px;
            width: 60px;
            background-color: blue;
        }

    </style>

id选择器：id 属性来选择特定元素。元素的 id 在页面中是唯一的，选择的是页面中唯一标识该id标签

    <style>

        /* id选择器：请写一个井号（＃），后跟该元素的 id*/
        #idSelector{
            background-color: pink;
        }

    </style>

分组选择器（逗号）：选择页面中所有具有相同样式定义的标签（常用于定义一些标签的基础样式）

    <style>

        /* 分组选择器 */
        h1 {
            text-align: center;
            color: red;
        }

        h2 {
            text-align: center;
            color: red;
        }

        p {
            text-align: center;
            color: red;
        }

        h1,h2,p {
            text-align: center;
            color: red;
        }

    </style>

四、组合选择器（根据它们之间的特定关系来选取元素）

组合器是解释选择器之间关系的某种机制。基于多个简单选择器（元素选择器、类选择器、 id选择器）

后代选择器（空格）：选择出指定元素的所有后代元素（包括孙子...），（所有后代选择器）

    <style>
     
        /* 组合选择器——后代选择器 */
        div p{
            font-size: 40px;
        }

    </style>

    <!-- 组合选择器 -->
    <div>
        <p>大儿子</p>
        <p>二儿子</p>
        <section>
            三儿子
            <p>三孙子</p>
        </section>
        <p>四儿子</p>
    </div>

子选择器（>）：选择出属于指定元素的所有直接孩子元素（不包括孙子元素），（直系儿子选择器）

    <style>
     
        /* 组合选择器——子选择器 */
        div>p{
            font-size: 40px;
        }

    </style>

    <!-- 组合选择器 -->
    <div>
        <p>大儿子</p>
        <p>二儿子</p>
        <section>
            三儿子
            <p>三孙子</p>
        </section>
        <p>四儿子</p>
    </div>

相邻兄弟选择器（+）：选择出指定元素之后的一个相邻同级的元素。（相邻弟弟选择器）

    <style>
     
        /* 组合选择器——相邻兄弟选择器  */
        section+p {
            font-size: 40px;
        }

    </style>

    <!-- 组合选择器 -->
    <div>
        <p>大儿子</p>
        <p>二儿子</p>
        <section>
            三儿子
            <p>三孙子</p>
        </section>
        <p>四儿子</p>
    </div>

通用兄弟选择器（~）: 选择出指定元素之后的所有同级元素，（所有弟弟选择器）

    <style>
     
        /* 组合选择器——通用兄弟选择器 */
        section~p{
            font-size: 40px;
        }

    </style>

    <!-- 组合选择器 -->
    <div>
        <p>大儿子</p>
        <p>二儿子</p>
        <section>
            三儿子
            <p>三孙子</p>
        </section>
        <p>四儿子</p>
        <p>五儿子</p>
    </div>

五、伪类选择器（根据特定状态选取元素）

伪类用于定义元素（包括div,span等标签）的特殊状态。基于多个简单选择器（元素选择器、类选择器、 id选择器）

例如，它可以用于：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

锚伪类选择器：可以定义<a>标签的 未访问、已访问、鼠标悬停、鼠标点击 等状态的样式

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！（尽量按照lvhaha的顺序，好记忆）

    <style>
     
        /* 伪类选择器——锚选择器*/
        a:link{
            color: springgreen;
        }
        a:visited{
            color: red;
        }
        a:hover{
            color: silver;
        }
        a:active{
            color: skyblue;
        }

    </style>

    <!-- 伪类选择器 -->
    <a href="http://www.baidu.com" id="linkOne">链接一</a>
    <a href="http://www.baidu.com" id="linkTwo">链接二</a>

所有的伪类以及其功能

:active	a:active	选择活动的链接。
:checked	input:checked	选择每个被选中的 <input> 元素。
:disabled	input:disabled	选择每个被禁用的 <input> 元素。
:empty	p:empty	选择没有子元素的每个 <p> 元素。
:enabled	input:enabled	选择每个已启用的 <input> 元素。
:first-child	p:first-child	选择作为其父的首个子元素的每个 <p> 元素。
:first-of-type	p:first-of-type	选择作为其父的首个 <p> 元素的每个 <p> 元素。
:focus	input:focus	选择获得焦点的 <input> 元素。
:hover	a:hover	选择鼠标悬停其上的链接。
:in-range	input:in-range	选择具有指定范围内的值的 <input> 元素。
:invalid	input:invalid	选择所有具有无效值的 <input> 元素。
:lang(language)	p:lang(it)	选择每个 lang 属性值以 "it" 开头的 <p> 元素。
:last-child	p:last-child	选择作为其父的最后一个子元素的每个 <p> 元素。
:last-of-type	p:last-of-type	选择作为其父的最后一个 <p> 元素的每个 <p> 元素。
:link	a:link	选择所有未被访问的链接。
:not(selector)	:not(p)	选择每个非 <p> 元素的元素。
:nth-child(n)	p:nth-child(2)	选择作为其父的第二个子元素的每个 <p> 元素。
:nth-last-child(n)	p:nth-last-child(2)	选择作为父的第二个子元素的每个<p>元素，从最后一个子元素计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择作为父的第二个<p>元素的每个<p>元素，从最后一个子元素计数
:nth-of-type(n)	p:nth-of-type(2)	选择作为其父的第二个 <p> 元素的每个 <p> 元素。
:only-of-type	p:only-of-type	选择作为其父的唯一 <p> 元素的每个 <p> 元素。
:only-child	p:only-child	选择作为其父的唯一子元素的 <p> 元素。
:optional	input:optional	选择不带 "required" 属性的 <input> 元素。
:out-of-range	input:out-of-range	选择值在指定范围之外的 <input> 元素。
:read-only	input:read-only	选择指定了 "readonly" 属性的 <input> 元素。
:read-write	input:read-write	选择不带 "readonly" 属性的 <input> 元素。
:required	input:required	选择指定了 "required" 属性的 <input> 元素。
:root	root	选择元素的根元素。
:target	#news:target	选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:valid	input:valid	选择所有具有有效值的 <input> 元素。
:visited	a:visited	选择所有已访问的链接。

六、伪元素选择器（选取元素的一部分并设置其样式）

CSS 伪元素用于设置元素指定部分的样式。

在 CSS3 中，双冒号取代了伪元素的单冒号表示法。这是 W3C 试图区分伪类和伪元素的尝试,
在 CSS2 和 CSS1 中，伪类和伪元素都使用了单冒号语法。

例如，它可用于：

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

::first-line 伪元素：用于向文本的首行添加特殊样式。
::first-letter 伪元素：用于向文本的首字母添加特殊样式。

    <style>
     
        /* 伪元素选择器：::first-line 和 first-letter*/
        p::first-line{
            color: turquoise;
        }
        p::first-letter{
            font-size: 40px;
        }

    </style>

    <!--伪元素选择器：::first-line -->
    <p style="width: 100px;">噢噢噢噢哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p>

::before 伪元素: 可用于在元素内容之前插入一些内容。
::after 伪元素:可用于在元素内容之后插入一些内容。

    <style>
     
        /* 伪元素选择器：::before 和 ::after */
        p::before{
            content: "";
            display: block;
            width: 60px;
            height: 60px;
            background-color: blue;
        }
        p::after{
            content: "";
            display: block;
            width: 60px;
            height: 60px;
            background-color: red;
        }

    </style>

    <!--伪元素选择器 -->
    <p style="width: 100px;">噢噢噢噢哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p>

:selection 伪元素：可用于设置选中文本时的样式。

    <style>
     
        /* 伪元素选择器：::selection */
        p::selection{
            color: pink;
            background-color: powderblue;
        }

    </style>

    <!--伪元素选择器 -->
    <p style="width: 100px;">噢噢噢噢哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p>

七、属性选择器（根据属性或属性值来选取元素）

[attribute] 选择器：用于选取带有指定属性的元素。

    a[target] {
      background-color: yellow;
    }

[attribute="value"] 选择器：用于选取带有指定属性和值的元素。

    a[target="_blank"] { 
      background-color: yellow;
    }

所有的属性选择器：

[attribute]	[target]	选择带有 target 属性的所有元素。
[attribute=value]	[target=_blank]	选择带有 target="_blank" 属性的所有元素。
[attribute~=value]	[title~=flower]	选择带有包含 "flower" 一词的 title 属性的所有元素。
[attribute\|=value]	[lang\|=en]	选择带有以 "en" 开头的 lang 属性的所有元素。
[attribute^=value]	a[href^="https"]	选择其 href 属性值以 "https" 开头的每个 <a> 元素。
[attribute$=value]	a[href$=".pdf"]	选择其 href 属性值以 ".pdf" 结尾的每个 <a> 元素。
[attribute=value*]	a[href*="w3school"]	选择其 href 属性值包含子串 "w3school" 的每个 <a> 元素。

@HongLi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
笔记五：CSS简介和CSS选择器

一、什么是CSSCSS指的是层叠样式表*(CascadingStyleSheets)，CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素，CSS节省了大量工作。它可以同时控制多张网页的布局。二、CSS基本语法CSS 语法规则集（rule-set）由选择器和声明块（样式对集）组成选择器：指向您需要设置样式的 HTML 元素。声明块（样式对集）：包含一条或多条用分号分隔的声明三、简单选择器（根据名称、id、类来选取元素）CSS 选择器用于选择出要...
复制链接

扫一扫