css初学选择器

已于 2023-06-29 20:42:20 修改
阅读量38 收藏
点赞数
分类专栏： 前端 文章标签： css 前端
于 2023-06-29 20:13:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GQK11/article/details/131450335
版权

行内样式

<body>
    <!--
        行内样式
        css样式写在行内
    -->
<h1 style="color: red; font-size: larger">标题1</h1>
<h1 style="color: blue; font-size: medium">标题1</h1>
<h1 style="color: yellow; font-size: small">标题1</h1>

</body>

内部选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        h1{
            color: blue;
            font-size: 30px;
        }
    </style>
</head>
<body>
<!--
    内部样式
    css样式写head中的style标签中
-->
<h1>标题1</h1>
<h1>标题1</h1>
<h1>标题1</h1>

</body>
</html>

外部选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<style type="text/css">
        @import url("./css/css1.css");
    </style>-->

    <link href="css/css1.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--
    外部样式
    需要单独写一个css文件然后引入到html文件中
    css文件写法：
    h1{
    color: brown;
    font-size: 20px;
	}
    在head中
    导入式需写在style中
    <style type="text/css">
        @import url("./css/css1.css");
    </style>
    链接式不需要写在style
    <link href="css/css1.css" rel="stylesheet" type="text/css">

-->
<h1>标题1</h1>
<h1>标题1</h1>
<h1>标题1</h1>

</body>
</html>

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*<!--
        标签选择器
        -->*/
        h1{
            color: green;
            font-size: 20px;
        }
    </style>
</head>
<body>

<h1>h1标签</h1>
<h1>h1标签</h1>

</body>
</html>

类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*

                类选择器
                class=属性值
                在<style>标签中用
                .class属性值{}
                可以写多个重复的class值
        */
        .c1{
            color: blue;
            font-size: 15px;
        }
        .c2{
            color: brown;

        }
    </style>
</head>
<body>

<h1 class="c1">标签</h1>
<h1 class="c1">标签</h1>
<h1 class="c2">标签</h1>
<h1 class="c2">标签</h1>
<h1 class="c2">标签</h1>
<p class="c1">段落</p>
<p class="c1">段落</p>
<p class="c2">段落</p>
<p class="c2">段落</p>

</body>
</html>

ID选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*
            id选择器
            id=属性值
            在<style>标签中用
            #属性值{}
            只能写一个重复的id名，可以有多个id
        */
        #d1{
            color: brown;
        }
        #d2{
            color: blue;
        }
        #d3{
            color: red;
        }
        #d4{
            color: red;
            font-size: 20px;
        }
        #d4{
            color: yellow;
            font-size: 20px;
        }
    </style>
</head>
<body>
<!--
    id选择器
    id=属性值
    在<style>标签中用
    #属性值{}
    只能写一个重复的id名，可以有多个id
-->
<h1 id="d1">标签</h1>
<h1 id="d2">标签</h1>
<h1 id="d3">标签</h1>
<h1 >标签</h1>
<h1 >标签</h1>
<p id="d4">段落</p>
<p id="d5">段落</p>
<p >段落</p>
<p >段落</p>
</body>
</html>

span标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .c1{
            color: red;
            font-size: 20px;
        }
        #d{
            color: darkorchid;
            font-size: 30px;
        }
    </style>
</head>
<body>
<!--
    <span>标签 的作用
    能让某几个文字或者某个词语凸显出来
-->
<p>2000年，意气风发的刑警<span class="c1">安欣（张译饰）</span>与 倍受欺负的鱼贩子<span id="d">高启强（张颂文饰）</span>相识，
    而后随着高启强逐渐偏离正途，安欣意识到在京海市社会发展的背后正是以高家兄弟为首的
    黑恶势力暗流汹涌，两人分道扬镳并展开了长达20年的正邪较量 [19]  。
    2021年，在全国开展扫黑除恶常态化的背景下，中央督导组雷霆出击，安欣协同专案组彻查强盛集团犯罪团伙及其背后的保护伞，
    最终京海市得以拨云见日清风正气
</p>


</body>
</html>

层次选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*!*
            后代选择器 div E  p F
            div里边所有的p标签都会生效
        *!
        div p{
            background-color: #FF0000;
        }
        !*
            子选择器  div>p E>F
            div里边直接关联的p子标签生效，没有直接关联的p标签不生效
         *!
        div>p{
            background-color: blue;
        }*/
        /*
            兄弟选择器 E+F
            只能选择E后边的相邻的选择器，不能选择前面的
            先给第一个标签赋一个class属性值
            用.class属性值+相邻的标签
        */
        .class1+p{
            background-color: #FF0000;
        }
        /*
            兄弟通用选择器 E~f
            同一位置上的标签都会被选择
            先给第一个标签赋一个class属性值
            用.class属性值~相邻的标签
        */
        .class1~p{
            background-color: green;
        }
    </style>
</head>
<body>
<div>
    <p class="class1">1</p>
    <p>2</p>
    <p>3</p>
    <ul>
        <li>
            <p>4</p>
        </li>
        <li>
            <p>5</p>
        </li>
        <li>
            <p>6</p>
        </li>
    </ul>
</div>

</body>
</html>

结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*
            E:first-child 作为父元素的第一个子元素的元素E
        */
        p:first-child{
            background-color: #0D7114;
        }
        /*
            E F:nth-child(n)
            选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even（奇数）、odd（偶数）
        */
        /*p:nth-child(2){
            background-color: #1F87CC;
        }*/
        /*
            E:last-child 作为父元素的最后一个子元素的元素E
        */
        /*li:last-child{
            background-color: darkorchid;
        }*/
        /*
            E:first-of-type 当父元素中的E元素不是第一个时
            选择父元素内具有指定类型的第一个E元素
        */
        /*p:first-of-type{
            background-color: #FF0000;
        }*/
        /*
            E:last-of-type
            选择父元素内具有指定类型的最后一个E元素
        */
        p:nth-of-type(2){
            background-color: #FAA53B;
        }
        /*
            E F:nth-of-type(n)
            选择父元素内具有指定类型的第n个F元素
        */
        p:last-of-type{
            background-color: yellow;
        }

    </style>
</head>
<body>
<div>
    <h1>标题</h1>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <ul>
        <li>无需列表</li>
        <li>无需列表</li>
        <li>无序列表</li>
    </ul>
</div>

</body>
</html>

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        a {
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            text-align: center;
            background: #aac;
            color: blue;
            font: bold 20px/50px Arial;
            margin-right: 5px;
            text-decoration: none;
            margin: 5px;
        }
        /*!*
            根据属性
        *!
        [href]{
            background-color: #FAA53B;
        }
        !*
            属性=属性值
        *!
        [id=first]{
            background-color: #1F87CC;
        }*/
        /*
            属性值已什么开头的
        */
        /*[title^=test]{
            background-color: yellow;
        }*/
        /*
            属性值已什么结尾的
        */
        [class$=item]{
            background-color: darkorchid;
        }
        /*
            属性值中包含什么
        */
        [href*=file]{
            background-color: aqua;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first" >1</a>
    <a href="" class="links active item" title="test website" target="_blank" >2</a>
    <a href="sites/file/test.html" class="links item"  >3</a>
    <a href="sites/file/test.png" class="links item" > 4</a>
    <a href="sites/file/image.jpg" class="links item" >5</a>
    <a href="efc" class="links item" title="website link" >6</a>
    <a href="/a.pdf" class="links item" >7</a>
    <a href="/abc.pdf" class="links item" >8</a>
    <a href="abcdef.doc" class="links item" >9</a>
    <a href="abd.doc" class="linksitem last" id="last">10</a>
</p>


</body>
</html>
GQK11
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
css3 复合选择器,CSS复合选择器
weixin_28987001的博客
08-03 1463
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。交集选择器交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。比如： p.one 选择的是： 类名为 .one 的 段落标签。使用率相对较少记忆技巧：交集选择器 是 并且的意思。 即...又...的意思并...
CSS-通配符选择器
qq_45438471的博客
03-30 603
本文主要介绍了CSS通配符选择器的用法。
常见CSS选择器
weixin_61427900的博客
10-27 252
初学者必会的CSS选择器
初学css-选择器
chenfang0529的博客
10-23 612
1.三种方法的优先级: 内联式>嵌入式 > 外部式 2.外部式css样式 外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码： <link href="...
【前端知识初学—CSS和选择器】
LPC的博客
03-27 479
前端知识初学—CSS和选择器 目录 前端知识初学---CSS和选择器 前言 一、如何引用CSS1. 内联样式引用2. 内部样式引用3. 外联样式引用 二、常用选择器1. 类选择器2. ID选择器3. 标签选择器4. 通配选择器5. 后代选择器6. 子代选择器7. 子代选择器 前言 本文就前端知识中部分CSS和选择器基础知识点进行总结，希望对你有用！ 一、如何引用CSS 1. 内联样式引用 直接在html标签的元素中引用样式，例如：
CSS伪类选择器详细讲解
热门推荐
weixin_67979623的博客
11-02 1万+
说起CSS3选择器种类之多，今天我们来学习下CSS3中重中之重的选择器伪类选择器，这篇涵盖了很多知识点，你看完这篇保证能对它有个更深的了解
CSS 选择器知识点总结
weixin_40348267的博客
05-05 1023
但是记得不可滥用!选择器是 CSS 中的关键部分，允许你精确地定位和样式化特定的元素或元素组。这篇文章的内容是 CSS 的选择器，这是写页面样式的第一步，知道 CSS 有哪些选择器是每个前端工程师必会的内容之一。：没有特定性或源代码顺序的概念，但需要注意的是某些样式属性具有继承性，例如字体属性，它们可以从父元素继承到子元素。这些是 CSS 的常用选择器，将这些选择器组合起来使用，或者是嵌套使用可以改变选择器的权重。a：内联样式（在元素的 style 属性中定义的样式）的数量（权重值最高，值为1000）。
CSS选择器详解及部分元素属性
小小码农
03-12 2459
CSS选择器详解及部分元素属性
CSS两种高级选择器
YourLie_in_April的博客
03-24 589
CSS高级选择器分为层次选择器和属性选择器。 层次选择器可分为： 1、后代选择器 （E&nbsp；F{ }） 2、子选择器 (E>F{ }) 3、相邻兄弟选择器 (E+F{ }) 4、通用兄弟选择器 (E~F{ }) 属性选择器（区分大小写）可分为： 1、E[attr] 选择匹配具有属性attr的E元素 2、E[attr=val] 选择匹配具有属性attr的E元素,并...
CSS---基础选择器
gaoqiandr的博客
11-18 298
在网页开发中，只会HTML虽然了开发了网页，但是不是太丑了，这时候CSS就有用处了，它可以帮你美化页面，布局页面，而本文就是对于CSS介绍的入门第一课。对于CSS基础选择器的详细介绍，简单详细，适合初学者。
CSS3中的常用选择器使用示例整理
09-24
本文将详细介绍几个常用的选择器及其使用示例，帮助初学者更好地理解和掌握CSS3的选择器系统。 1. **根选择器**: `:root` 选择器 `:root` 选择器匹配文档的根元素，对于HTML文档来说，就是`<html>`元素。它通常...
CSS初学者代码.zip
11-04
- 选择器：CSS中的类选择器（`.class`）、ID选择器（`#id`）、元素选择器（`tag`）、后代选择器（`parent child`）、相邻兄弟选择器（`element + element`）等，用于精确地选取和操作HTML元素。 - 层叠和继承：CSS...
css初学者技巧
12-04
【CSS初学者技巧】是关于如何有效地学习和应用CSS（层叠样式表）来构建美观且功能完善的网站界面的关键要点。CSS是Web设计的核心组成部分，它负责定义网页的布局、颜色、字体等视觉表现，与HTML内容分离，使得设计...
简单的选择器Demo
12-03
本Demo主要关注的是CSS选择器的使用，旨在帮助初学者更好地理解和应用选择器。我们将深入探讨CSS选择器的基本类型，以及如何在实际项目中有效利用它们。 一、CSS选择器概述 CSS（层叠样式表）选择器是用于选取HTML...
利用css＋javascript实现的一个日期选择器代码
10-27
【标题】：“利用css＋javascript实现的一个日期选择器代码”涉及的核心知识点主要集中在CSS样式设计和JavaScript编程上，用于创建一个交互式的日期选择组件。日期选择器是网页表单中常见的一种元素，允许用户方便地...
CSS：mix-blend-mode属性（设置元素的混合模式）
最新发布
m0_65029152的博客
07-24 944
本文主要记录CSS中，mix-blend-mode属性的相关内容，并实现页面中的文字适配背景效果；
CSS学习笔记
ngczx的博客
07-23 454
CSS学习笔记
【前端 02】新浪新闻项目-初步使用CSS来排版
delepaste的博客
07-23 1255
在CSS中，页面上的每个元素都可以被看作是一个盒子，这个盒子由四个部分组成：内容区域（content）、内边距区域（padding）、边框区域（border）和外边距区域（margin）。这四个部分共同构成了元素的盒模型，决定了元素在页面上的位置和大小。内容区域（Content）：元素的实际内容区域，如文本、图片等。内边距区域（Padding）：内容区域与边框之间的空白区域，用于控制内容与边框的距离。边框区域（Border）：围绕内边距和内容区域的边界，可以设置颜色、宽度和样式。
CSS技巧专栏：一日一例 11 -纯CSS实现多彩渐变按钮系列特效
uu0216的博客
07-24 567
这是一个系列的按钮，它们具有共同的特点：底层按钮层，具有一个彩色的渐变边框，上层是依据hover效果需要，可以是渐变，可以时白色。鼠标hover效果都是一样的：背景色位移或变化。本篇文章仅介绍第三个按钮的做法，其他的做法，我会写在源文件里，但不写在本篇里。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值