博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS高级选择器
阅读量:6668 次
发布时间:2019-06-25

本文共 1757 字,大约阅读时间需要 5 分钟。

高级选择器分为:后代选择器、子代选择器、并集选择器、交集选择器

后代选择器

语法格式:选择器1 选择器2 ..... { 属性名N:属性值; }

描   述: 选择父选择器下面的子选择器,添加属性

注   意:

1、 选择器1 和选择器2之间有父子关系

2、 选择器可以有N个(注意:父子关系;多个选择器之间有一个空格)

这个其实就是嵌套你的选择属性,比如前者加上你的外面的父级后者加入要进行的子级

 

使用空格表示后代选择器。顾名思义,父元素的后代(包括儿子,孙子,重孙子)

 

    
后代选择器

老王开车去卖瓜

你家里的物品
有很多东西 什么都有
后代选择器

 

 

    
后代选择器

老王

老李

老张

 

子代选择器

使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。

    
子代选择器

111

222

 

 

并集选择器

多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素,可以使用并集选择器

:选择器1,选择器2 ..... { 属性名N:属性值; }

描   述: 给多个选择器同时添加相同属性

注   意:

1、 多个选择器之间用逗号“,”分隔

    
并集

这是一个奇幻的开头

真的吗

比如像百度首页使用并集选择器。

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {      margin: 0;      padding: 0   }/*使用此并集选择器选中页面中所有的标签,页面布局的时候会使用*/
百度首页并集的运用

 

交集选择器

使用.表示交集选择器。第一个标签必须是标签选择器,第二个标签必须是类选择器 

错误代码:

    
并集

这是一个奇幻的开头

真的吗

 

并集选择器:

这是一个奇幻的开头

真的吗

 

属性选择器:

<!-- 属性选择器仅限于在表单控件中 -->

    
属性选择器

 

伪类选择器

伪类选择器一般会用在超链接a标签中,使用a标签的伪类选择器

语法格式:选择器:[参数]  { 属性名N:属性值; }

参   数:

a:link { color:#ff0000; }      /*默认样式,超链接文字为红色*/

a:visited { color:#00ff00; }    /*访问过后,超链接文字为绿色*/

a:hover { color:#0000ff; }    /*鼠标经过,超链接文字为蓝色*/

a:active { color:#ffff00; }     /*鼠标按下时,超链接文字为黄色*/

注   意:

1、默认[参数],:link 省略

2、常用状态: hover 鼠标经过/移动到链接上时显示的颜色

    
伪类选择器 这是一个选择器
伪类选择器:对于a标签

 

 

再给大家介绍一种css3的选择器nth-child():

    
nth-child
你是不是偷偷的喜欢我
  • 要不要
  • 这样
  • 就这样

 

 伪元素选择器:

    

这是一个伪元素的选择器

 

转载于:https://www.cnblogs.com/zhaoyunlong/p/9077651.html

你可能感兴趣的文章
你或许不知道Vue的这些小技巧
查看>>
Vue2.0进阶组件篇1 教你秒撸(短信倒计时组件)
查看>>
测试你的前端代码 - part2(单元测试)
查看>>
使用 Cocos Creator 打造自己的爆款小游戏《方块弹珠》!
查看>>
PHP 依赖注入 (DI) 和容器 (IoC) 的简单实现
查看>>
BCH文件安全存储系统——BFP
查看>>
Python | 数据分析实战Ⅰ
查看>>
Salesforce开源TransmogrifAI:用于结构化数据的端到端AutoML库
查看>>
社会的分工合作(ASIC)才是带来人类富裕的基础
查看>>
全面剖析SharedPreferences
查看>>
0826 - 事情多到让人绝望啊
查看>>
Logback中使用TurboFilter实现日志级别等内容的动态修改
查看>>
Spring Boot中增强对MongoDB的配置(连接池等)
查看>>
网络安全-CSRF
查看>>
Andorid Studio NDK开发-Hello World
查看>>
IDEA中maven工程指定JDK版本
查看>>
Git 详细的操作指南笔记(从零开始)
查看>>
【手把手带你撸一个脚手架】第二步, 搭建开发环境
查看>>
JS专题之严格模式
查看>>
Python设计模式-装饰器模式
查看>>