高级选择器分为:后代选择器、子代选择器、并集选择器、交集选择器
后代选择器
语法格式:选择器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 鼠标经过/移动到链接上时显示的颜色
伪类选择器 这是一个选择器
再给大家介绍一种css3的选择器nth-child():
nth-child 你是不是偷偷的喜欢我
- 要不要
- 这样
- 就这样
伪元素选择器:
这是一个伪元素的选择器