结构伪类选择器、属性选择器、css的作用及字体样式 2022-1-24

最新推荐文章于 2022-12-05 18:35:46 发布
最新推荐文章于 2022-12-05 18:35:46 发布
阅读量294 收藏
点赞数
文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56661579/article/details/122666329
版权

一、结构伪类选择器

伪类：id+class结合

练习1.1ul的第一个元素，ul的最后一个元素

<style>
        /*ul的第一个元素*/
        ul li:first-child{
            background: #c907ff;
        }

        /*ul的最后一个元素*/
        ul li:last-child{
            background: brown;
        }

    </style>

总体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*ul的第一个元素*/
        ul li:first-child{
            background: #c907ff;
        }
        /*ul的最后一个元素*/
        ul li:last-child{
            background: brown;
        }

    </style>
</head>
<body>
<p>p0</p>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>


</ul>
</body>
</html>

在这里插入图片描述

练习1.2 选中p1：定位到父元素，选择当前的第一个元素，并且是当前元素才能生效

选择当前p元素的父级元素，选中父级元素的第一个

/*选中p1：定位到父元素，选择当前的第一个元素
        选择当前p元素的父级元素，选中父级元素的第一个*/
        p:nth-child(1){
            background: aqua;
        }

总体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       /*选中p1：定位到父元素，选择当前的第一个元素,并且是当前元素才能生效
        选择当前p元素的父级元素，选中父级元素的第一个*/
        p:nth-child(1){
            background: aqua;
        }
       
    </style>
</head>
<body>
<p>p0</p>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>


</ul>
</body>
</html>

在这里插入图片描述

扩展

同样是选择第一个元素，当加了一个h1标签，就没有变化，因此必须是当前元素才能生效。

 p:nth-child(1){
            background: aqua;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*选中p1：定位到父元素，选择当前的第一个元素,并且是当前元素才能生效
        选择当前p元素的父级元素，选中父级元素的第一个   顺序*/
        p:nth-child(1){
            background: aqua;
        }

    </style>
</head>
<body>
<h1>h1</h1>
<p>p0</p>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>
</html>

在这里插入图片描述

p:nth-child()和p:nth-of-type(）的使用

			p:nth-child(2){
            background: aqua;
        }

因为第二个元素是p标签，所以是有变化的，以下这样就可以
在这里插入图片描述
p:nth-of-type这个不受其他标签的影响，括号里是1就是这个标签的第一个元素

/*选中父元素，下的p元素的第一个   类型*/
        p:nth-of-type(1){
            background: yellow;
        }

在这里插入图片描述

二、属性选择器（推荐使用）

Id+class结合

总结

= 绝对等于
*= 包含这个元素
^= 以什么什么开头
$= 以什么什么结尾

1、存在Id属性的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float: left;             /*悬浮*/
            display: block;          /*有框*/
            height: 50px;
            width: 50px;
            border-radius: 10px;     /*圆角*/
            background: aqua;
            text-align: center;      /*文本居中*/
            color: black;            /*字体颜色*/
            text-decoration: none;   /*去下划线*/
            margin-right: 5px;       /*外边距向右移动*/
            /*line-height: 50px;*/       /*上下居中*/
            font: bold 20px/50px Arial;/*上下居中  bold加粗*/
        }
        /*两种写法：1、属性名  2、属性名 = 属性值*/
        /*1、存在Id属性的元素   a[]{}*/
        a[id]{
            background: yellow;
        }


    </style>
</head>
<body>
<p class="demo">
    <a href="http://www.hao.com" class="item links first" id="first">1</a>
    <a href="http://www.baidu.com" class="item links active" target="_blank title=test">2</a>
    <a href="images/123.html" class="item links">3</a>
    <a href="images/123.png" class="item links">4</a>
    <a href="images/123.png" class="item links">5</a>
    <a href="abc" class="item links">6</a>
    <a href="/a.pdf" class="item links">7</a>
    <a href="/abc.pdf" class="item links">8</a>
    <a href="abc.doc" class="item links">9</a>
    <a href="abcd.doc" class="item links last">10</a>

</p>
</body>
</html>

在这里插入图片描述

Id等于first的元素

        a[id=first]{
            background: antiquewhite;
        }

在这里插入图片描述

3、class中有link的元素

        a[class*="link"]{
            background: chartreuse;
        }

在这里插入图片描述

4、选中href中以http开头的元素

        a[href^=http]{
            background: cornflowerblue;
        }

在这里插入图片描述

5、选中href中以doc开头的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float: left;             /*悬浮*/
            display: block;          /*有框*/
            height: 50px;
            width: 50px;
            border-radius: 10px;     /*圆角*/
            background: aqua;
            text-align: center;      /*文本居中*/
            color: black;            /*字体颜色*/
            text-decoration: none;   /*去下划线*/
            margin-right: 5px;       /*外边距向右移动*/
            /*line-height: 50px;*/       /*上下居中*/
            font: bold 20px/50px Arial;/*上下居中  bold加粗*/
        }
        /*两种写法：1、属性名  2、属性名 = 属性值*/
        /*a[]{}*/

        /*5、选中href中以doc开头的元素*/
        a[href$=doc]{
            background: blueviolet;
        }

    </style>
</head>
<body>
<p class="demo">
    <a href="http://www.hao.com" class="item links first" id="first">1</a>
    <a href="http://www.baidu.com" class="item links active" target="_blank title=test">2</a>
    <a href="images/123.html" class="item links">3</a>
    <a href="images/123.png" class="item links">4</a>
    <a href="images/123.png" class="item links">5</a>
    <a href="abc" class="item links">6</a>
    <a href="/a.pdf" class="item links">7</a>
    <a href="/abc.pdf" class="item links">8</a>
    <a href="abc.doc" class="item links">9</a>
    <a href="abcd.doc" class="item links last">10</a>

</p>
</body>
</html>

在这里插入图片描述

三、CSS的作用及字体样式

3.1美化网页元素

为什么要美化网页？

  1. 有效的传递页面信息
  2. 美化网页，页面漂亮才能吸引用户
  3. 凸显页面的主题
  4. 提高用户的体验

3.2 span标签：重点要突出的字，使用span 套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title{
            font-size: 50px;
        }

    </style>
</head>
<body>
欢迎学习 <span id="title">Java</span>
</body>
</html>

在这里插入图片描述

3.3字体样式

font-family字体样式,可以同时存在两种以上字体
font-size字体大小
font-weight字体粗细，bold为粗体，lighter为细体
color 字体颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--font-family字体样式,可以同时存在两种以上字体
    font-size字体大小
    font-weight字体粗细，bold为粗体，lighter为细体
    color 字体颜色
    -->
    <style>
        body{
            font-family: "Adobe Devanagari", 华文楷体;
            color: green;
        }
        h1{
            font-size: 50px;/*这个后面的单位也可以写em ,表示是缩进字符*/
        }
        .p1{
            font-weight: bold;/*这个后面也可以直接跟数字*/
        }
    </style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1">
    熊大和熊二到森林中采摘水果，可到家才发现，辛辛苦苦摘到的水果都不见了。
    “熊二不是让你拿好吗！？”熊大愤怒的说。“为什么所有的错都怪我...” 熊二很委屈。
</p>
<p>
    找不回全部的水果不能回家哦！太可怜了。快来帮帮他们吧！熊大喜欢苹果，熊二喜欢鸭梨，
    收集全部的水果回家，即可成功过关。吃了神奇药水，熊变大后可以踩死野猪，普通状态碰到野猪会死哦，小心!
</p>
<p>
    If you were a teardrop;In my eye,
    For fear of losing you,I would never cry.
    And if the golden sun,Should cease to shine its light,
    Just one smile from you,Would make my whole world bright.
</p>
</body>
</html>

斜体的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*oblique斜体 bolder粗体 字体大小 "楷体"字体样式*/
        p{
            font: oblique bolder 24px "楷体";
        }
    </style>
</head>
<body>
<p>
    熊大和熊二到森林中采摘水果，可到家才发现，辛辛苦苦摘到的水果都不见了。
    “熊二不是让你拿好吗！？”熊大愤怒的说。“为什么所有的错都怪我...” 熊二很委屈。
</p>
</body>
</html>

在这里插入图片描述

心️要努力吖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css复杂选择器及css字体样式、颜色属性详解
12-28
之前学习了css的一些基础选择器，然而今天要介绍css的复杂选择器，复杂选择器一共有三种 1.父子（派生）选择器 234 <em>123 此时要使234有颜色，需要用到父子<em>选择器，虽说用之前的标签选择器可以让它有...
li元素的常见伪类：ul列表第一个li和最后一个li的样式解决办法
白日梦技术博客
12-04 3584
在网站开发中，尤其是对资讯网站中，通常需要做出热门文章的列表，排名等等样式，里面就会应用到排序的从0-10等等数值，数值中，我们通常会对前三或是前五进行特别的样式调整。比如我们需要把第一个改成红色的背景，把最后一个样式下面加一个更多的按钮 ，这样我们都可以使用li伪类来对前端的样式进行调整。 尤其是在wordpress主题的开发中，在前端应用很广泛li的第一个及最后一个都可以进行单独的设置，甚至是li的奇偶数的，或是特定的某个位置都可以使用伪类来进行设置，相当于li的一个小跟班，只对某个li起作用。 第
选中多个<ul>中的第一个<li>方法
weixin_30849591的博客
11-10 1567
获取第一个ul中的第一个li标签的方法: //获取第一个ul中的第一个li /* $("ul li:first").css("background","pink"); $("ul li").eq(0).css("background","pink"); $("ul li").first().css("background","pink"); ...
jQuery 选择器 选取第一个 <ul> 元素的第一个 <li> 元素
热门推荐
09-05 1万+
; &lt;/script&gt; &lt;script&gt; $(document).ready(function(){ $("button").click(function(){ $("ul li:first").hide(); }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &l
html中结构伪类选择器,CSS3中结构性伪类选择器的使用方法
weixin_42603332的博客
06-03 342
CSS3中结构性伪类选择器的使用方法发布时间：2020-06-11 17:55:18来源：亿速云阅读：141作者：鸽子问题：1、实现以下效果，且使用纯DIV+CSS，必须使用结构性伪类选择器—first-of-type附加说明：1、整体宽为5002、每个名言标签的间距为20，内部间距为25，字体为cursive现在来具体操作1、准备素材：新建images目录，将素材存放与此，方便管理，该案例中素材...
css笔记
c1523456的博客
11-01 962
css3 基础内容
CSS属性简写和选择器的优先级问题
01-19
具有简短写法的 CSS 属性很多，但是常用的属性无外乎字体、列表、背景、边框、透明等几种，所以在此对这几种属性的简短写法做个归纳，备忘。font 属性 font 属性涉及到字体、字号、行高等好几个属性，使用简短写法的...
CSS3 :not()选择器实现最后一行li去除某种css样式
01-19
本文中用到的是CSS3新增的:not()伪类选择符，可以匹配不含有选择符的元素。假定有个列表，每个列表项都有一条底边线，但是最后一项不需要底边线 实例代码如下： 复制代码代码如下:<!DOCTYPE><html><head...
CSS基础1-基础选择器+字体文本相关样式
12-05
CSS基础-基础选择器+字体文本相关样式
CSS选择器到底有哪些？CSS笔记（一）
01-20
文章目录CSS简介CSS样式编写1、内联样式2、内部样式3、外部样式CSS语法选择器常用的选择器元素选择器id选择器类选择器选择器分组（并集选择器）通配选择器复合选择器（交集选择器）后代元素选择器子元素选择器伪类...
android-doc-picker,一个简单易用的文档选择器android库。从设备中选择任何文档，如pdf、ppt、文本、word或媒体文件.zip
09-25
android-doc-picker,一个简单易用的文档选择器android库。从设备中选择任何文档，如pdf、ppt、文本、word或媒体文件.zip
日历 ——练习CSS结构伪类选择器
weixin_47207556的博客
10-01 202
今天拿到一个日历的练习题，试着实现了一下。 题目照片如下： 然后下面是我最后实现的 感觉还可以，第一次拿着图实现。主要是练习结构伪类选择器。 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>rili</title> <style> *{ box-sizing:
谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器
weixin_34393428的博客
11-15 106
开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。 不断更新，不断更新，不断更新，重要的事情说三遍。 谈谈一些有趣的CSS题目（一）-- 左边竖条的实现方法 谈谈一些有趣的CSS题目（二）-...
结构伪类选择器（部分）
laodaer的博客
12-05 251
结构伪类选择器：总结--当页面上的某个元素处于在不同的位置上的时候，我们可以通过伪类选择器去选择某个标签或者某个class相同的元素li:first-child 就是第一个lili:last-child 就是最后一个lili:nth-child（n） ，n是几就是第几个li代码： 效果图：li:nth-child(odd) 就是排在奇数的lili:nth-child(even) 就是排在偶数数的li代码： 效果图：1. ：2n是指第0、2、4、6、8等个li。3n是指第0、3、6、9、12等个li
day10-HTML5&CSS3提高
weixin_48697269的博客
04-22 878
目标 能够说出 3~5 个 HTML5 新增布局和表单标签 能够说出 CSS3 的新增特性有哪些 HTML5新特性 概述 HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。 语义化标签 （★★） 以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的 <div class=“header”> </div>
CSS3---结构性伪类选择器—not
diyinjiao1404的博客
05-04 266
结构性伪类选择器—not :not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成： form { width: 200px; margin: 20px auto; } div { margin-bo...
结构伪类选择器
m0_62181310的博客
04-04 5728
6.选择父元素里边奇数项的子元素 :nth-child(2n+1) 2n+1或者2n-1或者odd。5.选择父元素里边偶数项的子元素 :nth-child(2n) 2n或者even。7.:nth-child(-n+i) 选择父元素里前i项子元素。11.选择父元素里边按照不同类型的第n个子元素。2.选择父元素里边的最后1个子元素。1.选择父元素里边的第1个子元素。选择父元素里边的最后1个子元素。3.选择父元素里边第n个子元素。选择父元素里边的第1个子元素。选择父元素里边第n个子元素。...
CSS3每日一练之选择器-结构性伪类选择器
weixin_30932215的博客
07-25 91
<!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title>CSS3每日一练之选择器-结构性伪类选择器[四] | 前端开发网(W3Cfuns.com)!</title> <style typ...
解释CSS样式的引用方式，CSS选择器和常用属性
最新发布
06-07
CSS 样式表语言用于描述网页的表现样式。在 HTML 中，我们可以通过三种方式引入 CSS 样式表：内联样式、内部样式和外部样式。 1. 内联样式：内联样式是直接在 HTML 标记中使用`style`属性设置样式，例如：`<div style="color: red;">内容</div>`。这种方式的缺点是样式和内容混在一起，不易维护。 2. 内部样式：内部样式是在 HTML 文件中使用`<style>`标记定义样式，例如： ``` <head> <style> div { color: red; } </style> </head> <body> <div>内容</div> </body> ``` 这种方式的优点是样式和内容分离，易于维护。 3. 外部样式：外部样式是将样式定义在一个单独的 CSS 文件中，例如： ``` <head> <link rel="stylesheet" href="styles.css"> </head> <body> <div>内容</div> </body> ``` 这种方式的优点是可以在多个页面中共用同一个样式文件，使得网站的整体样式保持一致。 在 CSS 中，我们可以使用选择器来选择网页中的元素，并对其应用样式。常见的选择器包括： 1. 元素选择器：使用元素名称来选择元素，例如：`div`选择所有的`<div>`元素。 2. 类选择器：使用类名来选择元素，以`.`开头，例如：`.red`选择所有类名为`red`的元素。 3. ID 选择器：使用 ID 来选择元素，以`#`开头，例如：`#header`选择 ID 为`header`的元素。 在 CSS 中，我们还可以使用一些常用的属性来设置样式，例如： 1. `color`：设置文本颜色。 2. `font-size`：设置字体大小。 3. `background`：设置背景颜色或背景图片。 4. `border`：设置边框样式、宽度和颜色。 5. `padding`和`margin`：设置元素内边距和外边距。 通过组合使用选择器和属性，我们可以创建出丰富多彩的网页样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值