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:插入的内容;...;...;}

相关推荐
书山有路_邓17 分钟前
vscode 如何鼠标双击时选择带有-的
前端
张三风啊2 小时前
vue config 接口地址配置
前端·javascript·vue.js
多情码农无情键2 小时前
浏览器漫谈HTML--2.2从表单标签看vue的响应式系统 理论+实战
前端·javascript·html
Uluoyu2 小时前
Vue.Draggable使用nested-with-vmodel进行拖拽
前端·javascript·vue.js
北极糊的狐2 小时前
vue页面成绩案例(for渲染表格/删除/添加/统计总分/平均分/不及格显红色/输入内容去首尾空格trim/输入内容转数字number)
前端·javascript·vue.js
边洛洛3 小时前
路由传参、搜索、多选框勾选、新增/编辑表单复用
前端·javascript·vue.js
OEC小胖胖5 小时前
Vue 3 中 onUnload 和 onPageScroll 使用详解
前端·javascript·vue.js·前端框架·web
川石教育6 小时前
Vue前端开发-slot传参
前端·vue.js·前端框架·前端开发·slot组件
新时代的弩力7 小时前
【Cesium】--viewer,entity,dataSource
前端·javascript·vue.js
余道各努力,千里自同风7 小时前
HTML5 视频 Vedio 标签详解
前端·音视频·html5