html5——CSS高级选择器

目录

属性选择器

E[att^="value"]

[E[att="http"\]](#E[att="http"])

E[att*="http"]

关系选择器

子代:

相邻兄弟:

普通兄弟:

结构伪类选择器

链接伪类选择器

伪元素选择器

CSS的继承与层叠

CSS的继承性

CSS的层叠性


属性选择器

eg:

E[att^="value"]

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

E[att$="http"]

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

E[att*="http"]

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

关系选择器

子代:

body>p{ background: pink; }

相邻兄弟:

.active+p { background: green; }

普通兄弟:

.active~p{ background: yellow; }

结构伪类选择器

eg:

ul li:first-child**{ background: red;}**

ul li:last-child**{ background: green;}**

p:nth-child(1){ background: yellow;}

p:nth-of-type(2){ background: blue;}

链接伪类选择器

中间为英文输入法的【:】冒号**,:hover****】伪类选择器不仅应用于a标签,还可以应用于其它选择器,如类选择器、id选择器****...**

伪元素选择器

element**【被选元素】::before【伪元素选择器】****{**

content:插入的内容;

color: green;

}

CSS的继承与层叠

CSS的继承性

  1. 指被包含的子元素将自动拥有其外层元素的某些样式
  2. 作用:可以在一定程度上简化代码
  3. 以下元素有浏览器默认样式,此时继承性依然存在,但优先显示浏览器的默认样式
  • a标签的color属性继承失效
  • 标题标签的font-size继承失效
  • 布局属性(如宽高)、盒子模型属性(如边距、边框)、定位属性(如绝对、相对定位)继承失效

CSS的层叠性

1、指多种CSS样式的叠加

  • 同一标签设置不同样式 → 样式叠加 → 共同作用在标签上
  • 同一标签设置相同样式 → 样式覆盖→ 写在最后的样式生效

作用:解决样式冲突问题

2、!important命令

  • 赋予样式最大优先级

若样式冲突,只有选择器优先级相同时,才能通过层叠性判断结果

相关推荐
我叫汪枫2 小时前
前端物理引擎库推荐 - 让你的网页动起来!
前端
脑子慢且灵6 小时前
[JavaWeb]模拟一个简易的Tomcat服务(Servlet注解)
java·后端·servlet·tomcat·intellij-idea·web
雾恋7 小时前
最近一年的感悟
前端·javascript·程序员
A黄俊辉A7 小时前
axios+ts封装
开发语言·前端·javascript
小李小李不讲道理8 小时前
「Ant Design 组件库探索」四:Input组件
前端·javascript·react.js
连合机器人8 小时前
晨曦中的守望者:当科技为景区赋予温度
java·前端·科技
郑板桥308 小时前
tua-body-scroll-lock踩坑记录
前端·javascript
小*-^-*九9 小时前
php 使用html 生成pdf word wkhtmltopdf 系列2
pdf·html·php
BillKu9 小时前
vue3 样式 css、less、scss、sass 的说明
css·less·sass·scss
慢半拍iii9 小时前
JAVA Web —— A / 网页开发基础
前端