css选择器四大类:基本、组合、属性、伪类_CSS教程_CSS_网页制作

来源:脚本之家  责任编辑:小易  

CSS选择器如下:1.标签名选择器 div { color:Red;}/即页面中的各个标签名的css样式2.类选择器.divClass {color:Red;}/即定义的每个标签的class 中的css样式3.ID选择器#myDiv {color:Red;}/即页面中的标签的id4.后代选择器(类选择器的后代选择器).divClass span { color:Red;}/即多个选择器以逗号的格式分隔 命名找到准确的标签5.群组选择器 div,span,img {color:Red}/即具有相同样式的标签分组显示选择器的优先级1.最高优先级是(直接在标签中的设置样式,假设级别为1000);2.次优先级是(ID选择器,假设级别为100)#myDiv{color:Red;}3.其次优先级是(类选择器,假设级别为10).divClass{color:Red;}4.最后优先级是(标签选择器,假设级别是 1)div{color:Red;}5.那么后代选择器的优先级就可以计算了啊比如.divClass span { color:Red;} 优先级别就是:10+1=11www.zgxue.com防采集请勿采集本网。

什么是选择器?选择器的作用是通过它可以找到元素,把css样式传递给元素!css选择器主要分为:基本选择器、属性选择器、组合选择器与伪类选择器四个大类!

1.标签名选择器 div { color:Red;} 即页面中抄的各个标百签名的css样式 2.类选择度器.divClass {color:Red;} 即定义的每个标签知的class 中的css样式 3.ID选择器#myDiv {color:Red;} 即页面中的

css基本选择器

也就是css的继承,比如改写写代码: css\"> red{font-size:14px;color:red;} p{color:blue;font-size:24px;text-decoration:underline}/*给p标签加一个下划线,看看效果*/

基本选择器又分为:*通配符、标签选择器、class选择器、id选择器,在这里需要注意的编程思想在css层叠样式表中元素有且仅有一个id。注意以下几点1.id唯一性2.元素id不相同,就像每一个人只有一个身份证一样,ID就代表身份证3.class选择器不具有唯一性,它可以重复使用!此外这个*通配符代表的是全局

你应该问css选择器有什么用,而不是DW里css选择器有什么用。css是一门独立的语言,是格式为后缀名为.css的文本,用记事本都可以写,DW只是写(生成)css的工具之一,css里面的选择器、属性之类的

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css基本选择器</title> <style type="text/css"> *{ color: skyblue; }/**通配符*/ div{ color: red; }/*标签选择器*/ .box{ color: steelblue; }/*class选择器*/.box{color: steelblue;}也可以写成*.box{color: steelblue;}代表的所有的box字体颜色为 steelblue #content{ color: tomato; }/*id选择器*/ </style> </head> <body> <div class="box" id="content"> 大灰牛博客专注web前端技术学习 </div> </body> </html>

CSS选择器的类型分为3类:标记选择器、类别选择器和ID选择器。(可能名称有不同的说法,但意思都是一样的)标记选择器是利用HTML的标记直接定义标记内容的样式,如:h1{ color:red;font-size:25pt

css组合选择器

CSS选择器、优先级与匹配原理 1.id 选择器(#myid)2.类选择器(.myclassname)3.标签选择器(div,h1,p)4.相邻选择器(h1+p)5.子选择器(ul)6.后代选择器(li a)7.通配符选择器(*)8.属性

把基本选择器通过特殊符号串在一起有意见称之为css组合选择器,常见的css组合选择器有:分组选择器、嵌套选择器、子选择器、相邻同级别选择器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css组合选择器</title> <style type="text/css"> /* div{ color: teal; font-size: 24px; } p{ color: teal; } */ div{ font-size: 24px; } div,p{ color: teal; }/*分组选择器*/ div p{ color: red; }/*嵌套选择器*/ ul>li{ font-size: 24px; list-style: square; }/*子选择器*/ div+p{ color: blue; }/*相邻同级别选择器*/ </style> </head> <body> <div> 成功的花,人们只惊羡她现时的明艳!然而当初她的芽儿,浸透了奋斗的泪泉,洒遍了牺牲的血雨 <p>自以为懂得很多了经历很多了最后才知道都是那么的可笑</p> </div> <p>我们不要只看成功者荣誉的瞬间,更要看到成功者为之努力、为之奋斗的过程,从而激励自己也不断付出,奔着那个成功的目标前进.</p> <p>成功的花,人们只惊羡她现时的明艳!然而当初她的芽儿,浸透了奋斗的泪泉,洒遍了牺牲的血雨<span>我们不要只看成功者荣誉的瞬间,更要看到成功者为之努力、为之奋斗的过程,从而激励自己也不断付出,奔着那个成功的目标前进.</span></p> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html>

css属性选择器

基本选择器[属性]、基本选择器[属性=值]、 基本选择器[属性~=值]空格符隔开多个、 基本选择器[属性^=值]以什么开始、 基本选择器[属性$=值]以什么结束

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css属性选择器</title> <style type="text/css"> div[title]/*基本选择器[属性]*/ div[title=english]{ color: blue; }/*基本选择器[属性=值]*/ div[title~=en]{ color:#f90; font-weight: bold; }/*基本选择器[属性~=值] 任意包含有属性中的一个*/ p,div[title^=zh]{ font-size:24px; color: brown; }/*基本选择器[属性^=值]以什么开始*/ div[title$=china]{ letter-spacing: 10px; text-decoration: line-through; font-style: italic; }/*基本选择器[属性$=值]以什么结束*/ </style> </head> <body> <div title="english"> If you can NOT explain it simply, you do NOT understand it well enough </div> <div title="english en yingyu"> 你们没发现嘛?2013爱你一生,2014爱你一世,2015爱你一屋,2016爱你一路,2017爱你一切,2018爱你一半,2019爱你依旧,2020爱你爱你,2021爱你而已🌝 </div> <p title="zh en"> css选择器四大类:基本、组合、属性、伪类 </p> <div title="zh en china"> http://www.cnblogs.com/dhnblog/p/12293463.html </div> </body> </html>

css伪类选择器

从字面意思来讲,伪就是假的,元素是标签与标签包裹的内容,简单来说伪元素就是假的元素,假的反义词是真的,在页面中这些又是我们自己写的,所以它是真的。在这个html页面中,所有元素都会被偷偷加上开始与结束标签,这个就是伪元素,伪类选择器指的是一种操作状态!

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css伪类选择器</title> <style type="text/css"> p{ color: brown; border: 1px solid black; height: 40px; line-height: 40px; } p::before{ content: "before开始"; } p::after{ content: "after结束"; } /* 针对块元素 第一个字母::first-letter 第一行文字::first-line */ div::first-letter{ font-size: 24px; color: blue; } div::first-line{ color: yellowgreen; font-style: initial; font-weight:bolder; } </style> </head> <body> <div class="box">http://www.dhnblog.com/ 大灰牛博客技术为王世界,拼搏成就梦想,高度取决态度 <!--before 开始--> <p>情人节祝福语送女朋友,很甜很撩,瞬间收服她的心!</p> <!--after 结束--> </div> </body> </html>

总结

以上所述是小编给大家介绍的css选择器四大类:基本、组合、属性、伪类,希望对大家有所帮助,也非常感谢大家对真格学网网站的支持!

1、同意楼抄上:ID选择器:#header {}类选择器:.header {}元素选择器:div {}子选择器:ul>li {}后代选择器:div p {}伪类选择器:a:hover {}属性选择器:input[type="text"]{}id优先级高于类class;后面的样式覆盖前面的;指定的高于继承;2、除了参考W3school的资料,我这还有CSS的帮助文档,如果需要,留下邮箱,发给你内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • css 有序或者无序列表的前面的标记 list-style-type 属性的实现
  • css浮动 float属性详解
  • 详解css3新增的背景属性
  • js判断并告知支持css属性(值)的 情况分析
  • CSS的基本选择器有哪几种?分别适合在什么情况下使用?
  • css选择器有哪些?各种选择器优先级大小顺序
  • css选择器的类型及作用
  • css有哪些种类的选择器
  • css选择器有哪几种?语法规则是什么
  • CSS选择器的优先级?
  • DW里,CSS选择器类型标签里的各个标签分别有什么用?
  • 请简要说明css样式表中三种选择器(三种样式)的特点
  • css样式有哪几种选择器
  • css的五类选择器有哪些
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程伪类属性选择器css详解css3新增的背景属性js判断并告知支持css属性(值)的 情况分析css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css 漂亮搜索框美化代码css自定义select下拉选择框的样式(不用其他标签模拟)css圆角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行缩进两个文字css 实现渐变效果小结( linear-gradient线性渐变 和 r解决type=file 文件修改表单 名称不能正常回显的问题移动端前端适配方案(总结)css 横向进度条和竖向进度条实现代码css运用阿里巴巴矢量库快速在对应位置加上好看的图标详解盒模型大小取决于它的padding,margin,border数css+svg实现b站充电效果的示例代码css动画实现领积分效果的思路详解html/css中的空格处理及如何保留页面中的空格css实现气泡的小尖角效果
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved