2025年3月17日 星期一 甲辰(龙)年 月十六 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

css选择器归纳

时间:08-26来源:作者:点击数:37

css常见的选择器

选择器的作用是选中标签,所以下面的选择器都是指标签

  • * /*通配符选择器*/
  • # /*id选择器*/
  • . /*类选择器*/
  • , /*分组选择器*/
  • 空格 /*后代选择器*/
  • > /*直接后代选择器*/
  • + /*相邻兄弟选择器*/
  • ~ /*通用兄弟选择器*/

属性选择器

  • /*
  • 属性存在选择器
  • */
  • [attr] /*选择包含attr属性的所有元素,不论attr的值*/
  • /*需要注意的是属性值val是字符串需要用引号引起来*/
  • [attr=val] /*选择仅包含attr被赋值为val的所有元素*/
  • [attr~=val]/*选择以val命名的属性元素,并且属性是以空格作为分隔值*/
  • /*
  • 子串值属性选择器
  • */
  • [attr|=val]/*选择attr属性的值以val(包含val)或者val-开头的元素*/
  • [attr^=val]/*选择attr属性的值以val开头(包含val)的元素*/
  • [attr$=val]/*选择attr的值以val结尾(包含val)的元素*/
  • [attr*=val]/*选择attr属性值中含有字符串val的元素*/
  • <style>
  • div[name]{
  • border:1px solid
  • }
  • </style>
  • <div>
  • <div name="a">1</div>
  • <div name="b">2</div>
  • </div>

伪类选择器

  • /**
  • 链接伪类 只能作用到链接类的标签元素
  • */
  • :link /*表示作为超链接,指向一个未访问的地址的所有锚*/
  • :visited/*表示作为超链接,指向一个已被访问的地址的所有锚*/
  • :target/*代表一个特殊的元素,它的id是URI的片段标识符*/
  • /**
  • 动态伪类 能作用到所有标签元素
  • */
  • :hover/*选中鼠标悬浮的标签元素*/
  • :active/*选中点击按住的标签元素*/
  • :visited
  • /*会被浏览器记住已经点击过
  • visited只有3个属性可以修改
  • color background-color border-color
  • */

表单伪类选择器

  • :enabled/*匹配可编辑的表单*/
  • :disable/*匹配被禁用的表单*/
  • :checked/*匹配被选中的表单*/
  • :focus/*匹配获焦的表单*/

结构性伪类选择器

  • /* 关于后面index的值说明:
  • index的值从1开始计数!!!!
  • index可以为变量n(只能是n)
  • index可以为even odd
  • */
  • /*选择id=wrap元素标签的子标签中索引是index的表情*/
  • #wrap ele:nth-child(index) /*表示匹配#wrap中第index的子元素 这个子元素必须是ele*/
  • #wrap ele:nth-of-type(index) /*表示匹配#wrap中第index的ele子元素*/
  • /* 注意
  • :nth-child和:nth-of-type 有一个很重要的区别!
  • nth-of-type以元素为中心!就是所有符合条件的第一个标签,标签不同也会被选中
  • 举例:
  • <div id="wrap">
  • <div class="inner">div</div>
  • <p class="inner">p</p>
  • <span class="inner">span</span>
  • <h1 class="inner">h1</h1>
  • <h2 class="inner">h2</h2>
  • </div>
  • 下面的css会选中上面所有的标签,因为每个标签都只出现一次
  • #wrap .inner:nth-child(1){
  • border: 1px solid;
  • }
  • */
  • :first-of-type /*元素为中心,第一个出现元素*/
  • :last-of-type /*元素为中心,最后一个出现的元素*/
  • :nth-last-type(index)
  • :only-of-type /*选中仅出现一次的元素*/
  • /* 例如:
  • <div>
  • <span>1</span>
  • <span>2</span>
  • <span>3</span>
  • <p>4</p>
  • <p>5</p>
  • <span>6</span>
  • </div>
  • 通过
  • div p:nth-last-type(1){
  • color:red
  • }
  • 可以选择4所在的标签并且将4的字体设置为红色,相对于nth-child比较宽松的选择元素,
  • 可以有上面类似的span不需要的元素,而nth-child必须是第一个元素,可能选择不到
  • div p:nth-child(1){
  • color:red
  • }
  • 则一个也选择不到元素,因为div下面第一个子元素不是p标签
  • */
  • /*:nth-child(index)系列 */
  • :first-child /*第一个元素*/
  • :last-child /*最后一个元素*/
  • :nth-last-child(index)/*最后一个元素*/
  • :only-child /*(相当于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))*/
  • :not() /*不要选中*/
  • :empty() /*内容必须是空的,有空格都不行,有属性没关系*/

伪元素选择器

伪元素建议使用双冒号,单冒号也可以使用

  • ::after /*css生成的虚拟的dom元素(相当于生成的标签)一个元素只能有一个after或before*/
  • ::before
  • ::firstLetter/*选中标签内的第一个字符*/
  • ::firstLine/*选中第一行元素*/
  • ::selection /*鼠标按住左键选中的内容*/
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门