CSS3选择器

/ CSS / 1 条评论 / 369浏览

基本选择器

常见的选择标签方法

样式选择器示例描述补充
.class.huasen选择 class="huasen" 的所有元素
#id#zhuqi选择 id="zhuqi" 的所有元素(id在元素中尽量唯一化)
**选择所有元素(常用于全局设置)
elementp选择所有p元素
element,elementdiv,p选择所有div元素和p所有元素
element elementdiv p选择div元素内部的所有p元素
element>elementdiv>p选择div父元素元素的所有p子元素
element+elementdiv+p选择紧接在div元素之后的p所有元素

1)使用*为所有元素设置样式

* {
    text-decoration: none;
    color: #6c757d;
}

2 )通过标签名为所有的div元素设置样式

h1 {
	color: red;
}

3)为所有类名为.box设置样式

.box {
    background: red;
}

4)为所有id为.nav设置样式

.nav {
    background: red;
}

结构选择器

通过标签之间的结构关系进行选择并设置样式

样式选择器示例描述补充
element element(后代)div p选择div元素内部的所有p元素
element>element(子选择)div>p选择div父元素为元素的所有p子元素(仅仅获取div下的子元素)
element+element(紧邻)div+p选择紧接在div元素之后的一个p元素
element1~element2(后面)p~lip标签后的所有li标签

属性选择器

通过标签中的属性进行筛选元素并设置样式

选择器示例描述
[attribute][target]带有 target 属性所有元素
[attribute=value][target=_blank]targe 属性 等于"_blank" 的所有元素
[attribute~=value][title~=huasen]title 属性包含单词 "huasen" 的所有元素
[attribute|=value][title|=hs]title 属性值为 "hs"的单词,或hs-jio-连接的的独立单词
[attribute*=value]a[src*="huasen"]src 属性中包含 "huasen" 子串的每个a元素
[attribute^=value]a[src^="https"]src 属性值以 "https" 开头的每个a元素
[attribute$=value]a[src$=".jpeg"]src 属性以 ".jpeg" 结尾的所有a元素

1)选择所有有class属性的div

div[class] {
    color: red;
}

2)多约束操作(选择存在class且存在id的元素)

h1[class][id] {
    color: red;
}

伪类选择器

为元素的不同状态或不确定存在的元素设置样式规则

状态类型示例说明补充
:linka:link选择所有未被访问的a链接
:visiteda:visited选择所有已被访问的a链接
:hovera:hover鼠标移动到a元素上时被选中并设置标签
:activea:active点击正在发生时(鼠标点击不松开就一直选中)
:focusinput:focus选择获得焦点的 input 元素
:root:root选择文档的根元素即html
:emptyp:empty选择没有子元素的每个p元素(包括文本节点)
:first-childp:first-child一堆p标签中的首个标签
:last-childp:last-child一堆p标签中的尾部标签
:first-of-typep:first-of-type首部的p标签元素
:last-of-typep:last-of-type尾部的p标签元素
:only-of-typep:only-of-type父级元素下唯一存在的一个p标签被选中
:only-childp:only-child父级元素下仅存在一个的p标签被选中
:nth-child(n)p:nth-child(2)一堆p标签中的第2个被选中(下标从一开始)
:nth-child(odd)p:nth-child(odd)一堆p标签中的奇数位置的被选中
:nth-child(even)p:nth-child(even)一堆p标签中的偶数位置被选中
:nth-of-type(n)p:nth-of-type(2)一堆类型为p标签中的第二个被选中
:nth-last-child(n)p:nth-last-child(2)一堆p标签中的倒数第二个
:nth-last-of-type(n)p:nth-last-of-type(2)一堆类型为p标签的倒数第二个
:not(selector):not(p)选择非p元素的每个元素

1)超链接伪类

定义超链接的不同状态的样式(注意书写顺序),其他元素也可以使用伪类。

/*未点击是红色*/
a:link {
    color: red
}
/*点击访问后是绿色*/
a:visited {
    color: green
}
/*鼠标光标放上面是蓝色*/
a:hover {
    color: blue
}
/*鼠标点击时是黄色*/
a:active {
    color: yellow
}

<a href="http://www.huasenjio.top/nav">花森导航</a>

2)表单中常用伪类实例

/*输入框获得光标是绿色(输入文字时刻)*/
input:focus {
    background: green;
}
/*鼠标光标放上面蓝色*/
input:hover {
    background: blue;
}
/*点击时是黄色*/
input:active {
    background: yellow;
}
...

<input type="text">

3)锚点元素的样式

div {
	height: 900px;
}

div:target {
	color: red;
}
...

<a href="#hs">huasenjio.top</a>
<div></div>
<div id="hs">
	花森笔录
</div>

4)结构伪类:first-of-type

<style>
      article span:first-of-type {
        color: red;
      }
</style>
...
<article>
  <!-- 第一个span有效果 -->
  <span>花森酱</span>
  <aside>
    <strong>导航</strong>
    <!-- 第一个有效果 -->
    <span>huasenjio.top</span>
    <!-- 不是第一个无效果 -->
    <span>huasenjio.top</span>
  </aside>
</article>

5) 结构伪类last-child(first-child同理)

article span:last-child {
	color: red;
}
<article>
	<!-- 无效果 -->
	<span>花森酱</span>
	<aside>
    <strong>导航</strong>
    <!-- 无效果 -->
    <span>huasenjio.top</span>
    <!-- 有效果 -->
    <span>huasenjio.top</span>
    <span>huasenjio.top</span>
  </aside>
</article>

6)结构伪类nth-child(n)选择n个元素

article span:nth-child(2) {
    color: red;
}
...

<article>
  <span>huasenjio</span>
  <aside>
    <span>huasenjio</span>
    <span>huasen</span>
  </aside>
  <span>huasen</span>
</article>

7)结构伪类nth-child()配合计算数量n的使用

/*奇数个td被设置样式*/
table tr>td:nth-child(2n+1) {
    background: green;
    color: white;
}
/*第三个开始设置样式*/
table tr>td:nth-child(n+3) {
    background: rgb(128, 35, 2);
    color: white;
}
/*选中前三个进行设置样式*/
table tr>td:nth-child(-n+3) {
    background: rgb(128, 35, 2);
    color: white;
}
...

<table border="1">
  <tr>
    <td>花森</td>
    <td>猪琦</td>
    <td>后盾人老师</td>
    <td>导航</td>
    <td>笔录</td>
  </tr>
</table>

8)结构伪类not(选择器或者标签)

ul li:not(:nth-child(1)) {
    background: red;
}
...

<ul>
  <li>huasen</li>
  <li>zhuqi</li>
  <li>后盾人老师</li>
</ul>

表单伪类

伪类选择器示例说明补充
:enabledinput:enabled选择每个启用的 input 元素
:disabledinput:disabled选择每个禁用的 input 元素
:checkedinput:checked选择每个被选中的 input 元素
:requiredinput:required包含required属性(必填)的元素
:optionalinput:optional不包含required属性(选填)的元素
:validinput:valid验证通过的表单元素
:invalidinput:invalid验证不通过的表单

1)表单伪类属性实例

input:enabled {
    background: red;
}

input:disabled {
    background: #dddddd;
}

input:checked+label {
    color: green;
}
input:required {
    border: solid 2px blue;
}

input:optional {
	background: #dcdcdc; 
	border: none;
}
...

<input type="text" disabled>
<input type="text" name="info">

<input type="radio" name="sex" checked id="boy">
<label for="boy">男</label>
<input type="radio" name="sex" checked id="girl">
<label for="girl">女</label>

2)表单验证伪类实例

input:valid {
    border: solid 1px green;
}

input:invalid {
    border: solid 1px red;
}
...

<form>
	<input type="email">
	<button>保存</button>
</form>

字符伪类

状态示例说明
::first-letterp:first-letter选择每个元素的首字母
::first-linep:first-line选择每个元素的首行
::beforep:before在每个元素的内容之前插入内容
::afterp:after在每个元素的内容之后插入内容

1)标签内首字母大写

p::first-letter {
  font-size: 50px;
  color: red;
}
p::first-line {
  color: gold;
}
...

<p>
  花森导航</br>
  花森导航
</p>