当前位置:首页 > 软件开放 > 正文内容

css不换行代码(html中不换行的代码)

软件开放1个月前 (05-20)209

CSS是前端重要的组成部分,它能帮助我们通过选择器给标签添加各种样式效果。大家可能工作中最常用的选择器都是id、class以及标签选择器,但是当面对一些复杂的项目场景时,仅仅用这几个基础选择器去操作就会很麻烦。为了在开发中更加得心应手,本文我们就来看看CSS中的选择器都有哪些以及如何去灵活运用。

一、初级选择器

1.1 基础选择器

通配符(*)选择器

语法:*{属性:属性值;}

说明:*表示页面中所有的元素(标签),我们常用来重置样式。

实例:

*{

margin: 0;

padding: 0;

}

标签(元素)选择器

语法:标签名{属性:属性值;}

说明:标签选择器就是使用结构中元素名称直接作为选择符。

实例:

div{

width: 100px;

height: 100px;

}

css不换行代码(html中不换行的代码)

类(class)选择器

语法:.class名{属性:属性值;}

说明:当我们使用类选择器时,需要先为相应的元素添加class属性。他的属性值就是我们要使用类名。

实例:

h1 class="title"标题1/h1

展开全文

h2 class="title"标题2/h2

.title {

color: red;

}

注意:类名要尽量使用英文表示,不能使用数字或中文命名,并且尽量起一些有意义的名字,让别人能一眼看出来这个类名的作用。

类名可以有多个,多个类名之间要使用空格隔开。我们可以把一些标签元素相同的样式放到一个类调用,从而节省CSS代码,例如版心可以写统一样式。

id选择器

语法:#id名{属性:属性值;}

说明:id选择器是使用元素身上的id属性作为选择符。所以想要使用id选择器,需要先为元素上定义id属性。

实例:

div id="box"/div

定义好id之后就可使用#box给对应的div上添加:

#box {

width: 100px;

height: 100px;

background-color: pink;

}

注意:起id名时不能用关键字(所有标签和属性都是关键字),并且一个id名称只能对应文档中一个具体的元素对象,因为id的特殊性,只能代表页面中某一个唯一的元素对象,就好比我们的身份证号,一个人只能对应一个唯一的id。

1.2 结构选择器

后代(包含)选择器

语法:选择器1(父) 选择器2(子){属性:属性值;}

说明:选择器1和选择器2中间用空格隔开,表示选择选择器1中包含选择器2的所有后代元素。

实例:

div class="box"

h2标题1/h2

p段落1/p

p段落2/p

/div

.box p {

color: red;

}

子代选择器

语法:选择器1选择器2{属性:属性值;}

说明:用来选择紧挨着选择器1(父元素)的第一层符合选择器2的子元素。

实例:

div class="box"

h2标题1/h2

div

h2标题2/h2

/div

/div

.box h2 {

color: red;

}

全部兄弟选择器

语法:选择器1~选择器2{属性:属性值;}

说明:选择当前元素所有符合条件的兄弟元素。

实例:

div class="box"

h2标题1/h2

p段落/p

h2标题2/h2

h2标题3/h2

/div

p ~ h2 {

color: red;

}

注意:只能选中当前元素后面的元素。

相邻兄弟选择器

语法:选择器1+选择器2{属性:属性值;}

说明:选中当前元素紧挨着的后面的兄弟元素。

实例:上面的案例修改成:

p + h2 {

color: red;

}

注意:只能选中当前元素后面的元素,如果没有紧挨着当前元素就不会产生效果。

并集(群组)选择器

语法:选择器1,选择器2{属性:属性值;}

说明:用于对多个标签定义同样的样式,选择器之间用逗号分隔。

实例:这里我们依然用上述的结构:

p,

h2 {

color: red;

}

交集选择器

语法:选择器1选择器2{属性:属性值;}

说明:用于选择同时符合选择器1和选择器2条件的元素。

实例:

h2 class="title"标题1/h2

h2标题2/h2

h2.title {

color: red;

}

二、属性选择器

属性选择器是通过元素的属性以及属性值来选择对应元素的,属性名我们可以自己定义。

属性的或运算

语法:选择器[属性名]{属性:属性值;}

说明:只要选择器元素中有当前属性就会被选中。

实例:

h2 class="title" name标题1/h2

h2标题2/h2

.title[name] {

color: red;

}

属性的与运算

语法:选择器[属性1][属性2]{属性:属性值;}

说明:选择同时包含属性1和属性2的元素。

实例:

h2 class="title" name标题1/h2

h2 name标题2/h2

h2[name][class] {

color: red;

}

属性值的筛选

语法:选择器[属性名='要求']{属性:属性值;}

说明:选择对应的属性值符合要求的元素。

实例:

h2 class="title" name标题1/h2

h2 class="title2" name标题2/h2

h2[class='title'] {

color: red;

}

前缀筛选^

语法:选择器[属性名^='要求']{属性:属性值;}

说明:选择属性值以当前要求开头的元素。

实例:

h2 class="title"标题1/h2

h2 class="title2"标题2/h2

h2 class="stitle"标题3/h2

h2[class^='tit'] {

color: red;

}

后缀筛选$

语法:选择器[属性名$='要求']{属性:属性值;}

说明:选择属性值以当前要求结尾的元素。

实例:这里我们使用上述的结构:

h2[class$='tle'] {

color: red;

}

包含限定*

语法:选择器[属性名*='要求']{属性:属性值;}

说明:选择属性值包含当前要求的元素。

实例:这里我们使用上述的结构:

h2[class*='title'] {

color: red;

}

包含限定~

语法:选择器[属性名~='要求']{属性:属性值;}

说明:选择属性值包含一个给定要求词(单独存在)的元素。

实例:

h2 class="title"标题1/h2

h2 class="xx title xx"标题2/h2

h2 class="stitle"标题3/h2

h2[class~='title'] {

color: red;

}

包含限定|

语法:选择器[属性名|='要求']{属性:属性值;}

说明:选择属性值只有给定要求或者是以给定要求开头后面用“-”拼接其他字符串的元素。

实例:

h2 class="title"标题1/h2

h2 class="title-xx"标题2/h2

h2 class="title.xx"标题3/h2

h2 class="xx-title"标题4/h2

h2[class|='title'] {

color: red;

}

三、伪类选择器:

CSS伪类选择器用于像某些元素添加特殊效果,比如第一个元素、某个元素的子元素、鼠标滑过的元素。

3.1 动态伪类选择器

动态伪类选择器在日常工作中主要用于超链接标签。

说明:前4个超链接伪类选择器联合使用时,就注意他们的顺序,a:hover必须在a:link和a:visited之后,a:active必须在a:hover之后。错误的顺序有时会使超链接的样式失效。

a:link{color:red;} /* 未访问的链接状态 */

a:visited{color:green;} /* 已访问的链接状态 */

a:hover{color:blue;} /*鼠标滑过链接状态*/

a:active{color:yellow;} /*鼠标按下去时状态*/

3.2 结构伪类选择器

结构伪类指利用页面的布局结构选择响应的元素。

注意:结构伪类选择器中,子元素的序号是从1开始的,所以,当参数n的计算结果为0 时,将不选择任何元素。

3.3 其他伪类选择器

四、伪元素选择器::

伪元素选择器可以帮助我们利用CSS创建新的标签元素(伪元素),从而达到简化结构的目的。

注意:利用before和after创建的元素属于行内元素,而这个元素我们不能在结构中看到,所以称它为伪元素。

五、选择器权重

在CSS中我们用四位数字表示选择器的权重,方便我们去判断样式的优先级。

当权重相同时,样式遵循就近原则,CSS中哪个选择器最后定义,就执行哪个选择器的样式。

!important代表权重最高(最终的样式)。

background-color:skyblue!important;

所以最终样式的优先级应该为:

!important行内样式id选择器class选择器=伪类选择器=属性选择器标签选择器=伪元素选择器通配符选择器继承样式。

总结

以上就是为大家总结的CSS选择器的种类及功能。总的来说,碰到各种各样的工作场景,我们需要灵活运用这些选择器,并且当选择器样式冲突时,我们就得及时发现并且完成权重的解析从而解决问题。解析规则大致如下:

当不同选择器的样式设置有冲突时,高权重选择器的样式会覆盖低权重选择器的样式。

相同权重的选择器,样式遵循就近原则。哪个选择器样式最后定义,就会采用哪个样式。

需要注意,CSS具有继承性,即子标签会继承父标签的某些样式。但是继承样式没有权重。所以在嵌套结构中,不管父元素样式的权重多大,在子元素定义的样式都会覆盖继承来的样式。

扫描二维码推送至手机访问。

版权声明:本文由飞速云SEO网络优化推广发布,如需转载请注明出处。

本文链接:http://zspsrg.cn/post/115717.html

分享给朋友:

“css不换行代码(html中不换行的代码)” 的相关文章

交易猫怎么卖梦幻西游手游(交易猫怎么卖梦幻西游手游账号)

交易猫怎么卖梦幻西游手游(交易猫怎么卖梦幻西游手游账号)

本篇文章给大家谈谈交易猫怎么卖梦幻西游手游,以及交易猫怎么卖梦幻西游手游账号对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、网易梦幻西游手游手机账号应该怎么出售啊?在交易猫交易因为是手机账号,交易失败了 2、梦幻西游手游在哪卖号 3、梦幻西游手游死绑号哪里买...

木马软件怎么盗取通讯录(木马软件怎么盗取通讯录信息)

木马软件怎么盗取通讯录(木马软件怎么盗取通讯录信息)

本篇文章给大家谈谈木马软件怎么盗取通讯录,以及木马软件怎么盗取通讯录信息对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、手机微信扫描二维码木马病毒,通讯录信息会被盗吗 2、现在骗子通过一个软件能把手机上全部号码盗走吗 3、诈骗软件能获取微信通讯录 4、当心手机...

怎么删除home下的目录(误删home目录)

怎么删除home下的目录(误删home目录)

今天给各位分享怎么删除home下的目录的知识,其中也会对误删home目录进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、执行home命令可以删除目录吗 2、如何删除红帽Linux的/home下的文件 3、/home 目录下的文件如下图所示,请问如要要...

源码商城交易平台源码支付宝(源码交易网)

源码商城交易平台源码支付宝(源码交易网)

本篇文章给大家谈谈源码商城交易平台源码支付宝,以及源码交易网对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、找一个网上商城源码 2、商城怎么链接上支付宝支付! 3、支付宝的订单系统怎么弄啊PHP源码 4、支付宝支付页面iapp源码求谁有 5、支付宝源代码?...

es文件浏览器怎么看电脑视频(手机es文件浏览器怎么看视频)

es文件浏览器怎么看电脑视频(手机es文件浏览器怎么看视频)

本篇文章给大家谈谈es文件浏览器怎么看电脑视频,以及手机es文件浏览器怎么看视频对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、es文件浏览器 如何连续播放局域网视频? 2、如何在es文件浏览器打开人人视频 3、如何用ES文件浏览器 看电脑里面的文件 4、es...

怎么查看自己申请过的邮箱(怎么查邮箱申请时间)

怎么查看自己申请过的邮箱(怎么查邮箱申请时间)

今天给各位分享怎么查看自己申请过的邮箱的知识,其中也会对怎么查邮箱申请时间进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、我注册了自己的邮箱.在哪去看我的邮箱? 2、我申请了邮箱,怎么能看到啊我想查看我的邮箱应该怎么查 3、如何知道自己的邮箱 注册过...