CSS属性选择器与基础选择器

最新推荐文章于 2020-12-20 15:54:12 发布

云杰8了

最新推荐文章于 2020-12-20 15:54:12 发布

阅读量156

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_50821119/article/details/110823313

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

在这里插入图片描述

通关下边小游戏下边文章你已完全掌握。小游戏

前言

为了单独设置某个标签的样式，我们需要选择器，下面详细介绍几种选择器。

提示：以下是本篇文章正文内容，下面案例可供参考

1、id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id类名诗独一无二的。

语法E#id名称 {
属性：值；
}
代码如下（示例）：

#para1{
    text-align:center;
    color:red;
}
  <div id="para1">形势下</div>

2 、类选择器

类选择器可以为 HTML 元素指定样式。一个元素可以有多个类名。

语法：.类名 {
属性：值；
}
代码如下（示例）：

  .lei {
            color: orange;
        }
   <div class="lei">
        类选择器
    </div>

3、标签选择器

标签选择器就是标签名；

语法：标签名{
属性：值；
}
代码如下（示例）：

  	div {
  	color:red;
  	}
   <div >
        类选择器
    </div>

4、通配符选择器

选择页面上所有的标签名，然后添加样式。

语法：*{
属性：值；
}
代码如下（示例）：

  <div>标签1</div>
    <p>标签2</p>
    <h2>标签3</h2>
   
      * {
            color: orange;
        }

5、后代选择器

选中所有被元素1包含的元素2，就会被选中,包含元素2中的所有元素，命中所有符合条件的后代，包括儿子，孙子，孙子的孙子…

语法：选择器1 选择器2{
属性：值；
}
代码如下（示例）：

 <style>
	/* 后代选择器(选择器1 选择器2) */
	  .demo div {
          border:1px solid #f00;
        }
</style>
<div class="demo">
	<div>0
		<div>1</div>
		<div>2</div>
		<div>3</div>
	</div>
</div>

6、子代选择器

选中所有被元素1包含的元素2，只会选中子元素。

语法：选择器1 选择器2{
属性：值；
}
代码如下（示例）：

 <style>
	/* 包含选择符(选择器1 选择器2) */
	  .demo>div {
	   /* 此例中.demo.属于父元素，.a属于子元素，.c和.b属于孙子级别的元素，
	   只选中子元素，所有只有.a有边框 */
            border: 1px solid #f00;
        }
</style>
 <div class="demo">
        <div class="a">
            <div class="b">子选择符</div>
            <div class="c">子选择符</div>
        </div>
    </div>

7、相邻兄弟选择器

选中元素1之后紧挨着的元素2，元素1与2必须同属一个父级。.

语法：选择器1+选择器2{
属性：值；
}
代码如下（示例）：

<style>
	/* 相邻兄弟选择器，h3标签之后紧挨是内容为p1的元素，还有p3,只要符合这种嵌套规则，就会变色 */	
	h3 + p { color: #f00; }
	
</style>
<h3>这是一个标题</h3>
<p>p1</p>
<p>p2</p>
<h3>这是一个标题</h3>
<p>p3</p>
<p>p4</p>

8、兄弟选择器

选中选择元素1后面的所有兄弟元素2，元素1与2必须同属一个父级.

语法：选择器1~选择器2{
属性：值；
}
代码如下（示例）：

<style>
	 h3~p {
            /* 第一个h3之后有两个p，兄弟选择器不必紧挨，满足在，h3标签之后，且都是p标签就会被选中， */
            border: 1px solid #f00;
        }
	
</style>
<h3>这是一个标题</h3>
<p>p1</p>
<p>p2</p>
<h3>这是一个标题</h3>
<p>p3</p>
<p>p4</p>

9、属性选择器

对带有指定属性的 HTML 元素设置样式。
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
E为标签名 att为标签的属性 val为标签属性的值

E[att]

选择具有att属性的E元素。

语法：
` [属性名]
案例

	[title] {
color:red;
	}


  <h1>可以应用样式：</h1>
    <h2 title="Hello world">Hello world</h2>
    <a title="baidu" href="http://baidu.com.cn">百度</a>

    <hr />

    <h1>无法应用样式：</h1>
    <h2>Hello world</h2>

E[att=“val”]

选择具有att属性且属性值等于val的E元素。

语法：
` [属性=“属性值”]
案例

  [title="baidu"] {
            border: 5px solid blue;
        }

<p title="baidu">百度</p>
    <p>百度</p>

E[att~=“val”]

att属性中有一个值为val的值就可以。

语法：
` [属性~=“属性值”]
案例

下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：

 <style type="text/css">
        [title~=hello] {
            color: red;
        }
    </style>
 <h1>可以应用样式：</h1>
    <h2 title="hello world">Hello world</h2>
    <p title="student hello">Hello students!</p>
    <hr />
    <h1>无法应用样式：</h1>
    <h2 title="world">Hello world</h2>
    <p title="student">Hello students!</p>

下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：

[lang|=en] { color:red; }


  [lang|=en] {
            color: red;
 }
 <h1>可以应用样式：</h1>
    <p lang="en">Hello!</p>
    <p lang="en-us">Hi!</p>
    <hr />

    <h1>无法应用样式：</h1>
    <p lang="us">Hi!</p>
    <p lang="zh">Hao!</p>

E[att^=“val”]

选择具有att属性且属性值为以val开头的字符串的E元素。

div[class^="a"] {
	border: 2px solid #000;
}
<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>

此例，将会命中1, 2两个div，因为匹配到了class属性，且属性值以a开头

E[att$=“val”]

选择具有att属性且属性值为以val结尾的字符串的E元素。

div[class$="c"] {
	border: 2px solid #000;
}
<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>

此例，将会命中1, 3两个div，因为匹配到了class属性，且属性值以c结尾

E[att*=“val”]

选择具有att属性且属性值为包含val的字符串的E元素。

div[class*="b"] {
	border: 2px solid #000;
}
<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>

此例，将会命中所有div，因为匹配到了class属性，且属性值中都包含了b

E[att|=“val”]

选择具有att属性，其值是以val开头并用连接符"-"分隔的字符串的E元素；如果值仅为val，也将被选择。

div[class|="a"] {
	border: 2px solid #000;
}
<div class="a">0</div>
<div class="a-test">1</div>
<div class="b-test">2</div>
<div class="c-test">3</div>

在这个例子中，前2个div将会被命中：
第1个div，拥有class属性，并且值为a，所以被命中；
第2个div，拥有class属性，值是a开头并紧跟着连接符“-”，所以被命中；

伪类选择器

E:link 、E:visited、 E:hover、 E:active

E:link(一般很少用) 设置可以被访问的超链接被之前的颜色，也就是没有别点击之前的颜色。
E:visited 设置超链接a在其链接地址已被访问过时的样式。
E:hover 设置元素在其鼠标悬停时的样式。
E:active 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。

如果需要给超链接定义：访问前，鼠标悬停，当前被点击，已访问这4种伪类效果，而又没有按照一致的书写顺序，不同的浏览器可能会有不同的表现
超链接的4种状态，需要有特定的书写顺序才能生效。

超链接状态顺序：
  a:link {color: red; }
  a:visited { color: green; }
  a:hover { color: grey;}
  a:active {  color: black;}
<a href="http://pay.qq.com">qq支付</a>

注意，a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后
可靠的顺序是：l(link)ov(visited)e h(hover)a(active)te, 即用喜欢(love)和讨厌(hate)两个词来概括。

E:focus

设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式，针对表单元素。

 input:focus {
            background-color: sienna;
        }

账户名：<input type="text">

webkit内核浏览器会默认给:focus状态的元素加上outline的样式。

E:lang(fr)

匹配使用特殊语言的E元素。

p:lang(zh-cmn-Hans) {
	color: #f00;
}
p:lang(en) {
	color: #090;
}

<p lang="zh-cmn-Hans">大段测试文字</p>
<p lang="en">english</p>

E:not(s)

匹配不含有s选择符的元素E。
有了这个选择符，那么你将可以很好的处理类似这样的场景：假定有个列表，每个列表项背景色为红色，但是最后一项不需要红色。

  li:not(:last-child) {
            background-color: red;
        }

 <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

E:first-child

匹配父元素的第一个子元素E。
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素
这里可能存在误解：

<ul>
	<li>列表项一</li>
	<li>列表项二</li>
	<li>列表项三</li>
	<li>列表项四</li>
</ul>

在上述代码中，如果我们要设置第一个li的样式，那么代码应该写成li:first-child{color:red;}

<div>
	<p>我是一个p</p>
</div>

p:first-child{color:#f00;}

上边p变成红色


<div>
	<h2>我是一个标题</h2>
	<p>我是一个p</p>
</div>

p:first-child{color:#f00;}

在p之前加一个h2之后。p不属于div的第一个孩子

E:last-child

匹配父元素的最后一个子元素E。
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素
这里可能存在误解：

<ul>
	<li>列表项一</li>
	<li>列表项二</li>
	<li>列表项三</li>
	<li>列表项四</li>
</ul>

在上述代码中，如果我们要设置最后一个li的样式，那么代码应该写成li:last-child{color:red;}

<div>
	<p>我是一个p</p>
</div>

p:last-child{color:#f00;}

上边p变成红色


<div>
	<p>我是一个p</p>
	<h2>我是一个标题</h2>
</div>

p:last-child{color:#f00;}

在p之后加一个h2之后。p不属于div的最后一个孩子

E:only-child

匹配父元素仅有的一个子元素E。

  <ul>
        <li>结构性伪类选择符 E:only-child</li>
    </ul>
    <h1>有多个子元素</h1>
    <ul>
        <li>结构性伪类选择符 E:only-child</li>
        <li>结构性伪类选择符 E:only-child</li>
        <li>结构性伪类选择符 E:only-child</li>
    </ul>

  h1 {
            font-size: 16px;
      }
        
   li:only-child {
           color: #f00;
    }

E:nth-child(n)

匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素
该选择符允许使用一个乘法因子(n)来作为换算方式，比如我们想选中所有的偶数子元素E，那么选择符可以写成：E:nth-child(2n)
使用E:nth-child(n)实现奇偶：

<style>
li:nth-child(2n){color:#f00;} /* 偶数 */
li:nth-child(2n+1){color:#000;} /* 奇数 */
</style>

<ul>
	<li>列表项一</li>
	<li>列表项二</li>
	<li>列表项三</li>
	<li>列表项四</li>
</ul>因为(n)代表一个乘法因子，可以是0, 1, 2, 3, ..., 所以(2n)换算出来会是偶数，而(2n+1)换算出来会是奇数

该选择符允许使用一些关键字，比如：odd, even

使用odd, even实现奇偶：

<style>
li:nth-child(even){color:#f00;} /* 偶数 */
li:nth-child(odd){color:#000;} /* 奇数 */
</style>

<ul>
	<li>列表项一</li>
	<li>列表项二</li>
	<li>列表项三</li>
	<li>列表项四</li>
</ul>关键字odd代表奇数，even代表偶数

<div>
	<p>第1个p</p>
	<p>第2个p</p>
	<span>第1个span</span>
	<p>第3个p</p>
	<span>第2个span</span>
	<p>第4个p</p>
	<p>第5个p</p>
</div>

CSS Case 1：

p:nth-child(2){color:#f00;}很明显第2个p会被命中然后变成红色

CSS Case 2：

p:nth-child(3){color:#f00;}这是会命中第3个p么？如果你这么认为那就错了，这条选择符就不会命中任何一个元素。

CSS Case 3：

p:nth-child(4){color:#f00;}这时你以为会命中第4个p，但其实命中的却是第3个p，因为它是第4个子元素

E:nth-child(n)会选择父元素的第n个子元素E，如果第n个子元素不是E，则是无效选择符，但n会递增。

E:nth-last-child(n)

匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。

 <style>
        p:nth-last-child(2) {
            color: #f00;
        }
    </style>
      <div>
        <p>第1个p</p>
        <p>第2个p</p>
        <span>第1个span</span>
        <p>第3个p</p>
        <span>第2个span</span>
    </div>

选择div中的倒数第二个元素就是p。

E:first-of-type

匹配父元素下第一个类型为E的子元素。

 <style>
        p:first-of-type {
            color: #f00;
        }
    </style>
      <div>
        <p>第1个p</p>
        <p>第2个p</p>
        <span>第1个span</span>
        <p>第3个p</p>
        <span>第2个span</span>
    </div>

第一个p变成红色。

E:last-of-type

匹配父元素下最后一个类型为E的子元素。

 <style>
        p:last-of-type {
            color: #f00;
        }
    </style>
      <div>
        <p>第1个p</p>
        <p>第2个p</p>
        <span>第1个span</span>
        <p>第3个p</p>
        <span>第2个span</span>
    </div>

最后一个p变成红色

E:only-of-type

匹配父元素的所有子元素中唯一的那个子元素E。

<style>
        p:only-of-type {
            color: #f00;
        }
    </style>

<div>
        <p>第1个p</p>
        <p>第2个p</p>
        <span>第1个span</span>
        <p>第3个p</p>
        <span>第2个span</span>
    </div>
    <div>
        <p>我是唯一的p</p>
        <span>第2个span</span>
    </div>

第一个div下有两个span，不是唯一，第二个div下只有一个p。

云杰8了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS属性选择器与基础选择器

CSS选择器详解文章目录CSS选择器详解前言1、id选择器2 、类选择器3、标签选择器4、通配符选择器5、后代选择器6、子代选择器7、相邻兄弟选择器8、兄弟选择器9、属性选择器E[att]E[att="val"]E[att~="val"]E[att^="val"]E[att$="val"]E[att*="val"]E[att|="val"]伪类选择器E:link 、E:visited、 E:hover、 E:activeE:focusE:lang(fr)E:not(s)E:first-childE:las
复制链接

扫一扫