巨鹿网站建设网络公司,开发专业网站,wordpress reeoo 主题,辽宁工程建设信息网诚信库1. css 选择器的定义
css 选择器是用来选择标签的#xff0c;选出来以后给标签加样式。
2. css 选择器的种类
标签选择器类选择器层级选择器(后代选择器)id选择器组选择器伪类选择器
3. 标签选择器
根据标签来选择标签#xff0c;以标签开头#xff0c;此种选择器影响范…1. css 选择器的定义
css 选择器是用来选择标签的选出来以后给标签加样式。
2. css 选择器的种类
标签选择器类选择器层级选择器(后代选择器)id选择器组选择器伪类选择器
3. 标签选择器
根据标签来选择标签以标签开头此种选择器影响范围大一般用来做一些通用设置。
示例代码
style typetext/cssp{color: red;}
/styledivhello/div
phello/p4. 类选择器
根据类名来选择标签以 . 开头, 一个类选择器可应用于多个标签上一个标签上也可以使用多个类选择器多个类选择器需要使用空格分割应用灵活可复用是css中应用最多的一种选择器。
示例代码
style typetext/css.blue{color:blue}.big{font-size:20px}.box{width:100px;height:100px;background:gold}
/stylediv classblue这是一个div/div
h3 classblue big box这是一个标题/h3
p classblue box这是一个段落/p5. 层级选择器(后代选择器)
根据层级关系选择后代标签以选择器1 选择器2开头主要应用在标签嵌套的结构中减少命名。
示例代码
style typetext/cssdiv p{color: red;}.con{width:300px;height:80px;background:green}.con span{color:red}.con .pink{color:pink}.con .gold{color:gold}
/styledivphello/p
/divdiv classconspan哈哈/spana href# classpink百度/aa href# classgold谷歌/a
/div
span你好/span
a href# classpink新浪/a注意点: 这个层级关系不一定是父子关系也有可能是祖孙关系只要有后代关系都适用于这个层级选择器
6. id选择器
根据id选择标签以#开头, 元素的id名称不能重复所以id选择器只能对应于页面上一个元素不能复用id名一般给程序使用所以不推荐使用id作为选择器。
示例代码
style typetext/css#box{color:red}
/stylep idbox这是一个段落标签/p !-- 对应以上一条样式其它元素不允许应用此样式 --
p这是第二个段落标签/p !-- 无法应用以上样式每个标签只能有唯一的id名 --
p这是第三个段落标签/p !-- 无法应用以上样式每个标签只能有唯一的id名 --注意点: 虽然给其它标签设置id“box”也可以设置样式但是不推荐这样做因为id是唯一的以后js通过id只能获取一个唯一的标签对象。
7. 组选择器
根据组合的选择器选择不同的标签以 , 分割开, 如果有公共的样式设置可以使用组选择器。
示例代码
style typetext/css.box1,.box2,.box3{width:100px;height:100px}.box1{background:red}.box2{background:pink}.box2{background:gold}
/stylediv classbox1这是第一个div/div
div classbox2这是第二个div/div
div classbox3这是第三个div/div8. 伪类选择器
用于向选择器添加特殊的效果, 以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器
示例代码
style typetext/css.box1{width:100px;height:100px;background:gold;}.box1:hover{width:300px;}
/stylediv classbox1这是第一个div/div9. 小结
css 选择器就是用来选择标签设置样式的常用的 css 选择器有六种分别是: 标签选择器类选择器层级选择器(后代选择器)id选择器组选择器伪类选择器
