css系列-样式选择器

最新推荐文章于 2024-02-28 21:36:57 发布

前端蜗牛君

最新推荐文章于 2024-02-28 21:36:57 发布

阅读量693

点赞数 1

分类专栏： css 文章标签： css css选择器

你好，如果你感觉文章不错，不如我们一起维护，我在此宣言：文章只会改进绝对不会删除，链接永不失效。大家可以大胆收藏。

本文链接：https://blog.csdn.net/zqd_java/article/details/103129390

版权

css 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

样式选择器能让我们能够选取页面任意元素并给它设置样式。

基本选择器

选择器	示例	描述
.class（类选择器）	.intro	选择 class="intro" 的所有元素
#id （id选择器）	#firstname	选择 id="firstname" 的所有元素
* （全局选择器）	*	选择页面中所有元素
element （标签选择器）	p	选择所有p元素
element,element（标签1和标签2）	div,p	选择所有div元素和所有p元素
element element（标签1里面的标签2）	div p	选择div元素内部的所有p元素
element>element（子类选择器）	div>p	选择父元素为div元素的所有p元素
element+element（紧邻元素选择器）	div+p	选择紧接在元素div之后的p元素

  <head>
    <style>
      .intro {
        color: #1abc9c;
      }
      #idselect {
        color: #2ecc71;
      }
      * {
        color: #3498db;
      }
      div {
        color: #9b59b6;
      }
      span,
      button {
        color: #34495e;
      }
      article p {
        color: #16a085;
      }
      article > div {
        color: #f1c40f;
      }
      div + span {
        color: #95a5a6;
      }
    </style>
  </head>
  <body>
    <div class="intro">class类选择器</div>
    <div id="idselect">id选择器</div>
    全局选择器
    <div>标签选择器</div>
    <article>
      <span>标签1</span>和
      <button>标签2</button>
    </article>
    <article>
      <p>article元素里面的div元素</p>
    </article>
    <article>
      <div>article元素的子元素div1</div>
      <div>article元素的子元素div2</div>
    </article>

    <div>div元素</div>
    <span>紧邻div元素的span元素</span>
  </body>

标签选择

使用 * 可为所有元素设置样式。

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

根据标签为元素设置样式

h1 {
	color: red;
}

同时设置多个元素组合

h1,h2 {
    color: red;
}

元素在多个组件中存在

h1,h2 {
    color: red;
}
h1,h3{
    background: #dcdcdc;
}

类选择器

类选择器是为一类状态声明样式规则，下面是把文本居中定义为类样式。

.text-center {
    text-align: center;
}
...

<h1 class="text-center">类选择器</h1>
<h2 class="text-center">类选择器</h2>

将类选择器指定为具体标签

.help-block {
    background: red;
}

span.help-block {
    font-size: 12px;
    color: #aaa;
    background: none;
}
...

<span class="help-block">class为*的span标签</span>

ID选择器

为有 id 属性的元素设置样式

#container {
    background: red;
}

...
<h1 id="container">id选择器</h1>

文档中ID应该是唯一的，虽然为多个元素设置同一个ID也可以产生样式效果，但这是不符合规范的。

建议优先使用类选择器

结构选择器

选择器	示例	描述
element element	div p	选择div元素内部的所有p元素
element>element	div>p	选择父元素为div元素的所有p元素
element+element	div+p	选择紧接在元素div之后的p元素
element1~element2	p~ul	选择p后面的所有ul兄弟元素。

后面兄弟元素

用于选择后面的所有兄弟元素。

main article ~ * {
        color: green;
  }

    <main>
      <article>
        <span>article</span>
      </article>
      <h1>h1元素</h1>
      <h2>h2元素</h2>
    </main>

属性选择器

根据属性来为元素设置样式也是常用的场景。

选择器	示例	描述
[attribute]	[target]	选择带有 target 属性所有元素
[attribute=value]	[target=_blank]	选择 title 属性包含单词 "flower" 的所有元素
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 "flower" 的所有元素
[attribute\|=value]	[lang\|=en]	选择 lang 属性值以 "en" 开头的所有元素。
[attribute*=value]	a[src*="abc"]	选择其 src 属性中包含 "abc" 子串的每个元素
[attribute^=value]	a[src^="https"]	选择其 src 属性值以 "https" 开头的每个元素
[attribute$=value]	a[src$=".pdf"]	选择其 src 属性以 ".pdf" 结尾的所有元素

为具有 name属性的p标签设置样式

 p[name] {
        color: blue;
 }

 <p name="blue">name属性</p>

约束多个属性

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

<h1 class="container" id >多个属性</h1>

具体属性值设置样式

a[href="https://www.baidu.com"] {
    color: green;
}
...

<a href="https://www.baidu.com">属性值</a>
<a href="">无样式</a>

^ 以指定值开头的元素

h2[name^="zqd"] {
    color: red;
}
...

<h2 name="zqd1">zqd开头</h2>
<h2 name="zqd2">zqd开头</h2>

$ 以指定值结尾的元素

h2[name$="zqd"] {
    color: red;
}
...

<h2 name="onezqd">zqd结尾</h2>
<h2 name="twozqd">zqd结尾</h2>

* 属性内部任何位置出现值的元素

h2[name*="zqd"] {
    color: red;
}
...

<h2 name="onezqd1">任何位置出现zqd</h2>
<h2 name="twozqd2">任何位置出现zqd</h2>

~ 属性值中包含指定词汇的元素

h2[name~="zqd"] {
    color: red;
}
...

<h2 name="zqd">独立zqd</h2>
<h2 name="zqd web">zqd必须是独立单词，中间要有空格，若zqdweb则不生效</h2>

| 以指定值开头或以属性连接破折号的元素

h2[name|="zqd"] {
    color: red;
}
...

<h2 name="zqd">zqd开头</h2>
<h2 name="zqd-web">zqd连接线</h2>

伪类选择器（最重要选择器，也是难点）

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

状态	示例	说明
:link	a:link	选择所有未被访问的链接
:visited	a:visited	选择所有已被访问的链接
:hover	a:hover	鼠标移动到元素上时
:active	a:active	点击正在发生时
:focus	input::focus	选择获得焦点的 input 元素
:root	:root	选择文档的根元素即html。
:empty	p:empty	选择没有子元素的每个元素（包括文本节点）。
:first-child	p:first-child	选择属于父元素的第一个子元素的每个元素
:last-child	p:last-child	选择属于其父元素最后一个子元素每个元素。
:first-of-type	p:first-of-type	选择属于其父元素的首个元素的每个元素
:last-of-type	p:last-of-type	选择属于其父元素的最后元素的每个元素。
:only-of-type	p:only-of-type	选择属于其父元素唯一的元素的每个元素。
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个元素。
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个元素。
:nth-child(odd)	p:nth-child(odd)	选择属于其父元素的奇数元素。
:nth-child(even)	p:nth-child(even)	选择属于其父元素的偶数元素。
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个元素的每个元素。
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。
:not(selector)	:not(p)	选择非元素的每个元素

:超链接伪类

定义链接的不同状态（注意伪类使用顺序，link（或visited）- hover - active）

a:link {
    color: red
}

a:visited {
    color: green
}

a:hover {
    color: blue
}

a:active {
    color: yellow
}
...

<a href="https://www.baidu.com">百度</a>

不只是链接可以使用伪类，其他元素也可以使用。下面是对表单的点击与获取焦点状态的样式设置。

input:focus {
    background: green;
}

input:hover {
    background: blue;
}

input:active {
    background: yellow;
}
...

<input type="text">

:target

用于控制具有锚点目标元素的样式

div {
	height: 900px;
    border: 1px solid #ddd;
}

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

<a href="#zqd">zqd</a>
<div></div>
<div id="zqd">
	锚点位置
</div>

:root

根元素选择伪类即选择html

:root {
    font-size: 100px;
}

:empty

没有内容和空白的元素。下面第一个p标签会产生样式，第二个不会因为有空白内容

:empty {
    border: solid 2px red;
}
...

<p></p>
<p> </p>

结构伪类

下面来通过结构伪类选择器选择树状结构中的标签元素。

:first-child

选择元素中span 标签并且是第一个(必须同时满足这两个条件)。

      /*article中所有父元素的第一个元素并且是span的元素，
      这时span1和span2为红色，span1是article的一个元素，span2是aside的第一个元素*/
      /* article span:first-child {
        color: red;
      } */
      /*article中所有父元素的第一个元素， 这时span1和span2和p为红色，span1是article的一个元            
       素，span2是aside的第一个元素，p是div的第一个元素*/
      /* article :first-child {
        color: red;
      } */
      /*article的第一个子元素,
      这时只有span1是红色，span1是article的第一个子元素*/
      article > :first-child {
        color: red;
      }    
...

      <article>
        <span>article的第一个子元素span1</span>
        <aside>
          <span>aside的第一个子元素span2</span>
          <span>span3</span>
        </aside>
        <div>
          <p>div的第一个子元素p</p>
        </div>
      </article>

:first-of-type

选择类型是span 的第一个元素（比first-child范围大点）

article span:first-of-type {
    color: red;
}
...

<article>
    <span>article中类型是span的第一个元素</span>
    <aside>
    <strong>其他类型标签</strong>
    <span>aside中类型是span的第一个元素</span>
    </aside>
</article>

:last-child

选择元素中span 标签并且是最后一个。

article span:last-child {
    color: red;
}
...

<article>
    <span>第一个元素</span>
    <aside>
    <strong>其他元素</strong>
    <span>aside中最后一个元素并且是span元素</span>
    </aside>
    <span>article中最后一个元素并且是span元素</span>
</article>

:last-of-type

选择类型为span 的最后一个元素

article span:last-of-type {
    color: red;
}
...

<article>
    <span>第一个元素</span>
    <aside>
    <span>aside中类型是span的最后一个元素</span>
    <strong>其他元素</strong>
    </aside>
    <span>article中类型是span的最后一个元素</span>
</article>

:only-child

选择是唯一子元素的span 标签

article span:only-child {
    color: red;
}
...

<article>
    <aside>
    <span>唯一子元素并且是span</span>
    </aside>
</article>

:only-of-type

选择同级中类型是span 的唯一子元素

article span:only-of-type {
    color: red;
}
...

<article>
    <span>article第一个span元素</span>
    <aside>
    <span>aside唯一span元素</span>
    <strong>其他元素</strong>
    </aside>
    <span>article第二个span元素</span>
</article>

:nth-child(n)

选择第二个元素并且是span标签的

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

<article>
    <span>article第一个span元素</span>
    <aside>
    <span>aside第一个span元素</span>
    <strong>其他元素</strong>
    </aside>
    <span>article第二个span元素</span>
</article>

:nth-of-type(n)

选择第二个span 元素，不管中间的其他元素

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

<article>
    <span>article第一个span元素</span>
    <aside>
    <span>aside第一个span元素</span>
    <strong>其他元素</strong>
    <span>aside第二个span元素</span>
    </aside>
    <span>article第二个span元素</span>
</article>

计算数量

n为0/1/2/3... ，下面是隔列变色(奇数行odd=2n+1;偶数even=2n)

table tr>td:nth-child(2n+1) {
    background: green;
    color: white;
}
...

      <table border="1">
        <thead>
          <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>张三</td>
            <td>男</td>
            <td>15</td>
          </tr>
          <tr>
            <td>张三</td>
            <td>男</td>
            <td>15</td>
          </tr>
          <tr>
            <td>张三</td>
            <td>男</td>
            <td>15</td>
          </tr>
         ...
        </tbody>
      </table>ble>

从第三个开始设置样式

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 tr>td:nth-child(odd) {
    background: green;
    color: white;
}
...

      <table border="1">
        <thead>
          <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>张三</td>
            <td>男</td>
            <td>15</td>
          </tr>     
         ...
        </tbody>
      </table>

偶数元素

选择偶数单元格

table tr>td:nth-child(even) {
    background: green;
    color: white;
}
...

      <table border="1">
        <thead>
          <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>张三</td>
            <td>男</td>
            <td>15</td>
          </tr>     
         ...
        </tbody>
      </table>

:nth-last-child(n)

从最后一个元素开始获取

table tr>td:nth-last-child(2n+1){
    background: green;
    color: white;
}
...

      <table border="1">
        <thead>
          <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>张三</td>
            <td>男</td>
            <td>15</td>
          </tr>     
         ...
        </tbody>
      </table>

取最后两个元素

main>ul li:nth-last-child(-n+2) {
	color: red;
}

:nth-last-of-type(n)

从最后一个元素开始选择span 标签。

article span:nth-last-of-type(1) {
    background: red;
    color: white;
}
...

<article>
    <aside>
    <span>第一个span</span>
    <span>aside中最后一个span</span>
    <strong>其他</strong>
    </aside>
    <span>article中最后一个span</span>
</article>

:not(selector)

排除第一个li元素

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

<ul>
  <li>第一个</li>
  <li>第二个</li>
  <li>第三个</li>
</ul>

表单伪类

选择器	示例	说明
:enabled	input:enabled	选择每个启用的 input 元素
:disabled	input:disabled	选择每个禁用的 input 元素
:checked	input:checked	选择每个被选中的 input 元素
:required	input:required	包含`required`属性的元素
:optional	input:optional	不包含`required`属性的元素
:valid	input:valid	验证通过的表单元素
:invalid	input:invalid	验证不通过的表单

表单属性样式

input:enabled {
    background: red;
}

input:disabled {
    background: #dddddd;
}

input:checked+label {
    color: green;
}
...

<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>

表单必选样式

input:required {
    border: solid 2px blue;
}

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

<input type="text" name="title" required>
<input type="text" name="name">

表单验证样式

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

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

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

字符伪类

状态	示例	说明
::first-letter	p:first-letter	选择每个元素的首字母
::first-line	p:first-line	选择每个元素的首行
::before	p:before	在每个元素的内容之前插入内容（也适用于其他元素）
::after	p:after	在每个元素的内容之后插入内容（也适用于其他元素）

段落首行第一个字处理

      /*第一个字变大*/
      p::first-letter {
        font-size: 30px;
      }
      /*第一行文本红色*/
      p::first-line {
        color: red;
      }
...
    <p>
      这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本
      这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本
      这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本
    </p>

在元素前添加

span::before {
    content: '⇰';
    color: red;
}
span::after {
    content: '⟲';
    color: green;
}
...

<span>标题文本</span>

搜索框示例

div {
    border: solid 1px #ddd;
    width: 200px;
}

div>input[type="text"] {
    border: none;
    outline: none;
}

div>input[type="text"]+span:after {
    content: "\21AA";
    font-size: 14px;
    cursor: pointer;
}
...

<div>
	<input type="text"><span></span>
</div>

添加属性内容

h2::before {
	content: attr(title);/*读取title属性值*/
}
...

<h2 title="标题">热爱生活</h2>

前端蜗牛君

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css系列-样式选择器

样式选择器能让我们能够选取页面任意元素并给它设置样式。基本选择器选择器示例描述 .class（类选择器） .intro 选择 class="intro" 的所有元素 #id （id选择器） #firstname 选择 id="firstname" 的所有元素 * （全局选择器） * 选择页面中所有元素 element （标...
复制链接

扫一扫