一般的网站方案建设书模板电商网站建设行业现状

一般的网站方案建设书模板,电商网站建设行业现状,杭州知名app技术开发公司,wpf入可以做网站吗本文将系统介绍CSS中常见的五类选择器#xff1a;复合选择器关系选择器属性选择器伪类选择器交互类伪类选择器一、复合选择器#xff08;组合条件#xff09;复合选择器通过组合多个选择条件#xff0c;选中同时满足所有条件的元素。交集选择器语法#xff1a;选择器1选择…本文将系统介绍CSS中常见的五类选择器复合选择器关系选择器属性选择器伪类选择器交互类伪类选择器一、复合选择器组合条件复合选择器通过组合多个选择条件选中同时满足所有条件的元素。交集选择器语法选择器1选择器2 { 样式声明 }选中同时匹配多个选择器的元素。示例div.red { font-size: 24px; }该规则表示 选中同时是div标签且具有classred的元素。注意事项若包含标签选择器必须置于首位优先级由各选择器权重综合决定。并集选择器群组选择器语法选择器1, 选择器2, 选择器3 { 样式声明 }作用为多个选择器统一设置相同样式。示例h1, h3 { color: orange; }效果h1和h3元素都将显示橙色文字。二、关系选择器层级关系根据HTML元素的层级关系进行选择。子选择器语法父元素 子元素 { 样式声明 }作用仅选择直接子元素。示例div span { color: red; }仅影响div内第一层的span元素。后代选择器空格语法祖先 后代 { 样式声明 }作用选择所有层级的后代元素。示例div span { font-size: 30px; }区别子选择器仅选择直接子元素后代选择器空格选择所有层级后代。兄弟选择器相邻兄弟选择器语法兄 弟 { 样式声明 }选择紧邻的下一个兄弟元素。通用兄弟选择器~语法兄 ~ 弟 { 样式声明 }选择该元素之后的所有兄弟。示例p span { background-color: red; }为紧接p后的span添加红色背景。三、属性选择器根据元素属性及其值进行选择。常用语法选择器含义[属性名]具有该属性的元素[属性名值]属性值完全匹配[属性名^值]属性值以指定内容开头[属性名$值]属性值以指定内容结尾[属性名*值]属性值包含指定内容示例[title*ac] { background-color: pink; }所有title属性包含ac的元素背景变为粉色。四、伪类选择器状态类根据元素状态或位置进行选择。顺序伪类伪类功能:first-child第一个子元素:last-child最后一个子元素:nth-child(n)第n个子元素从1计数:first-of-type同类型第一个元素:last-of-type同类型最后一个元素:nth-of-type(n)同类型第n个元素示例li:nth-of-type(2n) { background-color: pink; }为列表中所有偶数项设置粉色背景。否定伪类:not()语法选择器:not(条件) { 样式声明 }示例li:not(.l1) { color: red; }除classl1外的所有li元素文字变红。五、交互类伪类选择器主要用于超链接和交互元素根据用户操作动态改变样式。链接相关伪类伪类含义:link未访问链接:visited已访问链接:hover鼠标悬停:active鼠标点击时示例a:link { color: red; } a:visited { color: blueviolet; } a:hover { color: green; } a:active { color: orange; }书写顺序记忆LVHA:link → :visited → :hover → :active必须严格遵循此顺序否则样式可能被覆盖。鼠标交互示例button:hover .box { display: block; background-color: pink; }鼠标悬停按钮时显示相邻的.box元素并设置粉色背景。总结与思维导图类型作用示例复合选择器多条件组合div.red、h1, h3关系选择器层级关系div span、p span属性选择器属性匹配[title*ac]伪类选择器状态/位置:nth-child()、:not()交互伪类用户操作:hover、:active