css常用选择器总结

作者:神秘网友 发布时间:2021-03-10 12:20:01

css常用选择器总结

前言:我们在码代码的时候,经常会遇到需要给第一个或者最后一个元素添加或删除样式,还有一些比较特殊的是选取第几个元素添加或删除样式,下面记录css选择器中常见的选择器:相邻兄弟选择器(+)、子选择器()、兄弟选择器(~)、first-child、:last-child、:nth-child()、:nth-last-child()的用法。

相邻兄弟选择器(+)

相邻兄弟选择器可选择紧接在另一个元素后的元素,且二者具有相同的父亲元素。注释:与子结合符一样,相邻兄弟结合符旁边可以有空白符。
器。

!DOCTYPE html
html
head
    meta http-equiv="Content-Type" content="text/html; charset=utf-8"
    title相邻兄弟选择器/title
    style type="text/css"
        h1+p{
            color:red;
        }
    /style
/head
 
body
    pHello word!/p
    pHello word!/p
    h1Hello word!/h1
    pHello word!/p
    pHello word!/p
    pHello word!/p
    pHello word!/p
/body
/html

效果图如下:

相邻兄弟只会影响下面的p标签的样式,不影响上面兄弟的样式。

注意这里的’+’的意义跟’and’意义不一样,兄弟选择器的样式是应用在兄弟元素上,跟参照的元素样式无关,如上例只影响p元素的样式,而不影响h1标签的样式。

当然这个也会循环查找,即当两个兄弟元素相同时,会再一次循环查找:

示例:

style type="text/css"
    li + li {
        color:red;
    }
/style

div
  ul
    liList item 1/li
    liList item 2/li
    liList item 3/li
  /ul
/div

可以看出第一个li字体颜色没有变红,第二个和第三个元素字体变红,这就是因为第三个li是第二个li的兄弟元素,所以也会应用样式。

兄弟选择器(~)

作用是查找某一个指定元素的后面的所有兄弟结点
示例代码:

style type="text/css"
    h1 ~ p{
        color:red;
    }
/style
/head
body
    p1/p
    h12/h1
    p3/p
    p4/p
    p5/p
/body

效果展示:

后代选择器(包含选择器)

可以选择某元素后代的元素(子子孙孙元素)

子选择器()

只能选择作为某元素儿子元素的元素,不包括孙元素、曾孙元素等等等。

后代选择器,子选择器和相邻兄弟选择器结合使用示例:

请看下面这个选择器:

html  body table + ul {margin-top:20px;}

这个选择器解释为:选择紧接在 table 元素后出现的第一个相邻兄弟 ul 元素,该 table 元素包含在一个 body 元素中,body 元素本身是 html 元素的子元素。

:first-child 选择器

li:first-child
{
background:yellow;
}
ul
  li咖啡/li
  li茶/li
  li可口可乐/li
/ul

ol
  li咖啡/li
  li茶/li
  li可口可乐/li
/ol

效果图

值得注意的是,如果其父元素的第一个元素(p)不是该指定类型元素(li),则第一个元素不会有样式

li:first-child
{
background:yellow;
}
ol
  p测试/p
  li咖啡/li
  li茶/li
  li可口可乐/li
/ol

效果图

:last-child选择器

:last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。

提示:p:last-child 等同于 p:nth-last-child(1)。

eg:指定属于其父元素的最后一个子元素的 p 元素的背景色:

p:last-child
{ 
background:#ff0000;
}
body
	h1这是标题/h1
	p第一个段落。/p
	p第二个段落。/p
	p第三个段落。/p
	p第四个段落。/p
	p第五个段落。/p
/body

效果:

说明:p标签的父元素是body,body标签中最后一个p元素是第五个段落

:nth-child()

:nth-child() 选择器,该选择器选取父元素的第 N 个子元素,与类型无关

p:nth-child(2)
{
background:#ff0000;
}
body

h1这是标题/h1
p第一个段落。/p
p第二个段落。/p
p第三个段落。/p
p第四个段落。/p

pb注释:/bInternet Explorer 不支持 :nth-child() 选择器。/p

/body

:nth-child()的详细用法

nth-child(3) 表示选择列表中的第三个元素。

nth-child(2n)表示列表中的偶数标签,即选择第2、第4、第6……标签

nth-child(2n-1) 表示选择列表中的奇数标签,即选择 第1、第3、第5、第7……标签

nth-child(n+3) 表示选择列表中的标签从第3个开始到最后(=3)

nth-child(-n+3) 表示选择列表中的标签从0到3,即小于3的标签(=3)

nth-last-child(3) 表示选择列表中的倒数第3个标签

:nth-of-type(n)

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

n 可以是数字、关键词或公式。

p:nth-of-type(2)
{
background:#ff0000;
}
body

h1这是标题/h1
p第一个段落。/p
div测试/div
p第二个段落。/p
p第三个段落。/p
p第四个段落。/p
p第五个段落。/p

/body

效果图:

:nth-last-child() 选择器

:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。

n 可以是数字、关键词或公式。

提示:请参阅 :nth-last-of-type() 选择器,该选择器选取父元素的第 N 个指定类型的子元素,从最后一个子元素开始计数。

CSS3 :not 选择器

:not(selector) 选择器匹配非指定元素/选择器的每个元素。

更多css选择器请参考:CSS 选择器参考手册
http://www.w3school.com.cn/cssref/css_selectors.asp

csss属性选择器

选择器 示例 示例说明
[attribute] [target] 选择所有带有target属性元素
[attribute=value] [target=-blank] 选择所有使用target="-blank"的元素
[attribute~=value] [title~=flower] 选择标题属性包含独立单词"flower"的所有元素
[attribute ^= language] [lang ^= en] [lang ^= en] 选择一个lang属性的起始值="EN"的所有元素
[attribute $= language] [lang $= en] 选择一个lang属性的结尾值="EN"的所有元素
[attribute *= language] [lang *= en] 选择一个lang属性的包含"EN"的所有元素

关于CSS属性选择器中“~=”和“*=”的区别

"value是完整单词" 类型的比较符号: ~= , |=

"value是拼接字符串" 类型的比较符号: *= , ^= , $=

[attribute~=value] 属性中包含独立的单词为value

[title~=flower]  
img src="/i/eg_tulip.jpg" title="tulip flower" /

[attribute*=value] 属性中做字符串拆分,只要能拆出来value这个词就行

[title~=flower]  
img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" /

伪类选择器

伪元素选择器

伪类和伪元素的区别

  • 伪元素和伪类都是为了给一些特殊需求加样式,定义上基本一致。
  • 伪类像类选择器一样给已存在某个元素添加额外的样式;伪元素则是给自己虚拟的元素添加样式。

参考:https://segmentfault.com/a/1190000013737796

扩展

菜单栏右边框的实现方法有多种,结合上面介绍的选择器,实现方法分别如下:

一、常规方法:

.nav li{
    border-right:1px solid #fff;
}
.nav li:last-child{
    border-right-width:0px;
}

二:结合相邻兄弟选择器(+)

.nav li + li{
    border-left:1px solid #fff;
}

三、结合兄弟选择器(~)

.nav li:first-child ~ li{
    border-left:1px solid #fff;
}

四、结合:not()选择器

.nav li:not(:last-child){
    border-right:1px solid #fff;
}

本文章教程介绍完毕,更多请访问跳墙网其他文章教程!

css常用选择器总结 相关文章

  1. CSS3新增属性clip-path裁剪

    clip-path 直译过来就是裁剪路径,使用SVG或形状定义一个HTML元素的可见区域的方法。想象一下你在Photoshop中勾勒路径的场景。MDN上是这样介绍 clip-path的: clip-path属性可以防止部分元素通过定义的剪切区域来显示,仅通过显示的特殊区域。剪切区域是被UR

  2. 30个前端开发人员必备的顶级工具

    目录 CSS代码生成器 CSS3 Generator 终极CSS Generator CSS Grid布局生成器 静态站点生成器 Next.js Gatsby SVG 优化器 SVGOMG SVG Optimizers 动画库 Animate.css GreenSock (GSAP) Anime.js 跨浏览器测试 Caniuse Am I Responsive Responsive Web Design C

  3. css怎么去掉下划线

    css去掉下划线的方法:可以利用text-decoration属性来实现,如【text-decoration: none;】,属性值none表示没有文本装饰。 本文操作环境:windows10系统、css 3、thinkpad t480电脑。 可以使用text-decoration 属性来取消文本下划线,该属性规定添加到文本的

  4. CSS圣杯和双飞翼布局

    圣杯布局 !DOCTYPE htmlhtmlhead meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" meta http-equiv="X-UA-Compatible" content="ie=edge" title圣杯布局/title style type="text/css" body { min-width: 550px;

  5. web前端html5css3初级笔记1/2/3——前端介绍/网页简史/HTML

    ------------恢复内容开始------------ 1 前端介绍 通常情况下,现在的软件一般由两个部分组成 -客户端:用户通过客户端来使用软件 -服务端:服务器负责在远程处理业务逻辑 1.1 服务器 服务器开发的语言: Java PHP C# Python Node.js(前端JavaScript编写服

  6. Z-BlogPHP 开发文档:常用函数之GetPost 函数

    GetPost 函数 通过GetPost 可以获取指定的文章或页面或是其它类型的Post表的数据 //返回id为10的Post对象实例,如果没有就返回一个空的Post对象实例$post = GetPost(array('id'=10)) //返回object(Post类型)//array参数如下 array( 'id' = 10, //指定ID(可

  7. Z-BlogPHP 开发文档:常用函数之GetList 函数

    GetList 函数 通过GetList可以获取自定义的文章列表,如指定分类的最新文章、置顶文章等等 $result = GetList(array('count'=10)) //返回array(Post类型) 或是 空array()//array参数如下 array( 'count' = 10, //(可省略) 'cate' = 1, //(可省略) 'auth'

  8. 数组去重

    1、 一、利用ES6 Set去重(ES6中最常用) var arr = [1,1,8,8,12,12,15,15,16,16];function unique (arr) { return Array.from(new Set(arr))}console.log(unique(arr)) //[1,8,12,15,16]// 不考虑兼容性,这种去重的方法代码最少。这种方法还无法去掉“{}”

  9. 数据库——单表查询、多表查询的常用关键字

    一 单表查询 1、前期表与数据准备 # 创建一张部门表create table emp( id int not null unique auto_increment, name varchar(20) not null, sex enum('male','female') not null default 'male', #大部分是男的 age int(3) unsigned not null default 28, h

  10. Centos7 防火墙操作常用命令

    1、 查看防火墙状态 systemctl status firewalld 2、 关闭防火墙 systemctl stop firewalld 3、 开机禁止启动防火墙 systemctl disable firewalld 4、 启动防护墙 systemctl start firewalld 5、 开机启动防火墙 systemctl enable firewalld 6、 重启防火墙

每天更新java,php,javaScript,go,python,nodejs,vue,android,mysql等相关技术教程,教程由网友分享而来,欢迎大家分享IT技术教程到本站,帮助自己同时也帮助他人!

Copyright 2020, All Rights Reserved. Powered by 跳墙网(www.tqwba.com)|网站地图|关键词