CSS高级选择器

一、属性选择器

以value开头的att属性的E元素:E[att^="value"]{ ;}

a[href^=http]{background-color="red";}

css

css 复制代码
a[href^=http]{
    background-color="red";
}

html

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a[href^=http]{
            background-color: red;
        }
    </style>
</head>
<body>
    <p class="demo">
        <a href="http://www.baidu.com" class="links item first" >1</a>
        <!-- 1背景变红 -->
        <a href class="active item" title="test website" target=" blank">2</a>
        <a href="sites/file/test.html" class="links item">3</a>
        <a href="sites/file/test.png" class="links item"> 4</a>
        <a href="sites/file/image,ipg" class="links item">5</a>
    </p>
</body>
</html>

结果,1背景变红

以value结尾的att属性的E元素:E[att$="value"]{ ;}

a[href$=png]{background-color: red;}

css

css 复制代码
        a[href$=png]{
            background-color: red;
        }

html

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a[href$=png]{
            background-color: red;
        }
    </style>
</head>
<body>
    <p class="demo">
        <a href="http://www.baidu.com" class="links item first" >1</a>
        <a href class="active item" title="test website" target=" blank">2</a>
        <a href="sites/file/test.html" class="links item">3</a>
        <a href="sites/file/test.png" class="links item"> 4</a>
        <!-- 4背景变红 -->
        <a href="sites/file/image,ipg" class="links item">5</a>
    </p>
</body>
</html>

结果,4背景变红

含有value的att属性的E元素:E[att*="value"] { ;}

a[class*=links] { background: red; }

css

css 复制代码
        a[class*=links]{
            background-color: red;
        }

html

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a[class*=links]{
            background-color: red;
        }
    </style>
</head>
<body>
    <p class="demo">
        <a href="http://www.baidu.com" class="links item first" >1</a>
        <a href class="active item" title="test website" target=" blank">2</a>
        <!-- 除了2背景都变红 -->
        <a href="sites/file/test.html" class="links item">3</a>
        <a href="sites/file/test.png" class="links item"> 4</a>  
        <a href="sites/file/image,ipg" class="links item">5</a>
    </p>
</body>
</html>

除了2背景都变红

二、关系选择器

子代选择器:E元素的直接下一级的所有子元素F,对下下级无效:E>F{ ;}

body>p{ background: pink; }

相邻兄弟选择器:E元素的下一个平级F元素,紧贴着E:E+F{ ;}

.active+p { background: green; }

普通兄弟选择器:E元素之后的所有平级元素F:E~F{ ;}

.active~p{ background: yellow; }

三:结构伪类选择器

四:链接伪类选择器

五:伪元素选择器

在被选元素E的内容的前面插入内容,必须配合content属性:E::before{content:插入的内容;...;...;}

在被选元素E的内容的后面插入内容,必须配合content属性:E::after{content:插入的内容;...;...;}

相关推荐
并不会1 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
悦涵仙子1 小时前
CSS中的变量应用——:root,Sass变量,JavaScript中使用Sass变量
javascript·css·sass
衣乌安、1 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜1 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师1 小时前
CSS的三个重点
前端·css
耶啵奶膘3 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^4 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie5 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic5 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿5 小时前
webWorker基本用法
前端·javascript·vue.js