css属性选择器

2020-10-28170次阅读css

css属性选择器,做个记录

/* 匹配包含title属性的a标签 => <a title> */
a[title] {color: purple;}  


/* 存在href属性并且属性值为"http://beige.world"的<a>标签*/
/*  <a href="http://beige.world"> */ 
a[href="http://beige.world"] {color: green;}


/* 存在href属性并且属性值包含"baidu"的<a>标签*/
 /*  
  <a href="https://baidu.com/we"> 
  <a href="https://fanyi.baidu.com/we"> 
  <a href="https://pan.baidu.com/we"> 
 */ 
a[href*="baidu"] {font-size: 20px;}


/* 存在id属性并且属性值结尾是"-wrapper"的<div>标签 */
 /*  
  <div id="btn-wrapper">
  <div id="menu-wrapper">
  <div id="pic-wrapper">
 */ 
div[id$="-wrapper"] {display: flex;}


/* 存在class属性并且属性值包含以空格分隔的"logo"的<div>元素 */
 /*  
  <div id="aaa logo">
  <div id="bbb logo">
 */ 
 div[class~="logo"] { padding: 2px; }

 

上一篇: clip-path轻松实现三角形多边形  下一篇: CSS实现移动端屏幕适配  

css属性选择器相关文章