关于css属性选择器常用的有：
1.普通选择器
-
id选择器（#box），选择id为box的元素
-
类选择器（.one），选择类名为one的所有元素
-
标签选择器（div），选择标签为div的所有元素
-
后代选择器（#box div），选择id为box元素内部所有的div元素 (选择左右后代元素)
-
子选择器（.one>.one_1），选择父元素为.one的所有.one_1的元素 （只选择儿子元素）
-
相邻同胞选择器（.one+.two），选择紧接在.one之后的.two元素
image.png
-
群组选择器（div,p），选择div、p的所有元素
-
交集选择器（div.red）,选择既是div标签，class又是red的元素注意点：
①、交集选择器中的选择器之间是紧挨着的，没有东西分隔；
②、交集选择器中如果有标签选择器，标签选择器必须写在最前面
2.伪类选择器
伪类是选择器的一种，它用于选择处于特定状态的元素;
2.1 动态伪类
a:link ：选择未被访问的链接
a:visited：选取已被访问的链接
a:hover ：鼠标指针浮动在上面的元素
a:active： 激活的链接（鼠标在链接上长按住未松开）
◼ 使用注意
:hover必须放在:link和:visited后面才能完全生效
:active必须放在:hover后面才能完全生效
所以建议的编写顺序是 :link、:visited、:hover、:active
◼ 除了a元素，:hover、:active也能用在其他元素上
◼ :focus指当前拥有输入焦点的元素（能接收键盘输入）
文本输入框一聚焦后，背景就会变红色
◼ 因为链接a元素可以被键盘的Tab键选中聚焦，所以:focus也适用于a元素
◼ 动态伪类编写顺序建议为
:link、:visited、:focus、:hover、:active
◼ 直接给a元素设置样式，相当于给a元素的所有动态伪类都设置了
相当于a:link、a:visited、a:hover、a:active、a:focus的color都是red
2.2 伪元素选择器
:first-letter ：用于选取指定选择器的首字母
:first-line ：选取指定选择器的首行
:before : 选择器在被选元素的内容前面插入内容
:after : 选择器在被选元素的内容后面插入内容
在某个我是div元素的前面和后面分别插入两个span元素，第一个方法就是直接在div元素前后插入两个div元素。但是如果要在很多元素前后都插入这两个span元素的化，就很麻烦。需要copy很多。这个时候就可以用：before和：after的content。给要加的元素都加一个统一的类名，然后类名：before; 如果content位置不好看，可以通过relative定位微调。
<!-- 伪元素方案 -->
<div class="box3 item">我是box3</div>
<div class="box4 item">我是box4</div>
<div class="box5 item">我是box5</div>
.item::before {
content: "321";
color: orange;
font-size: 20px;
}
.item::after {
/* content: "cba"; */
content: url("../images/hot_icon.svg");
color: green;
font-size: 20px;
/* 位置不是很好看(以后) */
position: relative; /* 相对定位 */
left: 5px;
top: 2px;
}
/* 额外的补充 */
/* ::after是一个行内级元素 */
.box5::after {
/* 使用伪元素的过程中, 不要将content省略 */
content: "";
display: inline-block;
width: 8px;
height: 8px;
background-color: #f00;
}
After和before实际上都是行内元素。所以如果你要显示8*8的红色方块，你就得设置display为inline-block，然后才可以设置width和height。设置为block就会在div后面一行。
2.3 伪类选择器
常用一下6个
1.：nth-child()
◼ :nth-child(1)
是父元素中的第1个子元素
◼ :nth-child(2n)
n代表任意正整数和0 是父元素中的第偶数个子元素（第2、4、6、8......个）
跟:nth-child(even)同义
◼ :nth-child(2n + 1)
n代表任意正整数和0 是父元素中的第奇数个子元素（第1、3、5、7......个）
跟:nth-child(odd)同义
◼ nth-child(-n + 2)
代表前2个子元素
image.png
style>
/* 需求: 选择ul中的li元素, 并且是第2个子元素 */
ul> li:nth-child(2){
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
如果第二个元素是span元素
image.png
<style>
/* 需求: 选择ul中的li元素, 并且是第2个子元素 */
ul> li:nth-child(2){
background-color: red;
}
</style>
那么就没有元素会被选择上
2.：nth-last-child()
◼ :nth-last-child()的语法跟:nth-child()类似，不同点是:nth-last-child()从最后一个子元素开始往前计数
:nth-last-child(1)，代表倒数第一个子元素
:nth-last-child(-n + 2)，代表最后2个子元素
-
:nth-of-type()
◼ :nth-last-child()的语法跟:nth-child()类似，不同点是:nth-last-child()从最后一个子元素开始往前计数
:nth-last-child(1)，代表倒数第一个子元素
:nth-last-child(-n + 2)，代表最后2个子元素
4.:nth-last-of-type()
◼ :nth-last-of-type()用法跟:nth-of-type()类似
不同点是:nth-last-of-type()从最后一个这种类型的子元素开始往前计数
image.png
style>
/* 需求: 选择ul中的li元素, 并且是第2个子元素 */
/* ul> li:nth-child(2){
background-color: red;
} */
/* 需求: 选择ul中的第2个li元素(排除所有的干扰项) */
/* 元素:nth-of-type, 只计算符合我元素类型的数量的元素 */
ul> li:nth-of-type(2){
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<span>span</span>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
- :root，根元素，就是HTML元素
- :empty代表里面完全空白的元素
/* html元素 */
:root {
font-size: 30px;
}
:empty {
width: 100px;
height: 100px;
background-color: #f00;
}/*也就是选择container这个class这个div*/
<div class="container"></div>
网友评论