我要投稿

css 兄弟选择器-10.CSS3样式

bendan520 css

2023-08-26 0 9,030 百度已收录

进不了网站？换个网络试试！

CSS3 样式属性选择器以 xx 开头：选择器[attribute-name^=value]{text-style-attribute} 以 xx:selector[attribute-name$=value]{text-style-attribute} 结尾包含 xx:selector[属性名称* =值]{文本样式属性}


		.one1{font-weight: bold;}
		.one2{font-style: italic;}
		#onemate{font-weight: bold;}
		#twomate{font-style: italic;}
		p[class^="one"]{
			font-family: 楷体;
		}
		p[id$="mate"]{
			letter-spacing: 10px;
		}
		p[id*="w"]{
			text-shadow:10px 10px 10px red;
		}

<p class="one1">你好世界
<p class="one2">世界你好
<p class="one3">你好世界
<p id="onemate">你好世界
<p id="twomate">世界你好

关系选择器子选择器：>

主要用于选择某个元素的第一级子元素（注意：父亲的子元素不生效）


		.two>.three{/*这里换成p>span，下面删去class，效果会保持一致。如果没有定义过,会自动初始化*/
			font-family: 楷体;
		}

兄弟选择器：相邻：+Normal：~1，相邻兄弟选择器：p之后的第一个h2选择器会改变


		p+h2{
			letter-spacing: 20px;
		}

你好啊
你好
你好啊

2.普通兄弟选择器：与p同父元素的h2选择器会发生变化


		p~h2{
			font-family: 楷体;
		}

你好啊
你好
你好啊
你好

结构伪类选择器：根选择器

它用于匹配文档的根元素。在HTML中，根元素仍然是html元素，即“:root选择器”定义的样式对所有页面元素都有效

例如：:root{color:red;}，将所有文本设置为黄色

：不是选择器

用于排除该结构元素下方的子结构元素，使其不适用于该样式

例如：body*:not(h3){color:orange;}（注意body前面有一个空格），排除body结构中的子结构元素h3

:独生子选择器

用于匹配属于父元素唯一子元素的元素，即如果一个父元素只有一个子元素css 兄弟选择器，则可以通过该选择器选择该元素

例如：li:only-child{color:red;}，设置该元素为ul的唯一子元素

:第一个子级和最后一个子级选择器

用于分别设置父元素中第一个和最后一个子元素的样式

例如：p:first-child{color:pink;}p:last-child{color:pink;}，只有父元素体中第一个和最后一个p标签受影响

:nth-child(n) 和 :nth-last-child(n) 选择器

可以选择父元素中第n个子元素的设置样式

例如：p:nth-child(2){color:pink;}p:nth-last-child(n){color:pink;}，父元素体中第二个和倒数第二个p标签受影响

:nth-of-type(n) 和 :nth-last-of-type(n) 选择器

与前面的选择器不同的是css 兄弟选择器，这个选择器匹配父元素的子元素时，与元素类型无关，里面的匹配特定的元素类型

例如： h2:nth-of-type(odd){color:pink;}h2:nth-of-type(even){color:blue;}p:nth-last-of-type(2){font- Weight :bold;}，将所有h2元素中所有偶数行的字体设置为粉棕色，将所有奇数行的字体设置为白色，并将倒数第二个p元素的字体设置为粗体

: 空选择器

选择没有子元素或空文本内容的所有元素

例如：:empty{background-color:red;}，将没有子元素或文本内容的元素背景设置为黄色

: 目标选择器

它用于指定页面中 tager 元素的样式（元素的 id 用作页面中的超链接）。只有当用户点击页面上的超链接，而是跳转到 tager 元素后，:target 选择器设置的样式才能生效。

例如：:target{background-color:blue;}，点击跳转到对应位置，跳转目标会被设置为对应的背景色，点击下一个时上一个无效

伪选择器

它是 CSS 中定义的伪元素的选择器。伪元素选择器用于在所选元素的内容上方或前面插入内容。必须使用 content 属性来指定要插入的具体内容。

:选择器之前

例如：p:before{content: "Hello world";}，在p标签之前插入文本

:选择器之后

例如：p:after{content:url(1/1.jpg);}，在p标签后面插入图片（url填写绝对地址或相对地址）