CSS选择器

最新推荐文章于 2023-10-16 14:58:40 发布

liuyicheng2yishu

最新推荐文章于 2023-10-16 14:58:40 发布

阅读量704

点赞数

分类专栏： Web编程文章标签： css

本文链接：https://blog.csdn.net/liuyicheng2yishu/article/details/107297863

版权

Web编程专栏收录该内容

0 篇文章 0 订阅

订阅专栏

一、CSS 元素选择器

如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身，例如：

html {color:black;}

h3 {color:blue;}

二、通配符选择器

显示为一个星号（*），匹配所有的元素，例如设置所有元素的颜色：* {color:red;}

三、CSS 类选择器

1、类选择器是匹配定义了类名的元素，相同的类名可以在多个元素中定义，CSS 中类选择器以 ".类名" 来定义。例如：

设置定义了"class1"类名的所有元素的颜色，例如：

.class1 {color: #308EF1;}

.class2 {font-size: 25px;}

<p class="class1">p2元素定义了class1类名，设置字体颜色浅蓝色。</p>

<p class="class2">p3元素定义了class2类名，设置字体大小为25px。</p>

2、CSS 多类选择器：

匹配同时包含这些类名的元素（类名不用考虑顺序，必须同时包含全部定义的类名才能匹配），例如：

.class1.class2 {font-style:oblique;}

.class1.class2.class3 {background-color:#E6F73D; width: 1000px;}

<p class="class1 class2">p4元素同时定义了class1、class2类名，除了具有p2、p3的设置，还设置了字体倾斜。</p>

<p class="class1 class2 class3">p5元素同时定义了class1、class2、class3类名，除了具有p4的设置，还设置了背景色。</p>

四、ID选择器

ID选择器匹配定义了ID名的元素，一个ID名在文档中只能定义在一个元素上，而且一个元素也只能定义一个ID，ID选择器只应用到单一的元素上。CSS 中ID选择器以 "#ID名" 来定义，例如：

#id1 {margin-left: 30px;}

#id2 {border: #57DC66 solid 2px; width:300px;}

<p id="id1">p1元素定义了id1名，设置左外边距30px。</p>

<p id="id2">p2元素定义了id2名，设置了边框。</p>

五、属性选择器

[attribute] 用于选取带有指定属性的元素。

[attribute=value] 用于选取带有指定属性和值的元素，选择属性值完全等于value的所有元素。

[attribute~=value] 用于选取属性值中包含指定词汇的元素，属性值可以是一个单词或者用空格隔开的多个单词，“value”是属性值中其中一个单词。

[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。选择属性值是“value”或者以“value-”开头后面紧跟任何字符的所有元素。

[attribute^=value] 匹配属性值以指定值开头的每个元素，选择属性值是“value”或者以“value”开头后面紧跟任何字符的所有元素。

[attribute$=value] 匹配属性值以指定值结尾的每个元素，选择属性值是“value”或者以“value”结尾前面是任何字符的所有元素。

[attribute*=value] 匹配属性值中包含指定值的每个元素，选择属性值包含有“value”子串，“value子”串的前后可以是任何字符的所有元素。

1、如果希望选择有某个属性的元素，而不论属性值是什么，可以使用 [属性名] ，例如：

[title] {font-style:oblique;}

a[href] {color: #F50C10;}

同时匹配 href 和 title 属性：

a[title][href] {font-size: 30px;}

2、完全匹配属性值 [属性名="属性值"] ，例如：

p[title="title2"] {color: #43B02D;}

p[class="class4 class5"] {color: #DF23EB;}

注意完全匹配必须属性值完全相同，上面若写成p[class="class5"] 是不会匹配的。

3、根据部分属性值选择，如果需要根据属性值中的词列表的某个词进行选择，则使用[attribute~=value]，属性值可以是单个词，也可以是由空格隔开的多个词，例如：

p[class~="class6"] {color:#F0E809;}

<p class="class6">[class~="class6"] 匹配属性值只有一个词"class6"，设置字体为粉红色。</p>

<p class="class6 12"> [class~="class6"] 匹配属性值由空格隔开的多个词中的"class6"，设置字体为粉红色。</p>

<p class="class6-12"> [class~="class6"] 不能匹配属性值只有一个词"class6-12"。</p>

<p class="class61"> [class~="class6"] 不能匹配属性值只有一个词"class61"。</p>

4、子串匹配属性选择器，这是正则表达式匹配属性值中的子串：

[lang|="def"] 选择 lang 属性值是 "def" 或者以 "def-" 开头的所有元素

[lang^="def"] 选择 lang 属性值是 "def" 或者以 "def" 开头的所有元素

[lang$="def"] 选择 lang 属性值是 "def" 或者以 "def" 结尾的所有元素

[lang*="def"] 选择 lang 属性值中包含子串 "def" 的所有元素

例如：

[lang|="def"] {color:blue;} 匹配p1、p2元素，设置字体颜色为蓝色。

[lang^="def"] {font-size: 25px;} 匹配p1、p2、p3元素，设置字体大小25px。

[lang$="def"] {font-style:oblique;} 匹配p1、p4元素，设置字体倾斜。

[lang*="def"] {border: #F90B0F solid 2px; width: 800px;} 匹配p1、p2、p3、p4、p5元素，设置背景色为浅绿色。

<p lang="def">p1元素文本内容。</p>

<p lang="def-us">p2元素文本内容。</p>

<p lang="default">p3元素文本内容。</p>

<p lang="lastdef">p4元素文本内容。</p>

<p lang="lastdefop">p5元素文本内容。</p>

六、分组选择器和嵌套选择器

1、在样式表中有很多具有相同样式的元素，为了尽量减少代码，你可以使用分组选择器，每个选择器用逗号分隔，例如：

span, div, .groud1, p.groud2 {color: green;}

<span>span元素使用了分组选择器</span>

<div>div元素使用了分组选择器</div>

<p class="groud1">p元素使用了分组选择器</p>

<p class="groud2">p元素使用了分组选择器</p>

2、嵌套选择器：

p{ }: 为所有 p 元素指定一个样式。

.nesting{ }: 为所有 class="nesting" 的元素指定一个样式。

.nesting p{ }: 为所有 class="nesting" 元素内的 p 元素指定一个样式。类名和元素用空格隔开，类名定义在包含p元素的父元素。

p.nesting{ }: 为所有 class="nesting" 的 p 元素指定一个样式。不需要空格隔开，类定义在p元素。

例如：

.nesting {background-color: #5BC46D; width: 500px;}

.nesting p{font-size: 25px;}

p.nesting {color:#0975C3;}

<div class="nesting"><p>嵌套选择器：.nesting p{ } 匹配此p元素。</p></div>

<p class="nesting">嵌套选择器：p.nesting{ } 匹配此p元素。</p>

七、后代选择器和子选择器

1、后代选择器又称包含选择器，后代选择器是选择某元素的所有指定后代元素，即选择某元素包含的所有指定元素，包含顺序是左边包含右边，用空格隔开，例如：

p em {color: red;}

<p>p元素包含<em>em元素</em>，后代选择器会选择em元素并设置字体为红色。</p>

后代选择器应用在链接：当不同的框里背景颜色不相同，若其中一个框的背景色和链接的颜色相同，则会导致链接看不见，这时可以使用后代选择器设置各个框的链接为不同的颜色。

div.afterworld1 {background-color: #70C453; width:300px;}

div.afterworld1 a {color:#1C58C0;}

div.afterworld2 {background-color: #65E6F1; width:300px;}

div.afterworld2 a {color:red;}

<div class="afterworld1"><a href="http://w3school.com.cn">w3school</a></div>

2、子元素选择器与后代选择器相比，只选择某个元素的子元素，即限制了选择范围，顺序是从左向右一代到下一代的子元素，父子关系结构要完全和选择器相同，子选择器使用了 > 号，> 号两边可以有空格：

div.father1 > p {color: red;}

<span>子元素选择器没有选择span元素</span>

<p>子元素选择器选择了p元素并设置字体颜色为红色</p>

</div>

3、后代选择器和子元素选择器的区别

div.father2 > ul > li {color: red;}

div.father2 ul li {background-color: #70C453; width:600px;}

<div class="father2"><ul><li>子元素选择器只能一代接一代选择，父子关系结构要完全和选择器相同</li></ul></div>

<div class="father2"><div><ul><div><li>后代选择器只要ul li元素包含在div.father2内就可以，不管中嵌套了多少层div</li></div></ul></div></div>

上面代码子元素选择器只会设置第一行的li为红色，因为父子关系结构只能是 div.father2 > ul > li ，第二行li有 div 元素隔开则不匹配，注意用 p 元素嵌套也会被子元素选择器匹配的，因为 p 元素不能嵌套块级元素。而后代选择器会设置两行li的背景色，因为只需要 ul 是包含在 div.father2 内，并且 li 是包含在 ul 内就匹配。

八、相邻兄弟选择器

相邻兄弟选择器是选择紧接在某元素后的元素，且二者有相同父元素。使用 + 号来定义，+ 号左右可以有空格：

1、h4 + p {color: blue;}

相邻兄弟选择器会设置 h4 后面第一个同级的 p 元素字体为蓝色，他们有相同的父元素，后面还有同级的 p 元素也不会匹配。

2、p + p {color: red;}

相邻兄弟选择器会设置第一个同级 p 元素后面的所有同级 p 元素字体为红色，但是后面有同级的 p 元素设置了类名或ID名等后将不会匹配。

3、p.p2 + p {font-weight: bolder;}

相邻兄弟选择器会设置设置了类名或ID名的 p 元素后面的第一个同级的 p 元素字体为加粗，后面还有同级的 p 元素也不会匹配。

4、若要使相邻兄弟选择器选择某元素后的所有同级元素，不管是否相同的元素，还是有没定义了类名或ID名，都会被匹配，这时可以将 + 号换为 ~ 号就可以。

p ~ p {font-style:oblique;} 设置第一个同级 p 元素后面的所有同级 p 元素字体为倾斜。

h4 ~ p {background-color: #E6F73D; width: 600px;} 设置h4 后面所有同级 p 元素背景色为黄色。

p.p2 ~ p {border:#5A9331 solid 2px;} 设置类名为 p2 的 p 元素后面的所有同级 p 元素加边框。

具体代码：

div.brother1 p + p {color: red;}

div.brother1 h4 + p {color: blue;}

div.brother1 p.p2 + p {font-weight: bolder;}

div.brother1 p ~ p {font-style:oblique;}

div.brother1 h4 ~ p {background-color: #E6F73D; width: 600px;}

div.brother1 p.p2 ~ p {border:#5A9331 solid 2px;}

<p>兄弟p1：p + p 选择兄弟p3、兄弟p4并设置为红色，但不会选择定义了类名的兄弟p2。</p>

<h4>兄弟h4：h4 + p 只会选择后面的第一个元素兄弟p2，并设置为蓝色。</h4>

<p class="p2">兄弟p2：p.p2 + p 只会选择后面的第一个元素兄弟p3，并设置字体加粗。</p>

</div>

实例代码：

<!doctype html>

<html>

<head>

<title>CSS选择器</title>

<style>

/*CSS 元素选择器*/

html {color:black;}

h3 {color:red;}

/*CSS 类选择器*/

.class1 {color: #308EF1;}

.class2 {font-size: 25px;}

/*CSS 多类选择器*/

.class1.class2 {font-style:oblique;}

.class1.class2.class3 {background-color:#E6F73D; width: 1000px;}

/*CSS ID选择器*/

#id1 {margin-left: 30px;}

#id2 {border: #57DC66 solid 2px; width:300px;}

/*CSS 属性选择器*/

[title] {font-style:oblique;}

a[href] {color:#21A0F0;}

a[title][href] {font-size: 30px;}

[title="title2"] {color:green;}

[class="class4 class5"] {color: #DF23EB;}

[class~="class6"] {color:hotpink;}

[lang|="def"] {color:blue;}

[lang^="def"] {font-size: 25px;}

[lang$="def"] {font-style:oblique;}

[lang*="def"] {width: 500px; background-color: #8DC75E;}

/*分组选择器和嵌套选择器*/

span, .groud1, p.groud2 {color: green;}

.nesting {background-color: #5BC46D; width: 500px;}

.nesting p{font-size: 25px;}

p.nesting {color:#0975C3;}

/*后代选择器和子选择器*/

p em {color: red;}

div.afterworld1 {background-color: #70C453; width:300px;}

div.afterworld1 a {color:#1C58C0;}

div.afterworld2 {background-color: #65E6F1; width:300px;}

div.afterworld2 a {color:red;}

div.father1 > p {color: red;}

div.father2 > ul > li {color: red;}

div.father2 ul li {background-color: #70C453; width:600px;}

/*相邻兄弟选择器*/

div.brother1 p + p {color: red;}

div.brother1 h4 + p {color: blue;}

div.brother1 p.p2 + p {font-weight: bolder;}

div.brother1 p ~ p {font-style:oblique;}

div.brother1 h4 ~ p {background-color: #E6F73D; width: 600px;}

div.brother1 p.p2 ~ p {border:#5A9331 solid 2px;}

</style>

</head>

<body>

<p>p1元素没有定义类</p>

<p class="class1">p2元素定义了class1类名，设置字体颜色浅蓝色。</p>

<p class="class2">p3元素定义了class2类名，设置字体大小为25px。</p>

<p class="class1 class2">p4元素同时定义了class1、class2类名，除了具有p2、p3的设置，还设置了字体倾斜。</p>

<p class="class1 class2 class3">p5元素同时定义了class1、class2、class3类名，除了具有p4的设置，还设置了背景色。</p>

<h3>2、CSS ID选择器：</h3>

<p id="id1">p1元素定义了id1名，设置左外边距30px。</p>

<p id="id2">p2元素定义了id2名，设置了边框。</p>

<h3>3、CSS 属性选择器：</h3>

<a title="title1"> [title] 配置有 title 属性的元素，设置字体倾斜</a><br/>

<a href="http://w3school.com.cn"> [href] 匹配有 href 属性的元素，设置字体为浅蓝色</a><br/>

<a title="W3School" href="http://w3school.com.cn"> [title][href] 匹配同时有 title 和 href 属性的元素，设置字体大小30px</a>

<p title="title2"> [title="title2"] 选择属性值完全匹配的元素，设置字体绿色。</p>

<p class="class4 class5"> [class="class4"]不能匹配，必须写成[class="class4 class5"]才是完全匹配，设置字体为紫色。</p>

<p class="class6">[class~="class6"] 匹配属性值只有一个词"class6"，设置字体为粉红色。</p>

<p class="class6 12"> [class~="class6"] 匹配属性值由空格隔开的多个词中的"class6"，设置字体为粉红色。</p>

<p class="class6-12"> [class~="class6"] 不能匹配属性值只有一个词"class6-12"。</p>

<p class="class61"> [class~="class6"] 不能匹配属性值只有一个词"class61"。</p>

<p>子串匹配属性选择器，这是正则表达式匹配属性值中的子串：</p>

<p> [lang|="def"] {color:blue;} 匹配p1、p2元素，设置字体颜色为蓝色。</p>

<p> [lang^="def"] {font-size: 25px;} 匹配p1、p2、p3元素，设置字体大小25px。</p>

<p> [lang$="def"] {font-style:oblique;} 匹配p1、p4元素，设置字体倾斜。</p>

<p> [lang*="def"] {border: #F90B0F solid 2px; width: 800px;} 匹配p1、p2、p3、p4、p5元素，设置背景色为浅绿色。</p>

<p lang="def">p1元素文本内容。</p>

<p lang="def-us">p2元素文本内容。</p>

<p lang="default">p3元素文本内容。</p>

<p lang="lastdef">p4元素文本内容。</p>

<p lang="lastdefop">p5元素文本内容。</p>

<h3>4、分组选择器和嵌套选择器：</h3>

<span>span元素使用了分组选择器</span>

<div class="groud1">div元素使用了分组选择器</div>

<p class="groud2">p元素使用了分组选择器</p>

<div class="nesting"><p>嵌套选择器：.nesting p{ } 匹配此p元素。</p></div>

<p class="nesting">嵌套选择器：p.nesting{ } 匹配此p元素。</p>

<h3>5、后代选择器和子选择器：</h3>

<p>p元素包含<em>em元素</em>，后代选择器会选择em元素并设置字体为红色。</p>

<p>后代选择器应用在链接：</p>

<div class="afterworld1"><a href="http://w3school.com.cn">w3school</a></div>

<span>子元素选择器没有选择span元素</span>

<p>子元素选择器选择了p元素并设置字体颜色为红色</p>

</div>

<p>后代选择器和子元素选择器的区别：</p>

<div class="father2"><ul><li>子元素选择器只能一代接一代选择，父子关系结构要完全和选择器相同</li></ul></div>

<div class="father2"><div><ul><div><li>后代选择器只要ul li元素包含在div.father2内就可以，不管中间隔了多少层div</li></div></ul></div></div>

<h3>6、相邻兄弟选择器：</h3>

<p>兄弟p1：p + p 选择兄弟p3、兄弟p4并设置为红色，但不会选择定义了类名的兄弟p2。</p>

<h4>兄弟h4：h4 + p 只会选择后面的第一个元素兄弟p2，并设置为蓝色。</h4>

<p class="p2">兄弟p2：p.p2 + p 只会选择后面的第一个元素兄弟p3，并设置字体加粗。</p>

</div>

</body>

</html>

liuyicheng2yishu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器

一、CSS 元素选择器如果设置HTML 的样式，选择器通常将是某个HTML 元素，比如p、h1、em、a，甚至可以是html 本身，例如：html {color:black;}h3 {color:blue;}二、通配符选择器显示为一个星号（*），匹配所有的元素，例如设置所有元素的颜色：* {color:red;}三、CSS 类选择器1、类选择器是匹配定义了类名的元素，相同的类名可以在多个元素中定义，CSS 中类选择器以".类名" 来定义。例如：设置定义了...
复制链接

扫一扫