css3选择器一览图
一、属性选择器
css3中，追加了三个属性选择器分别为：
1. [att*=val]
含义：所有class/id名中包含val字段的标签
2. [att^=val]
含义：class/id名中首字母为val字段的标签
3. [att$=val]
含义：class/id名中尾字母为val字段的标签
二、结构性伪类选择器
结构性伪类选择器由两部分构成，一是伪类选择器，一是伪元素选择器。
伪类选择器，要注意命名不要与系统定义好的选择器重名，例如link、hover
伪元素选择器中包含 first-line、first-letter、before、after。
- fist-line：向某个元素的第一行使用样式
p:first-line{
color: #5fff36;
}
- first-letter：向某个元素中的首字母使用样式
p:first-letter{
color: #fff638;
}
- before：在某个元素之前，插入一些内容
如果是字符串，要以content：“文字内容”
li:before{
content: "这是新增的内容";
}
- after：在某个元素之后，插入一些内容
li:after{
content: "这是新增的内容";
}
三、选择器 root、not、empty 和 target
- root:对根标签使用样式
:root{
background-color: #DDDDDD;
}
思考：root和body同时设定背景颜色，会怎样？
当root和body起冲突时，body就对内容区域生效，在内容区外则是root生效。
- not：对某个结构元素使用样式，但是又不包含某个子元素时
格式 :not(selector)
.div2 *：not(h1){
color:red
}
- empty：指定元素内容为空白时使用的样式
:empty{
background-color: yellow;
}
- target：对页面中某个target元素使用样式，该样式只在用户点击页面中的超链接并跳转到target元素之后起作用
css部分
:target{
background-color: #3a33d1;
}
html部分
</table>
<a href="#a1">a1</a>|
<a href="#a2">a2</a>|
<a href="#a3">a3</a>|
<a href="#a4">a4</a>
<div id="a1">
<h1>caidan</h1>
<p>content</p>
</div>
<div id="a2">
<h1>caidan</h1>
<p>content</p>
</div>
<div id="a3">
<h1>caidan</h1>
<p>content</p>
</div>
<div id="a4">
<h1>caidan</h1>
<p>content</p>
</div>
实现效果
四、选择器 first-child、last-child、nth-child 和 nth-last-child
1. first-child 对一个父元素中的第一个子元素进行样式的指定
li:first-child{
background-color: yellow;
}
2. last-child 对一个父元素中的最后一个子元素进行样式的指定
3. nth-child（positon） 对一个父元素中的指定序号的子元素进行样式的指定
li:nth-child(3){
background-color: grey;
}
4. nth-last-child对一个父元素中的指定倒数序号的子元素进行样式的指定
li:nth-last-child(3){
background-color: pink;
}
最终呈现效果
- （odd奇数/even偶数）对一个父元素中的第偶数个或第奇数个子元素进行样式的指定
li:nth-child(odd){
font-size: larger;
color: #FFFFFF;
}
最最终呈现效果
五、选择器 nth-of-type 和 nth-last-of-type
- 想要对以上四组内容隔一行设置为同一个样式，（奇偶数样式选定的局限）
1）奇偶数样式选择
此时的奇偶计数，把<p>标签也算上了，所以不是我们想要的效果
h2:nth-child(odd){
background-color: #7ef1d3;
}
2）使用nth-of-type（odd）和nth-of-type（even）
h2:nth-of-type(odd){
background-color: tan;
}
h2:nth-of-type(even){
background-color: pink;
}
六、循环样式
1）使用nth-child
li:nth-child(1){
background-color: red;
}
li:nth-child(2){
background-color: orange;
}
li:nth-child(3){
background-color: yellow;
}
li:nth-child(4){
background-color: green;
}
2）使用nth-child（an+b），a表示每次循环中，包括几种样式，b表示指定的样式在循环中所处的位置。
六、选择器only-child
only-child选择器，在元素只有一个子元素时，可以代替使用 nth-child(1)/nth-last-child(1) 。
li:nth-child(1){
background-color: pink;
}
li:only-child{
background-color: #7ef1d3;
}
七、UI元素状态伪类选择器
在css3选择器中，除了结构性伪类选择器外，还有一种UI元素状态选择器——只有当元素处于某种状态下才起作用，在默认状态下不起作用。
共有17中UI元素状态伪类选择器：hover、active、focus、disabled、read-only、checked、default、indeterminate、selection、invalid、required、optional、in-range
默认样式
1. hover
input[type="text"]:hover{
background-color: #7ef1d3;
}
hover效果
2.focus
input[type="text"]:focus{
background-color: #006666;
}
focus效果/鼠标点击时效果
3.active
input[type="text"]:active{
background-color:pink;
}
active效果/鼠标按住不放开时显示的效果
4.checked
input[type="checkbox"]:checked{
outline: 1px solid red;
}
选中时显示的效果
5.enabled 和disabled
通过js改变输入框的可输入和不可输入状态，通过css样式改变输入框可输入和不可输入状态时的背景颜色。
<input type="radio" id="radio1" name="radio" onchange="radio_change()"/>可用
<input type="radio" id="radio2" name="radio" onchange="radio_change()"/>不可用
<input type="text" id="text" disabled/>
js
function radio_change(){
let radio1 = document.getElementById("radio1");
let radio2 = document.getElementById("radio2");
let text = document.getElemntById("text");
if(radio1.checked){
text.disabled="";
}else{
text.value="";
text.disabled ="disabled"
}
}
6.通用兄弟元素选择器
用来位于同一个父元素之下的，给与一个子元素平级的另一个子元素设定样式
div ~ p{
background-color: tomato;
}
-
上面代码意思为：给div平级的p元素设定样式
网友评论