目录
交集选择器
交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。其中第一个为标签选择器，第二个为类选择器，两个选择器之间不能有空格。
<style>
/* 交集选择器的书写要求：
1.第一个选择器必须是标签选择器
2.第二个选择器必须是类选择器
3.两个选择器中间不加空格，加点 */
/* 含义：class名为one的p标签 */
p.one{
color: aqua;
}
h2.one{
color:aquamarine;
}
</style>
<body>
<p class="one">我是第一个</p>
<p class="one">我是第二个</p>
<p class="three">我是第三个</p>
<h2 class="one">我是标题</h2>
</body>
并集选择器
并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。
<style>
/* 并集选择器 就是和的意思 选择器类型不限制 多个选择器之间用逗号连接 */
p,
h2,
.a{
color:aquamarine;
}
</style>
</head>
<body>
<p>我是段落</p>
<h2>我是标题</h2>
<div class="a">我是普通盒子</div>
</body>
后代选择器
后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。 子孙后代都可以这么选择。 或者说，它能选择任何包含在内 的标签。
<style>
/* 书写规范： 父级选择器 空格 子代 以下都可以*/
div p{
color:red;
}
.father .son{
background-color:green;
}
div .son{
text-align: center;
}
</style>
</head>
<body>
<div class="father">
爸爸
<p class="son">
儿子
</p>
</div>
</body>
子元素选择器
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。
<style>
/* 子元素选择器 多个选择器之间用>连接，只能找到亲儿子 */
.one>p>span{
color:aqua;
}
/* 子元素选择器只能一级一级找 不能跨级，下面是错误的 */
/* div>span{
color: green;
} */
</style>
</head>
<body>
<div class="one">
爸爸
<p>
儿子
<span>
孙子
</span>
</p>
</div>
</body>
链接伪类选择器
-
:link /* 未访问的链接 */
-
:hover /* 鼠标移动到链接上 */
-
:active /* 选定的链接 */
-
:visited /* 已访问的链接 */
<style> /* 注意他们写的顺序：lvha */ /* 链接未访问时的样式 */ a:link{ color:pink; } a:visited{ color:aqua; } /* 鼠标移动到链接上 (最常用)*/ a:hover{ color:red; } /* 选定的链接 */ a:active{ color:purple; } /* 已访问的链接 */ p:hover{ background-color: aquamarine; } </style> </head> <body> <a href="#">百度</a> <p>我是段落</p> </body>
结构伪类选择器
E:first-child
选择父元素的第一个子元素E。
E:last-child
选择父元素的最后一个子元素E。
E:nth-child(n)
匹配父元素的第n个子元素E，假设该子元素不是E，则选择器无效。
E:nth-last-child(n)
匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择器无效。
E:nth-of-type(n)
匹配同类型中的第n个同级兄弟元素E。
该选择器总是能命中父元素的第n个为E的子元素，不论第n个子元素是否为E
<style>
/* li的父亲的第一个孩子 是li标签 才能生效 */
li:first-child{
color:red;
}
/* li的父亲的最后一个孩子 是li标签 才能生效 */
li:last-child{
color:aqua;
}
/* li的父亲的第二个孩子 是li标签 才能生效 */
li:nth-child(2){
color:blue;
}
/* odd 奇数 even 偶数 */
/* n 可以是数字 也可以是表示奇偶的英文 还可以是公式 */
li:nth-child(2n+1){
color:pink;
}
li:nth-child(even){
color:green;
}
/* 同类标签的第几个，括号里也可以是公式 */
li:nth-of-type(2){
font-size: 40px;
}
</style>占位符选择器
E::placeholder , 修改占位符样式
<style>
input::placeholder{
color:pink;
/* 修改占位符里面的文字大小 有最小临界值 12px */
font-size: 12px;
}
</style>
</head>
<body>
<input type="text" placeholder="123">
</body>
伪元素选择器
- E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
-
E::first-line 文本第一行；
-
E::selection 可改变选中文本的样式；
-
E::before和E::after 在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。
<style> /* first-letter 是选中文本的第一个字或单词 */ p::first-letter{ font-size: 30px; color:palegreen; } /* first-line 文本第一行 */ p::first-line{ background-color: darkorange; } /* section 改变选中文本的样式 */ p::selection{ color:blueviolet; background-color: aqua; } /* 伪元素设置的内容是无法选中的 */ p::before{ /* content 设置伪元素的内容 */ content: "我是后加的"; color:brown; font-size: 30px; } p::after{ content: "我是后加的结尾"; } </style> </head> <body> <p> 你寂寞。泰戈尔说：“我们把世界看错了，反说他欺骗我们。” 你自卑。“你之所以感到巨人高不可攀，那只是因为你跪着。” 你痛苦。牧师悄悄告诉你：“人比神伟大，因为神不懂得痛苦。” 你违心。知道吗：“世界上有许多事情必须做，但你不一定喜欢做，这就是责任的全部意义。” 你懊悔。聂?鲁达《太阳颂歌》中说：“过去我不了解太阳，那时我过的是冬天.......” 你焦急。大仲马讲：“人生就是不断的等待与希望。” </p> </body>
选中：
属性选择器
<style>
a[href="#"]{
color:red;
}
[href="index.html"]{
color:aqua;
}
[class="one"]{
color:blueviolet;
}
[type="text"]{
outline-color: red;
}
/* 1.以什么为开头去选择 */
[href^="a"]{
color:brown;
}
/* 2.以什么为结尾 */
[href$="d.html"]{
font-size: 40px;
}
/* 3.只要含有这个属性，并且属性值里面包含这个字母的就可以选中 */
[href*="b"]{
font-style: italic;
}
</style>
<body>
<p class="one">我是p标签</p>
<p class="two">我是大p</p>
<a href="#">我是a</a>
<a href="index.html">我也是a</a>
<img src="" alt="你好">
<input type="text">
<input type="password" name="" id="">
<h2 class="three">我是标题</h2>
<a href="abc.html">abc</a>
<a href="abcd.html">abcd</a>
<a href="bcd.html">bcd</a>
<p class="abc" href="bbb.html">我是段落</p>
</body>
100
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
