2.* 分组与嵌套* 伪类选择器* 伪元素选择器* 选择器优先级* css属性相关(操作标签样式)

最新推荐文章于 2024-08-16 23:06:16 发布
最新推荐文章于 2024-08-16 23:06:16 发布
阅读量1k 收藏
点赞数 1
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_66872454/article/details/123960986
版权

内容概要:

  • 分组与嵌套

  • 伪类选择器

  • 伪元素选择器

  • 选择器优先级

  • css属性相关(操作标签样式)

1.分组与嵌套

​
1.)逗号表并列关系，如果一个一个写会造成代码冗余

div,span,p {color: red}



2.)可以将不同选择器组合同时使用
div,#id号,.class号 {color: red}


注意:div span  {color: red}   #多个选择不是用空格隔开,这种属于组合选择器,意思是将div标签的内所有span标签拿到

​

2.伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            background-color: black;
        }
        a:link {  /*访问之前的状态*/
            color: red;
        }
        a:hover {  /*需要记住*/
            color: aqua;  /*鼠标悬浮态*/
        }
        a:active {
            color: black;  /*鼠标点击不松开的状态  激活态*/
        }
        a:visited {
            color: darkgray;  /*访问之后的状态*/
        }
        p {
            color: darkgray;
            font-size: 48px;
        }
        p:hover {
            color: white;
        }
        
        input:focus {  /*input框获取焦点(鼠标点了input框)*/
            background-color: red;
        }
    </style>
</head>
<body>
<a href="https://www.jd.com/">测试uuuuuuu</a>
<p>测试iiiiiii</p>
<input type="text">
</body>
</html>

3.伪元素选择器

p:first-letter {
            font-size: 48px; /*设置文字大小*/
            color: orange;
        }
p:before {  /*在文本开头添加内容,用css代码添加的内容无法被用户选中*/
            content: '我很好';
            color: blue;
        }
p:after {  /*在文本末尾添加内容*/
            content: '我很不好';
            color: orange;
        }
ps:before和after通常都是用来清除浮动带来的影响:父标签塌陷的问题(后面马上讲)

4.选择器优先级

         1.选择器相同 书写顺序不同
                就近原则:谁离标签更近就听谁的
            2.选择器不同 ...
                行内 > id选择器  > 类选择器 > 标签选择器
                精确度越高越有效

5.css属性相关

        1.)行内标签无法设置长宽 就算你写了 也不会生效 

                如span用css设置高度和宽度后没有任何变化

        

        2.)字体属性

        

p {
      /*font-family: "Arial Black","微软雅黑","...";  /*第一个不生效就用后面的写多个备用*/

            /*font-size: 24px;  !*字体大小*!*/

            /*font-weight: inherit;  /*bolder lighter 100~900 inherit继承父元素的粗细值*/

            /*color: red;  /*直接写颜色英文*/
            /*color: #ee762e;  /*颜色编号*/
            /*color: rgb(128,23,45);  /*三基色 数字  范围0-255*/
            /*color: rgba(23, 128, 91, 0.9);  /*第四个参数是颜色的透明度 范围是0-1*/

            /*当你想要一些颜色的时候 可以利用现成的工具
                1 pycharm提供的取色器
                2 qq或者微信截图功能
  				也可以多软件结合使用 
            */
        }

        3.)文字属性

        

p {
            /*text-align: center;  /*居中*/
            /*text-align: right;*/  /*右对齐*/
            /*text-align: left;*/    /*左对齐*/
            /*text-align: justify;  /*两端对齐*/

            /*text-decoration: underline;*/ /*添加下划线*/
            /*text-decoration: overline;*/    /*添加上划线*/
            /*text-decoration: line-through;*/  /*添加删除线*/
            /*text-decoration: none;*/
            /*在html中 有很多标签渲染出来的样式效果是一样的*/
            font-size: 16px;
            text-indent: 32px;   /*缩进32px*/
        }
        a {
            text-decoration: none;  /*主要用于给a标签去掉自带的下划线  需要掌握*/
        }

        

        4.)背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #d1 {
            height: 500px;
            background-color: red; /*将背景换成红色*/
        }
        #d2 {
            height: 500px;
            background-color: green;
        }
        #d3 {
            height: 500px;
            background-image: url("222.png");  /*使用图片作为背景默认是全填充*/
            background-repeat: no-repeat;        /*将图片设置成不填充*/
            background-attachment: fixed;       /*可以固定图片,比较流行*/
            background-position: 100px(center) 100px(center)     /*设置图片的的位置 center为居中*/
 /*如果出现了多个属性名前缀是一样的情况 一般情况下都可以简写 只写前缀*/

            background: red url("222.png") no-repeat center center;  

/*只需要填上你想要加的参数即可 位置没有关系 参数个数也不做限制 加就显示不加就用默认的设置*/
        }
        }
        #d4 {
            height: 500px;
            background-color: aqua;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</body>
</html>

        5.)边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>

        p {
            background-color: red;

            border-width: 5px;
            border-style: solid;
            border-color: green;

        }
        div {
            /*border-left-width: 5px;*/
            /*border-left-color: red;*/
            /*border-left-style: dotted;*/

            /*border-right-width: 10px;*/
            /*border-right-color: greenyellow;*/
            /*border-right-style: solid;*/

            /*border-top-width: 15px;*/
            /*border-top-color: deeppink;*/
            /*border-top-style: dashed;*/

            /*border-bottom-width: 10px;*/
            /*border-bottom-color: tomato;*/
            /*border-bottom-style: solid;*/
            border: 3px solid red;  /*三者位置可以随意写*/

        }
        #d1 {
            background-color: greenyellow;
            height: 400px;
            width: 400px;
            border-radius: 50%;  /*直接写50%即可 长宽一样就是圆 不一样就是椭圆*/
        }
    </style>
</head>
<body>
    <p>1111.png</p>
<div>text啊啊啊啊啊啊</div>
<div id="d1"></div>
</body>
</html>

6.)display属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /*#d1 {*/
        /*    !*display: none;  /*隐藏标签不展示到前端页面并且原来的位置也不再占有了 但是还存在于文档上*/
        /*    display: inline;  /*将标签设置为行内标签的特点*/
        /*}*/


        /*#d2 {*/
        /*    display: inline;*/
        /*}*/


        /*#d1 {*/
        /*    display: block;  /*将标签设置成块儿级标签的特点*/
        /*}*/


        /*#d2 {*/
        /*    display: block;*/
        /*}*/


        /*#d1 {*/
        /*    display: inline-block;*/
        /*}*/


        /*#d2 {*/
        /*    display: inline-block;  /*标签即可以在一行显示又可以设置长宽*/
        /*}*/
    </style>
</head>
<body>
<div style="display: none">div1</div>

<div>div2</div>

<div style="visibility: hidden">单纯的隐藏 位置还在</div>  

<div>div4</div>

<!--<div id="d1" style="height: 100px;width: 100px;background-color: red">01</div>-->

<!--<div id="d2" style="height: 100px;width: 100px;background-color: 
greenyellow">02</div>-->

<!--<span id="d1" style="height: 100px;width: 100px;background-color: red">span</span>-->

<!--<span id="d2" style="height: 100px;width: 100px;background-color: greenyellow">span</span>-->

<!--<div id="d1" style="height: 100px;width: 100px;background-color: red">01</div>-->

<!--<div id="d2" style="height: 100px;width: 100px;background-color: greenyellow">02</div>-->

</body>
</html>

        7.)盒子模型

"""
盒子模型
	就以快递盒为例
		快递盒与快递盒之间的距离(标签与标签之间的距离 margin外边距)
		盒子的厚度(标签的边框 border)
		盒子里面的物体到盒子的距离(内容到边框的距离  padding内边距)
		物体的大小(内容 content)
	
	
	如果你想要调整标签与标签之间的距离 你就可以调整margin
	
	浏览器会自带8px的margin，一般情况下我们在写页面的时候，上来就会先将body的margin去除
	
"""
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;  /*上下左右全是0
            /*margin: 10px 20px;  !* 第一个上下 第二个左右*/
            /*margin: 10px 20px 30px;  !*第一个上  第二个左右  第三个下*/
            /*margin: 10px 20px 30px 40px;  !*上 右 下 左*!*/
        }
        /*p {*/
        /*    margin-left: 0;*/
        /*    margin-top: 0;*/
        /*    margin-right: 0;*/
        /*    margin-bottom: 0;*/
        /*}*/

        #d1 {
            margin-bottom: 50px;
        }


        #d2 {
            margin-top: 20px;  /*不叠加 只取大的*/
        }

        #dd {
            margin: 0 auto;  /*只能做到标签的水平居中*/
        }
        p {
            border: 3px solid red;
            /*padding-left: 10px;*/
            /*padding-top: 20px;*/
            /*padding-right: 20px;*/
            /*padding-bottom: 50px;*/

            /*padding: 10px;*/
            /*padding: 10px 20px;*/
            /*padding: 10px 20px 30px;*/
            /*padding: 10px 20px 30px 40px;*/  /*规律和margin一模一样*/
        }
    </style>
</head>
<body>
<!--    <p style="border: 1px solid red;" id="d1">ppp</p>-->
<!--    <p style="border: 1px solid orange;" id="d2">ppp</p>-->
<!--<div style="border: 3px solid red;height: 400px;width: 400px">-->
<!--    <div id='dd' style="border: 1px solid orange;height: 50px;width: 50px;background-color: blue;"></div>-->
<!--</div>-->

<p>ppp</p>

</body>
</html>

        8.)浮动

"""浮动的元素 没有块儿级一说 本身多大浮起来之后就只能占多大"""
只要是设计到页面的布局一般都是用浮动来提前规划好
<style>
        body {
            margin: 0;
        }
        #d1 {
            height: 200px;
            width: 200px;
            background-color: red;
            float: left;  /*浮动  浮到空中往左飘*/
        }
        #d2 {
            height: 200px;
            width: 200px;
            background-color: greenyellow;
            float: right;   /*浮动 浮到空中往右飘*/
        }
</style>

mress
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS基础(3)_伪类选择器
no15870678621的博客
06-04 176
伪类选择器 伪类(不存在的类，特殊的类) 作用：伪类用来描述一个元素的特殊状态(比如第一个元素、被点击的元素、鼠标移入的元素...) 伪类一般情况下都是使用:开头 :first-child 选中第一个子元素 :last-child 选中最后一个子元素 :nth-child(n) 选中第n个子元素 里面的n值根据具体情况选填： n 第n个 n的范围表示0到正无穷 2n 或 even 第2n个 表示选中偶数位的元素 2n+1 或 odd 表示选中奇数位的元素 注意：以上这些伪类都是根据所有的子元素进行排
常用的一些 CSS 技巧二 — 选择器（伪类与伪元素）
lio-zero 的博客
03-26 905
你可以看看其他常用的 CSS 技巧： 常用的一些 CSS 技巧一 常用的一些 CSS 技巧三 CSS 重置盒模型 *, *::before, *::after { box-sizing: border-box; } 当与将所有元素边距减为零的重置规则或父规则一起使用时，这会将上边距应用于其他元素后面的所有元素。这是一种快速获得垂直节奏的方法。 * + * { margin-top: 1...
html两个类选择器嵌套,CSS层叠样式表--选择器
weixin_28841265的博客
06-03 1433
CSS的作用：用来设置网页结构样式。通过css给html标签设置属性来达到改变标签样式。选择器、盒子模型、浮动、定位1.CSS书写位置内嵌式写法:直接在head标签中创建style标签，在style标签中定义外链式写法:首先新建css文件，然后使用link标签引入使用，可引用多个1.css代码如下.div{color:red;font-size: 30px;}.one{color: blue;}在...
CSS伪类 和 伪元素 ,超详细的总结
qq_36825145的博客
08-04 564
用于选择不包含任何子元素的元素。在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小。是创建了一个新的元素，不存在于Dom文档中，真实不存在的，但又是一个可以装载内容的元素。在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。和伪类很像，元素就是标签 ，使用伪元素来表示元素中的一些特殊的位置。:before是Css2的写法，::before是Css3的写法。
HTML学习笔记（四）伪类选择器、伪元素选择器、分组与嵌套、即一些基本属性介绍
m0_51734025的博客
12-23 1494
下面是看了林海峰老师的视频的学习笔记来与大家分享 一、伪类选择器 伪类选择器这里主要是为大家介绍a标签与input标签的CSS样式，下面用简单的案例加注解为大家介绍 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a:link{ ...
css 双层伪元素,CSS-在伪元素内嵌套伪元素
weixin_33037313的博客
08-03 555
我有一个：before开头的'quote'和一个：after结束的quote。现在，我想要的是一个：after：after供“引用”参考，但我无法使其正常工作。有人知道这是否可能吗？到目前为止，我的代码：blockquote:before { content: '\201C'; }blockquote:after { content: '\201D'; }blockquote {font-size...
css嵌入样式元素,css伪元素怎么用在内嵌样式？
weixin_30745053的博客
08-04 2266
css伪元素可以直接在内嵌样式中使用，使用语法为：<style>选择器:pseudo-element{属性名:属性值;}</style>。然后直接通过选择器即可使用伪元素。伪元素是创造关于文档语言能够指定的文档树之外的抽象。例如文档语言不能提供访问元素内容第一字或者第一行的机制。伪元素允许设计师引用它们，否则这是难以办到的。伪元素还提供样式设计师给在源文档中不存在的内容分配...
css选择器_动力节点Java学院整理
09-24
元素选择器直接使用元素的标签名，不区分大小写。它用于选取文档中所有该类型的元素。例如： ```css h2 { background-color: Green; } ``` 4. **复合选择器**： 复合选择器允许组合多个选择器，将它们用逗号...
高效的CSS选择器编写指南
09-25
1. **选择器优先级与效率**： - **ID选择器 (#id)**：拥有最高的优先级，也是最快的。在CSS中，ID是唯一的，所以浏览器可以迅速定位到对应的元素。 - **类选择器 (.class)**：次于ID选择器，但依然高效。由于类...
react-React组件的css选择器
08-15
内联样式（style属性）的优先级最高，接着是ID选择器，然后是类选择器、属性选择器和元素选择器。合理利用优先级可以更好地控制组件的样式覆盖。 7. **伪类和伪元素** 伪类（如`:hover`, `:active`, `:focus`）和...
css选择器练习代码1
01-31
- 如Sass和Less，允许创建更复杂的选择器结构，如嵌套选择器和变量，提高代码可维护性。 在`css-selector--master`这个项目中，你可能找到了关于这些选择器的实例和练习，通过实践，你可以更好地理解它们的用法并...
[Sass]嵌套
weixin_33922670的博客
12-09 381
[Sass]嵌套-选择器嵌套 Sass 中还提供了选择器嵌套功能，但这也并不意味着你在 Sass 中的嵌套是无节制的，因为你嵌套的层级越深，编译出来的 CSS 代码的选择器层级将越深，这往往是大家不愿意看到的一点。这个特性现在正被众多开发者滥用。 选择器嵌套为样式表的作者提供了一个通过局部选择器相互嵌套实现全局选择的方法，Sass 的嵌套分为三种： 选择器嵌套 属性嵌套 伪类...
css伪类的组合用法
weixin_30562507的博客
04-19 239
利用伪类组合，可以用css代替js以达到目的，少些一下js .textarea:empty:before { display: block; content: '请输入'; color: #ababab; font-size: 15px; text-align: left; }//表示：当textarea元素为空时即没有输入时，有“请输...
CSS中两个伪类同时使用注意
weixin_43927310的博客
04-08 2113
如果一个人忘了当初出发的目的，那他便不再配得上其他人期待的目光。永远别忘了当初是背着梦想出发的，什么时候把梦想放下了，这段路也就到了终点了
DIV+CSS 学习心得：分组，嵌套，伪类，伪元素
xiaoyanzi2008的专栏
10-11 1388
这次说的东东，基本是CSS样式里写法的一些细节和技巧问题了，因为我也只初学，也不一定说的就全是对的，具体问题具体对待，您还得自己研究之后消化了才行。 　　样式相同的定义是可以分组的，下面例子中，两种写法效果是一模一样的，使用分组的方法可以简化css代码，只需要将不同的样式定义名
Sass--伪类嵌套
weixin_34209851的博客
05-21 1036
其实伪类嵌套和属性嵌套非常类似，只不过他需要借助`&`符号一起配合使用。 a { &:link, &:visited { color: blue; } &:hover { color: orange; } &:active { color:...
css中伪类:after的用法(三种方式)
热门推荐
acm765152844的博客
05-08 1万+
CSS中存在一些比较特殊的属性，称之为伪类，它们之中最常用的就是定义链接的伪:link，:visited，:hover，:active等。 除了它们，还有一些不被常使用的伪类，有:focus，:first-child，:lang等。 而且CSS里不光有伪类，还有伪元素，比如：:first-letter，:first-line，:before和:after。 本文中其它伪元素暂且不表
CSS变量的语法、特性和细节
最新发布
读心悦
08-16 378
CSS变量（也称为CSS自定义属性）是一种在CSS中存储值，然后在整个文档中复用的方法。它们提供了一种强大的方式来组织和重用样式值，使得维护和更新样式变得更加容易。下面将详细介绍CSS变量的语法、特性和一些细节。
css中类选择器优先级
07-07
4. **标签选择器 ( element ) 和伪类/伪元素选择器 ( :hover, :active 等)**：一般类选择器的优先级高于这些通用选择器。 如果你有多层嵌套或者使用了后代选择器 ( > ) 或者相邻兄弟选择器 ( + ), 选择器组合的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值