CSSS选择器总结[通俗易懂]

CSSS选择器总结[通俗易懂]title:CSSS选择器总结date:2018073020:11:07tags:css在css的学习中有一个很容易让人混乱的就是css选择器,因为选择器有很多种,而且在使用的时候有

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺


title: CSSS选择器总结
date: 2018-07-30 20:11:07
tags: css

在css的学习中有一个很容易让人混乱的就是css选择器,因为选择器有很多种,而且在使用的时候有些类似,有些却相差很远。那么本文就对css选择器,作为一个集中的总结梳理。(注:文中代码因篇幅有限仅写出关键部分代码)

CSSS选择器总结[通俗易懂]

id和class

  • id

在元素的属性里加上id标签,然后用“#+id名选择”,如

 #z {text-align:center;}   <p id="z">id标签</p>
  • class

在元素的属性里加上class标签,然后用”.class名称”选择所有具有相同class名称的元素。如:

  .center {text-align:center;}
  <h1 class="center">flytree</h1>
  <p class="center">this line an h1 are centered</p>
  <!--也可使特定的元素使用class,如:-->
  p.center {text-align:center;}
  <h1 class="center">flytree</h1>
  <p class="center">only this line is centered</p>
  • 混合

当id和class选择的是同一元素的相同属性时,显示id的效果,如:

<style>
.center
{
	*text-align:center;*
}
#z {text-align:right;}
</style>
</head>
<body>
<h1 id="z" class="center">同一属性,显示id选择的效果</h1>
</body>

分组和嵌套

  • 分组

当多个元素有共同的css样式描述时可以使用分组减少代码,如:

#a,#b,#c {color:blue;}
<p id="a">text</a>
<p id="b">test</a>
<p id="c">text</a>
  • 嵌套

当要操作元素内部的子元素时可以使用嵌套来进行操作,如:

div p {text-align:center;}
<div>
<p>name</p>
</div>

组合选择符

  • 后代选取器

以空格分隔,选取改元素的所有后代,其实就是嵌套的选择的格式啦,如:

div p {text-align:center;}
<div>
<div> <p>name</p> </div>
<p>age</p>
</div>

则name和age都会居中,选择的只要是后代就行,可以是子元素的子元

  • 子元素选择器

以大于号分隔,子选取元素的直接后代,如:

div>p {text-align:center;}
<div>
<div> <p>name</p> </div>
<p>age</p>
</div>

则只有age会居中显示

  • 相邻兄弟选择器

以加号分隔,若元素有共同的父元素,则可以选择紧接在另一元素后的元素,如:

div+h1 {color:blue;}
<div>
<p>name</p>
<p>age</p>
</div>
<h1>test</h1>

则test的颜色会为蓝色

  • 普通兄弟选择器

以波浪号分隔,若元素有共同的父元素,选取所有指定元素之后的相邻兄弟元素,如:

div~p {color:blue;}
<div>
<h1>test</h1>
</div>
<p>name</p>
<p>age</age>

则name和age都会被选择变为蓝色。

属性选择符

  • 简单属性选择

[属性]使用,无论什么属性,该选择器会选择所有具有该属性的元素,如:

a[href] {color:green;}
<a href="http://www.baidu.com">baidu</a>

则所有具有href属性的元素都会被选择,baidu和sina就会为绿色。

可以选择多属性,如:

a[href][title] {color:green;}
<a href="http://www.baidu.com" title="baidu">百度</a>
<a href="http://www.sina.com">sina</a>

则只有”百度“会变绿。

  • 属性值选择

选择具体到属性的具体属性值,如:

a[href="http://www.baidu.com"] {color:green;}
<a href="http://www.baidu.com">baidu</a>
<a href="http://www.sina.com">sina</a>

则只有baidu会变绿。

也可以选择多个属性值,如:

a[href="http://www.baidu.com"][title="baidu"]
{background-color:green;}
<a href="http://www.baidu.com" title="baidu">百度</a>
<a href="http://www.sina.com">sina</a>

则只有”百度“会变绿。

  • 属性,属性值部分匹配

可以用波浪号”~“只匹配部分进行选择(可以想成约等于),如:

img[title~="a"] {border:1px solid black;}
<img src="z.jpg" title="a">
<img src="z.jpg" title="a 1"/>
<img src="z.jpg" title="a 2"/>
<img src="z.jpg" title="a_2"/>

前三行都会匹配,但是a_2不匹配(要用子串匹配属性选择器)。

  • 子串匹配属性选择器

    CSSS选择器总结[通俗易懂]

伪类和伪元素

  • 伪类

应用在链接里的伪类

a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}

first-child伪类

CSSS选择器总结[通俗易懂]

  • 伪元素

first-line:

用于相文中首行设置样式,且只应用于块级元素,可设置的属性有:

font

color

background

word-spacing

letter-spacing

text-decoration

vertical-align

text-transform

line-height

clear

first-letter:
用于设置文本首个字符的样式,且只能用于块级元素,可设置的属性有:

font

color

background

margin

padding

border

text-decoration

text-transform

vertical-align (仅当 float 为 none 时)

clear

line-height

float

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/166480.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • HarborV2.2.2安装

    HarborV2.2.2安装

  • qcustomplot添加图例_qchart显示点数据

    qcustomplot添加图例_qchart显示点数据【实例简介】QCustomPlot动态绘图,解决CPU占用内存高问题【实例截图】Qt动态实时绘图【核心代码】LXTracer::LXTracer(QCustomPlot*_plot,TracerType_type,QObject*parent):QObject(parent),m_plot(_plot),m_type(_type){m_visible=true;m_tracer=…

  • 阿里云ddns过程记录

    阿里云ddns过程记录申请了阿里云一年的动态域名,收费的,闲置了几个月,用openwrt一直没成功,最近研究asterisk部署,有个公网的ddns还是方便不少,所以把闲置的域名得拾起来了,过程如下1.开启阿里云后台权限(在访问控制菜单中,文章最后有链接)AliyunDNSReadOnlyAccessAliyunDNSFullAccess2.下载脚本运行GitHub-risfeng/aliyun-ddns-shell:阿里云域名解析动态更新IPShell脚本阿里云域名解析动态更新IPSh

  • CPD 算法实现点云配准(python版本)[通俗易懂]

    CPD 算法实现点云配准(python版本)[通俗易懂]CoherentPointDrift相干点漂移算法实现点云配准(python代码)

  • Java获取当前年月日、时间[通俗易懂]

    Java获取当前年月日、时间[通俗易懂]两种方法,通过Date类或者通过Calendar类。Date类比较简单,但是要得到细致的字段的话Calendar类比较方便。importjava.text.DateFormat;importjava.text.SimpleDateFormat;importjava.util.Calendar;importjava.util.Date;importjava.util.L

    2022年10月21日
  • phpstorm 2022.01.13 激活【2021最新】

    (phpstorm 2022.01.13 激活)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~0HKLM1UCCY-eyJsaWNlbnNlSWQiOi…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号