属性选择符:
- /* 选择所有具有class属性的h1元素 */
- h1[class] {
- color: silver;
- }
-
- /* 选择所有具有href属性的a元素 */
- a[href] {
- text-decoration: underline;
- }
- /* 选择所有name属性值为"username"的input元素 */
- input[name="username"] {
- border: 1px solid black;
- }
-
- /* 选择所有class属性值为"highlight"的元素 */
- .highlight, [class="highlight"] {
- background-color: yellow;
- }
- /* 选择所有class属性值中包含"row-"的div元素 */
- div[class*="row-"] {
- border-bottom: 1px solid #ccc;
- }
-
- /* 选择所有id属性值以"nav-"开头的元素 */
- [id^="nav-"] {
- color: navy;
- }
伪类选择符:
:hover
:用户悬停在元素上时。:active
:元素被用户激活时(如点击)。:visited
:用户已访问的链接。:first-child
:其父元素的第一个子元素。伪元素选择符:
::before
:在元素内容之前插入内容。::after
:在元素内容之后插入内容。::first-line
:选择元素的第一行。::first-letter
:选择元素的第一个字母。h1, h2 { color: blue; }
(选择所有
和
元素)div p { color: green; }
(选择所有元素内的
元素)- 子元素选择符(
>
):div > p { color: purple; }
(所有直接位于元素内的
元素)
子元素选择符使用>
符号来选择某个元素的直接子元素。与后代选择符不同,子元素选择符仅选择直接的子元素,而不包括孙子元素、曾孙元素等
- 相邻兄弟选择符(
+
):div + p { margin-top: 20px; }
(紧接在元素后的
元素)- 一般兄弟选择符(
~
)h1 ~ p { font-size: 14px; }
(
元素之后的所有
兄弟元素)
可继承的属性
大多数与文本相关的CSS属性都是可继承的。这些属性主要包括:
- 字体及其相关属性:
font-family
, font-size
, font-weight
, font-style
, font-variant
, font-stretch
, font-size-adjust
, font
, line-height
- 文本相关属性:
text-indent
, text-align
, text-transform
, text-decoration
, letter-spacing
, word-spacing
, white-space
, vertical-align
(对于内联元素和表格单元格), text-shadow
, direction
, unicode-bidi
- 颜色相关属性:
color
, opacity
(注意,opacity
继承会影响元素的透明度,但不会影响其颜色值本身) - 列表属性:
list-style-type
, list-style-position
, list-style-image
, list-style
- 表格布局属性:
border-collapse
, border-spacing
, empty-cells
, caption-side
- 其他属性:
cursor
, visibility
, speak
不可继承的属性
大部分与布局和盒子模型相关的CSS属性都是不可继承的。这些属性包括:
- 盒模型相关属性:
width
, height
, margin
, padding
, border
, display
, position
, float
, clear
, top
, right
, bottom
, left
, overflow
, clip
, z-index
, box-sizing
, flex
, grid
布局属性等 - 背景和边框属性:
background
, background-color
, background-image
, background-repeat
, background-position
, background-size
, background-attachment
, border-color
, border-style
, border-width
, border-radius
等 - 其他与布局和外观相关的属性:
opacity
(当作为单独属性时,而非从color
继承), visibility: collapse
(对于表格行、行组、列和列组), content
, counter-reset
, counter-increment
, outline
, quotes
, volume
, speak-header
, speak-numeral
, speak-punctuation
, voice-family
, volume
, pitch
, pitch-range
, stress
, richness
, azimuth
, elevation
等
-
相关阅读:
我才35岁就要面临“人到中年不服老不行”?大龄测试的救赎之路就在其中!
解决启动项目初始化报错required a bean of type ‘int‘ that could not be found.的问题
今年天猫双11,打响电商AI时代第一枪
头歌答案--爬虫实战
《微信小程序-进阶篇》Lin-ui组件库源码分析-动画组件Transition(二)
如何为您的 Linux 服务器设置简单的 Grafana 云监控仪表板
攻防世界心仪的公司
三分钟学会数据结构顺序表
深入了解Kubernetes(k8s):安装、使用和Java部署指南(持续更新中)
OpenCV图像处理——卷积操作
-
原文地址:https://blog.csdn.net/m0_55049655/article/details/139752828