姑苏区建设局网站,哈尔滨市住房和城乡建设局局网站,微网站栏目,商洛市城乡建设局网站简述#xff1a;CSS#xff08;层叠样式表#xff09;选择器是网页设计和开发中至关重要的工具。它们用于选择 HTML 元素并应用样式#xff0c;使得网页变得美观和具有交互性。这里来记录一下#xff0c;各种 CSS 选择器及其使用方法。 一. Css各种选择器的权重
!importa…简述CSS层叠样式表选择器是网页设计和开发中至关重要的工具。它们用于选择 HTML 元素并应用样式使得网页变得美观和具有交互性。这里来记录一下各种 CSS 选择器及其使用方法。 一. Css各种选择器的权重
!important 行内式 id选择器 类/伪类/属性选择器 标签选择器 全局选择器 分别对应无穷大 1000 100 10 1 0 二. 选择器类型
⚫ Ⅰ. 基本选择器
1. 通配符选择器
通配符选择器 (*) 用于选择所有元素。
* {margin: 0;padding: 0;
}2. 元素选择器
元素选择器用于选择特定类型的 HTML 元素。
p {color: blue;
}3. 类选择器
类选择器用于选择具有特定类的元素。类名以 . 开头。
.intro {font-size: 20px;
}4. ID 选择器
ID 选择器用于选择具有特定 ID 的元素。ID 名以 # 开头。
#header {background-color: grey;
}⚫ Ⅱ. 组合选择器
1. 后代选择器
后代选择器用于选择某元素的所有后代元素。
div p {color: green;
}2. 子选择器
子选择器用于选择某元素的直接子元素。
ul li {list-style-type: none;
}3. 相邻兄弟选择器
相邻兄弟选择器用于选择紧接在某元素后的兄弟元素。
h1 p {font-weight: bold;
}4. 普通兄弟选择器
普通兄弟选择器用于选择某元素后所有的兄弟元素。
h1 ~ p {color: red;
}⚫ Ⅲ. 属性选择器
1. 存在属性选择器
选择具有某个属性的元素。
a[href] {text-decoration: none;
}2. 特定属性值选择器
选择具有特定属性值的元素。
input[typetext] {width: 200px;
}3. 属性值以特定字符串开头的选择器
选择属性值以特定字符串开头的元素。
a[href^https] {color: green;
}4. 属性值以特定字符串结尾的选择器
选择属性值以特定字符串结尾的元素。
a[href$.pdf] {color: red;
}5. 属性值包含特定字符串的选择器
选择属性值包含特定字符串的元素。
a[href*example] {color: blue;
}⚫ Ⅳ. 伪类选择器
1. 链接伪类选择器
用于选择不同状态下的链接元素。
a:link {color: blue;
}
a:visited {color: purple;
}2. 动态伪类选择器
用于选择鼠标与元素交互时的不同状态。
a:hover {color: red;
}
a:active {color: yellow;
}3. 结构性伪类选择器
用于选择特定结构中的元素。
p:first-child {font-weight: bold;
}
p:last-child {font-style: italic;
}
p:nth-child(2) {text-decoration: underline;
}⚫ Ⅴ. 伪元素选择器
1. 首字母伪元素选择器
用于选择元素的首字母。
p::first-letter {font-size: 2em;color: red;
}2. 首行伪元素选择器
用于选择元素的首行。
p::first-line {font-weight: bold;
}3. 伪内容选择器
用于在元素的内容前后插入内容。
p::before {content: Note: ;font-weight: bold;
}
p::after {content: (end of paragraph);
}⚫ Ⅵ. 高级选择器
1. 否定伪类选择器
选择不匹配某选择器的元素。
input:not([typesubmit]) {border: 1px solid black;
}2. :nth-of-type 选择器
选择属于特定类型的第 N 个元素。
li:nth-of-type(2) {color: green;
}3. :only-child 选择器
选择父元素中唯一的子元素。
p:only-child {font-size: 20px;
}⚫ Ⅶ. 组合复杂选择器
你可以组合各种选择器来创建更复杂的选择规则。
div#content p.intro::first-line {color: blue;
}三. 所有选择器的类型文字目录
1. 基本选择器 通配符选择器元素选择器类选择器ID 选择器 2. 组合选择器 后代选择器子选择器相邻兄弟选择器普通兄弟选择器 3. 属性选择器 存在属性选择器特定属性值选择器属性值以特定字符串开头的选择器属性值以特定字符串结尾的选择器属性值包含特定字符串的选择器 4. 伪类选择器 链接伪类选择器动态伪类选择器结构性伪类选择器 5. 伪元素选择器 首字母伪元素选择器首行伪元素选择器伪内容选择器 6. 高级选择器 否定伪类选择器:nth-of-type 选择器:only-child 选择器 7. 组合复杂选择器
组合各种选择器来创建更复杂的选择规则。
