能注册通用网址的网站,互联网营销师证书怎么考多少钱,北京外贸网站建设,临夏建设网站一、引言
我来填坑啦#xff01;之前在CSS基础知识详解中介绍过#xff0c;CSS 是一门基于规则的语言。是由选择器与样式信息组成#xff1a;选择器 {样式信息}。CSS 选择器是 CSS 规则的关键#xff0c;能精准定位 HTML 元素#xff0c;CSS3 新增选择器更是增强了设计能…一、引言
我来填坑啦之前在CSS基础知识详解中介绍过CSS 是一门基于规则的语言。是由选择器与样式信息组成选择器 {样式信息}。CSS 选择器是 CSS 规则的关键能精准定位 HTML 元素CSS3 新增选择器更是增强了设计能力。本篇文章就是用来总结CSS的多种选择器类型。
二、基本选择器
为了简化文章下面所用到样式示例的页面结构以下面为主
h1 idh1Title基本选择器详解/h1
div classboxClassspanspan标签1/spanspansapn标签2/span
/div2.1 元素选择器标签选择器
这是最基本的选择器类型。它直接根据 HTML 标签名来选择元素。例如span选择器会选择所有的span元素为这些span元素设置样式属性。
span {color: red;font-size: 16px;
}这种选择器的优点是简单直接缺点是不够精确会选中页面中所有该类型的标签。
2.2 类选择器
类选择器以.开头后面跟着自定义的类名。在 HTML 中通过class属性来应用类选择器。例如
.boxClass {background-color: yellow;
}类选择器的优点是可以复用多个不同的元素可以应用同一个类名来共享样式。
2.3 ID 选择器
ID 选择器以#开头后面跟着唯一的 ID 名称。在 HTML 中通过id属性来应用 ID 选择器。需要注意的是ID 在一个页面中应该是唯一的。例如
#h1Title {border: 1px solid blue;
}ID 选择器的优先级比类选择器高但由于其唯一性使用场景相对有限。
2.4 通配符选择器
通配符选择器用*表示它会选择页面中的所有元素。例如
* {margin: 0;padding: 0;
}这种选择器在重置页面默认样式时比较常用但由于选择范围太广可能会影响性能需要谨慎使用。
三、组合选择器
组合选择器基础页面结构示例
body!-- 外层父元素 --div classparentdiv classbox1box1标签/divdiv classbox2box2标签span你一点也不普通/span/divdiv classbox3box3标签/divp段落标签/pdiv classbox4box4标签/div/div
/body3.1 后代选择器
后代选择器用于选择某个元素的后代元素。用空格隔开两个选择器例如body div表示选择所有在body元素内部的div元素。
/* 后代选择器通过空格可以设置元素下所有特定元素后代 */
body div {/* body标签下所有div文字颜色设置为红色 */color: red;
}
.parent span {/* class选择器.parent元素下span标签文字颜色设置为粉色 */color: pink;
}3.2 子元素选择器
子元素选择器用于选择某个元素的直接子元素。用符号隔开两个选择器如:
/* 子元素选择器通过可以设置直接子元素的样式 */
body div {/* 将body下第一层div背景颜色设置为蓝色并不会更改.parent下的div元素背景 */background-color: blue;
}3.3 相邻兄弟选择器
相邻兄弟选择器用于选择紧接在某个元素之后的兄弟元素。使用符号如
/* 相邻兄弟选择器设置紧挨着当前元素的下一个元素样式 */
div div {/* box2与box3背景色将变成黄色因为他们是div元素同时上一个元素也是divbox1没有上一个元素box4上一个是p标签所以不会改变背景颜色*/background-color: yellow;
}3.4 通用兄弟选择器
通用兄弟选择器用于选择某个元素后面的所有兄弟元素。使用~符号例如:
/* 通用兄弟选择器设置当前元素同级下其他特定元素样式 */
div ~ div {/* box2、box3、box4背景色变成了橙色他们都在div.box1同级下box1之前并没有div标签所以无法选中*/background-color: orange;
}四、属性选择器
属性选择器基础页面结构示例
body!-- 外层父元素 --div classparentinput typetext classinputinput typepassword classpasswordbutton classbtn save保存/buttonbutton classbtn reset重置/button/div
/body4.1 简单属性选择器
根据元素是否具有某个属性来选择元素。例如:
/* 简单属性选择器[属性名] */
[class] {/* 将含有class属性的元素更改背景色 */background-color: aqua;
}4.2 属性值完全匹配选择器
要求属性值完全匹配指定的值。例如:
/* 属性值完全匹配选择器完全匹配属性名与属性值 */
[classinput] {background-color: bisque;
}
[typepassword] {background-color: green;
}4.3 部分属性值匹配选择器
包含匹配使用*符号如[class*btn]会选择class属性值中包含btn的元素。开头匹配使用^符号如[href^https://]会选择href属性值以https://开头的元素。结尾匹配使用$符号如[src$.jpg]会选择src属性值以.jpg结尾的元素。
/* 部分属性值匹配选择器根据匹配规则选择特定元素 */
/* 1.包含匹配*:包含特定属性值将会被选中 */
[class*s] {/* 两个button按钮将会更改背景颜色他们class属性中都包含s */background-color: red;
}
/* 2.开头匹配^:包含特定属性值开头将会被选中 */
[class^p] {/* 父元素parent和input的password会被设置背景色 */background-color: pink;
}
input[class^p] {/* 只有input的password会更改背景色 */background-color: skyblue;
}
/* 3.结尾匹配$:包含特定属性值结尾将会被选中 */
div [class$t] {/* div的后代中input和重置按钮会被设置背景色 */background-color: pink;
}
div input[class$t] {/* div的后代中只有input会更改背景色 */background-color: skyblue;
}4.4 多个属性选择器
可以同时根据多个属性来选择元素。例如:
/* 4.多个属性嵌套:可以同时写多个属性匹配值 */
[class*b][class$e] {/* 满足class属性值由b开头e结尾只有保存按钮 */background-color: gray;
}五、伪类选择器
5.1 链接伪类
:link用于选择未被访问的链接。:visited用于选择已被访问的链接。
a:link {color: blue;
}
a:visited {color: purple;
}5.2 用户操作伪类
:hover当鼠标悬停在元素上时应用样式。:active当元素被激活如点击鼠标左键按下未松开时时应用样式。
button:hover {background-color: lightgray;
}
button:active {background-color: gray;
}5.3 目标伪类:target
用于选择当前活动的锚点元素即 URL 中带有#片段标识符所指向的元素。例如当点击一个指向#section1的链接时#section1元素可以通过:target伪类来添加样式。
#section1:target {background-color: yellow;
}5.4 语言伪类:lang()
根据元素的语言属性来选择元素。例如:lang(en)会选择lang属性值为en的元素。
:lang(en) {quotes: ;
}5.5 CSS3 新增伪类选择器
5.5.1 结构伪类
页面结构示例 div idflath3结构类型i伪类/i/h3div这是第1个盒子/divdiv这是第2个盒子/divp这是第3个盒子/pdiv这是第4个盒子/divp这是第5个盒子/pdiv这是第6个盒子/div/div:first-child选择某个元素的第一个子元素。例如p:first-child会选择作为父元素第一个子元素的p元素。:last-child选择某个元素的最后一个子元素。:nth-child(n)选择某个元素的第n个子元素可以是具体数字、公式如2n表示偶数位置的子元素2n 1表示奇数位置的子元素。:nth-of-type(n)与:nth-child(n)类似但从最后一个子元素开始计数。:nth-child(n)选择同类型的第n个子元素。例如p:nth - of - type(2)选择父元素下第二个p类型的子元素。:nth-last-of-type(n)从最后一个同类型子元素开始计数选择第n个。:only-child选择父元素中唯一的子元素。
/* :first-child 选择flat下第一个div元素*/
#flat div:first-child {/* 不生效因为flat下第一个元素不是div */background-color: red;
}
/* :last-child 选择flat下最后一个div元素*/
#flat div:last-child {background-color: red;
}
/* :nth-child(2n) 从前往后选择flat下偶数元素设置样式 */
#flat div:nth-child(2n) {/* 注意会在同一级下找偶数元素如果不是div标签则不会更改 *//* 所以只有盒子1变色 */background-color: pink;
}
/* :nth-last-child(2n) 从后往前选择flat下偶数元素设置样式 */
#flat div:nth-last-child(2n) {/* 注意会在同一级下找偶数元素如果不是div标签则不会更改 *//* 所以只有盒子1变色 */background-color: skyblue;
}
/* :nth-of-type(2n) 从前往后选择flat下所有div元素偶数元素设置样式 */
#flat div:nth-of-type(2n) {/* 注意会把同一级div进行筛选不会受其他元素印象 *//* 所以2、6会更改背景颜色 */background-color: pink;
}
/* :nth-last-of-type(2n) 从后往前选择flat下所有div元素偶数元素设置样式 */
#flat div:nth-last-of-type(2n) {/* 注意会把同一级div进行筛选不会受其他元素印象 *//* 所以4、1会更改背景颜色 */background-color: skyblue;
}
/* :only-child选择父元素中唯一的子元素 */
#flat h3:only-child {/* 不生效h3同级下有其他标签不满足条件 */color: red;
}
#flat h3i:only-child {/* 生效h3下只有i标签 */color: red;
}5.5.2 否定伪类:not()
用于排除某些元素。例如:not(p)会选择除了p元素之外的所有元素。
div:not(.special) {color: red;
}5.5.3 表单相关伪类
:enabled选择所有可用的表单元素。:disabled选择所有禁用的表单元素。:checked选择所有被选中的单选框或复选框。:indeterminate选择状态不确定的表单元素如部分浏览器中未完全选中的复选框组。
input:enabled {background-color: white;
}
input:disabled {background-color: red;
}六、伪元素选择器
6.1 ::before 和 ::after
这两个伪元素用于在元素内容之前或之后插入生成内容。例如可以用来添加装饰性的图标或文本。
p::before {content: 前缀 ;color: green;
}
p::after {content: 后缀;color: green;
}6.2 ::first-letter 和 ::first-line
::first-letter用于选择元素内容的第一个字母可以对其设置独特的样式常用于首字下沉效果。::first-line用于选择元素内容的第一行可对其进行单独的样式设置。
p::first-letter {font-size: 200%;color: red;
}
p::first-line {font-style: italic;
}6.3 CSS3 新增伪元素选择器
6.3.1 ::selection
用于选择用户在网页上选中的文本内容可以为其设置样式如改变背景色和文本颜色。
::selection {background-color: lightblue;color: white;
}七、总结
CSS 选择器为我们提供了丰富多样的方式来选择和操作 HTML 元素从基本的标签、类、ID 选择器到复杂的组合选择器、属性选择器、伪类和伪元素选择器。特别是 CSS3 新增的选择器进一步增强了我们对网页元素的选择和样式控制能力能够创建出更加丰富和细腻的网页视觉效果。在实际开发中根据不同的需求灵活运用这些选择器可以提高代码的效率和可维护性。同时需要注意选择器的性能问题尽量避免使用过于复杂或性能消耗大的选择器以确保网页的加载速度和用户体验。
