css中nth-of-type如何选择3-4

2024-08-29

CSS3 :nth-of-type() 选择器

可以设定第几个元素的样式案例 css .qrcode img { margin-top: 30px; } .qrcode p:nth-of-type(1) { /*第一个p*/ font-size: 16px; color: #b03305; } .qrcode p:nth-of-type(2) { /*第二个p*/ font-size: 14px; color: #777; } html <div class="qrcode" id="qrcDiv">

CSS 中常用的选择器（选择符）

一.标签选择器:直接将HTML标签(Tag)作为选择器,可以是p.h1.dl.strong等HTML标签.如: p { font:12px;}em { color:blue;}dl { float:left; margin-top:10px;} 二.id选择器:我们通常给页面元素定义id.例如定义一个层 <div id="menubar"></div> 然后在样式表里这样定义: #menubar{margin:0 auto;background:#ccc;col

CSS3 nth-child的使用，详解css中nth的作用，以及nth-child的兼容写法

:nth-child是css3的一个比较常用的选择器.它用于匹配属于其父元素中的子元素,不论元素的类型. 它的参数可以是数字.关键词或公式.下面讲介绍它的使用方法, nth-child的使用 html结构如下: <div class="demo"> <p></p> <p></p> <p></p> <p></p> </div> 只选取第2个元素 .demo p:nth-

CSS 中定位的使用

position relative 设置区块基准点为左上角(相对定位以区块的左上角为基准点仍然会暂居原来的位置) a.不影响元素本身的特性: b.不使元素脱离文档流: c.如果没有定位偏移量,对元素本身没有任何影响: 定位元素位置控制 top/right/bottom/left 定位元素偏移量. absolute 设置网页的为基准点左上角(绝对定位以网页的左上角为基准点不会暂居原来的位置) a.使元素完全脱离文档流: b.使内嵌元素支持宽高: c.块属性标签内容撑开宽度(在没有设置宽的情

CSS中link与import的区别

一.import的用法 1,在html文件中 <style type="text/css"> @import url(http://www.dreamdu.com/style.css); </style> 2,在css文件中 @import url("CSS文件"); 对@import url()做一下总结: 1,@import url()机制是不同于link的,link是在加载页面前把css加载完毕,而@import url()则是读取完文

CSS中设置margin:0 auto; 水平居中无效的原因分析

很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题,margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应,其实就是水平居中的意思,在这里说两个典型的错误引起的不能居中的问题: 1.没有设置宽度 <div style="margin:0 auto;"></div> 看看上面的代码,根本没有设置DIV的宽度,如何根据宽度自适应呢?新手比较容易忽略的问题. 2.没声明DOCTY

CSS中的偏僻知识点

一.css中的calc 在CSS中有calc属性用于尺寸的计算,可以让百分比和像素值进行运算. div {width : calc(100% - 30px);} 为了兼容性 /*Firefox*/ -moz-calc(expression); /*chrome safari*/ -webkit-calc(expression); 需要注意:减号前后必须有空格. 在less中, div { @diff : 30px; width : calc(~"100% - @{diff}"); or

关于CSS中的float可能出现的小问题

关于CSS中的float可能出现的小问题前言:最近学习CSS的float所遇到点小问题,然后顺便分享给大家. 一.什么是CSS以及float (一) CSS概述 CSS是层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化. (二) float概述 float属性定义元素在哪个方向浮动.

CSS中的一些内容总结

一.选择器 1.选择器的分组:一个Style可以对多个选择器生效,只用在不同的选择器中间加入逗号即可.如: h1,h2,h3,h4,h5,h6 { color: green; } PS:CSS规定,所有子元素继承父元素的属性.但是对子元素的Style做修改后,就会覆盖父元素的属性. 2.派生选择器通过元素的上下文关系去选择元素,不同级别的元素使用空格隔开即可,表示选择空格前的元素中后代元素为空格后的内容的元素.如: li strong { font-style: italic; font-we

认识CSS中css引入方式、选择器、文本样式设置以及显示模式

前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部样式表,外部样式表. 行内样式:通过标签的style属性设定样式,基本语法:<标签名 style="属性1:属性值1:属性2:属性值2:...">内容</标签名>. <!DOCTYPE html> <html> <head> &l

CSS中的样式层叠机制Cascade

CSS中的样式层叠机制Cascade 一.样式冲突样式冲突是CSS渲染过程要解决的一个关键问题,样式冲突主要由两个原因造成: 元素包含了不同对象所赋予的样式:浏览器.用户.作者.其中,浏览器样式是指不对元素赋予样式时,元素所表现出来的样式,也就是浏览器赋予的元素默认样式:用户样式是指用户通过浏览器插件设定的样式,比如色弱者会对文字颜色进行修改:作者样式只是程序员所编写的CSS样式. 程序员经常会在CSS中对同一元素进行重复定义,这往往是因为程序员整体局部的样式编写习惯造成的,当然这是好的习

纯html+css中实现静态选座位效果技巧（input+label使用小技巧）

很多时候,我们想通过html+css的方式实现排列在后方的代码在选中状态下,能控制排列在前的代码的样式.那么要怎么实现呢?在这里我就要用1个小技巧来完成. 众所周知的,我们css中的选择器通常只能向下或者同级向下选中,而不能向上选中,这样就对于想控制前面样式的时候带来麻烦.input+label关联的方式即可实现,因为input和label是通过id值来进行关联的,而html中规定了,id值必须唯一,那么我将input放置在html的body下的任意位置,均可实现关联,所以为了实现后方代码控制前

css3笔记系列-3.css中的各种选择器详解，不看后悔系列

点击上方蓝色字体,关注我最详细的css3选择器解析选择器是什么? 比较官方的解释:在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器. 看代码,元素选择器就是这个: h1作为一个元素标签,是最基本的选择器,这样可以对h1标签设置属性. 选择器有哪些? 常见的选择器:元素选择器,类选择器,ID选择器,属性选择器,派生选择器,本文的思路就是先讲讲最常用的选择器,再讲讲用得比较少的选择器.如果你觉得能学到

CSS中居中的完全指南（中英对照翻译）

翻译自:https://css-tricks.com/centering-css-complete-guide/ Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn't that it's difficult to do, but in that there so many different

css中几个重要概念

替换元素与非替换元素替换元素:是指浏览器根据元素的标签和属性来决定元素的具体内容. 例如"<img src="xx.jpg">浏览器会根据标签的src属性的值来读取图片信息并显示,<input type="radio">浏览器会根据input标签的type属性来决定是显示输入框还是单选按钮非替换元素:其内容直接显示在客户端的元素叫非替换元素 <h1>shizai</h1> <div>shash

如何在CSS中使用变量

前言 CSS变量(官方称为自定义属性)是用户定义的值,它可以在你的代码库中设置一次并多次使用.它们使管理颜色.字体.大小和动画值变得更加容易,并确保整个web应用的一致性. 举个例子,你可以将品牌颜色设置为一个CSS属性(--primarycolor: #7232FA),并在任何使用品牌颜色的组件或样式中使用这个值(background: var(--primarycolor);). 除了更加简洁以及不重复的代码,CSS变量可用于构建调色板,提高响应能力,并创建动态类型系统. 定义CSS变量要

对CSS中的Position、Float属性的一些深入探讨

对CSS中的Position.Float属性的一些深入探讨对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不清晰的地方.本文主要对这两个属性使用上的一个介绍以及两个属性交叉使用上的一些探讨. 本文主要探讨点: Position.Float属性的基本使用方法 Position.Float属性对元素所造成的影响 Position.Float属性交叉使用上面的影响 Position.Float属性使用上的小技巧

总结一下CSS中的定位 Position 属性

在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位.元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定. relative:生成相对定位的元素,相对于其

CSS中一些常见的兼容性问题

CSS中一些兼容性问题就是浏览器兼容,而这些浏览器兼容问题主要是Ie和FF之间的争斗. CSS hack中的一些事: 我们为了让页面形成统一的效果,要针对不同的浏览器或不同版本写出对应可解析的CSS样式,所以我们就把这个针对不同浏览器/版本而写CSS的过程叫做 CSS hack. CSS hack主要有三种:IE条件注释法.CSS属性前缀法.选择器前缀法. (1)IE条件注释法,即在正常代码之外添加判别IE浏览器或对应版本的条件注释,符合条件的浏览器或者版本号才回执行里边的代码. 1 <!--[

css中“~”和“>”是什么意思？

css中"~"是: 为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置背景: p~ul{ background:#ff0000; } <p>快乐生活</p> <ul> <li>生活</li> <li>生活</li> <li>生活</li> </ul> p~ul 选择前面有 <p> 元素的每个 <ul> 元素. 定义和用法

CSS中"!important"的使用

本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22:23:22) CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < 元素style中的属性,但是如果使用!important,事情就会变得不一样. 首先,先看下面一段代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content

css中nth-of-type如何选择3-4

热门专题