前端学习详细知识点讲解-CSS(第三天）

属性、伪元素、伪类选择器定义和使用以及级联

属性选择器

如何定义

根据指定的属性名称找到对应的标签, 然后设置属性
例如：
  [key] 选中所有具有key属性的元素
  [key=val] 选中所有具有key属性且值为val的元素
格式:
		[attribute]
			找到所有具有该属性名的标签, 设置属性
		[attribute=value]
			找到所有属性值为value的标签, 设置属性
		[attribute^=value]
			找到所有以value开头的标签, 无论有没有被-隔开
		[attribute$=value]
			找到所有以value结尾的标签
		[attribute~=value]
			找到拥有独立value的标签, value不可以和其他属性连接
		[attribute*=value]
			只要包含value就可以找到
			
	最常见的应用场景, 用于区分input
		input[type=password] {

		}
		<input type="text">
		<input type="password">
		<input>

如何使用

案例源代码如下：

   <input type="text">
    <input type="text" value="1111">
    <input type="text" value="2112">
    <input type="text">
    <input type="redio">

添加的CSS样式如下：

<style>
    /* 选中所有具有type属性的input框 */
    input[type] {
        height: 100px;
    }
    /* 选中所有具有type属性并且值为redio的input框 */
    input[type=redio] {
        height: 50px;
    }
    /* ^以什么开团的value值 */
    input[value^='1'] {
        background-color: red;
    }
    /* $以什么结尾的value值 */
    input[value$='2'] {
        background-color:blue;
    }
</style>

伪类选择器

如何定义

在选择器的后面使用: 用于添加特殊的效果
    	1. 与子元素相关
		:first-child	选中同级别中的第一个标签
		:last-child		选中同级别中的最后一个标签
		:nth-child(n)	选中同级别中的第n个标签
        2. 与状态相关
		:link  		未访问的链接
		:hover 		鼠标悬浮时的元素
		:active 	激活链接
		:visited 	已访问的链接
		:focus		聚焦时

如何使用

案例源代码如下：

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

    <div>
        <p>段落一</p>
        <p>段落二</p>
        <h1>
            <h2>321</h2>
            <h2>3123</h2>
        </h1>
        <h1>标题2</h1>
        <h1>标题3</h1>
        <h1>标题4</h1>
        <span>列表</span>
    </div>

CSS样式如下：

 <style>
        /* 选中ul下方的第一个li */
        ul li:first-child {
            background-color: red;
        }
        /* 选中ul下方的第二个li */
        ul li:nth-child(2) {
            background-color:royalblue;
        }  
        /* 选中ul下方的第三个li */

        ul li:nth-child(3) {
            background-color:teal;
        }
        /* 选中ul下方的第四个li */

        ul li:nth-child(4) {
            background-color:pink;
        }
        /* 选中偶数上的li */
        ul li:nth-child(even) {
            height: 100px;
        }
        /* 选中奇数上的li */
        ul li:nth-child(odd) {
            width: 100px;
        }

        div p:first-child {
            color: black;
        }
        div h1:nth-child(2) {
            color: brown;
        }
        /* 先选中div，然后在div下方选中所有的p标签，最后在找出p标签中第一个出现的元素 */
        div p:first-of-type {
            color: darkgoldenrod;
        }
        /* 先选中div，然后在div下方选中所有的p标签，最后在找出p标签中第二个出现的元素 */
        div p:nth-of-type(2) {
            color: pink;
        }
         /* 先选中div，然后在div下方选中所有的h1标签，最后在找出h1标签中第一个出现的元素 */
        div h1:first-of-type {
            color: darkgoldenrod;
        }

    </style>

效果图：

伪元素选择器

如何定义

在选择器的后面使用:: 用于添加元素
常用的有下面几个
   ::before  在当前选中的元素前面创建出一个伪元素
	::after  在当前选中的元素后面创建一个伪元素
	::first-line 伪元素用于向文本的首行添加特殊样式
	::first-letter 伪元素用于向文本的首字母添加特殊样式
	::selection 伪元素匹配用户选择的元素部分。

如何使用

案例源代码如下：

  <div class="container">
        <div>html</div>
        <div>css</div>
        <div>js</div>
        <div>vue</div>
    </div>
    <div class="content">
        <div>html</div>
        <div>css</div>
        <div>js</div>
        <div>vue</div>
    </div>

CSS样式如下：

<style>
     .container div::before{
        height: 20px;
        width: 20px;
        /* 边框样式  线宽 样式 颜色 （速写形式） */
        border: 1px solid #333;
        /* 伪元素的内容 */
        content: '-';
        /* 行内块元素 可以与其他元素共享一行空间，并且可以设置宽高 */
        display: inline-block;
        /* 文件的水平居中 */
        text-align: center;
    } 
    /* 选中类名为content的元素，选中下方第一个div，选中该div中第一个文本字符 */
    .content div:first-child::first-letter {
        font-weight: 800;
    }
    /* 选中类名为content的元素，然后选中下方的所有div，设置用户选中时的文本样式 */
    .content div::selection {
        color: blue;
    }
</style>

级联

加上上一篇的基本选择器，这些选择器都是可以指定的对HTML的内容进行CSS修饰，但彼此之前还是会有先后顺序及游览器采用CSS的顺序，这就是级联，也可以说是选择器的权重，当有多个选择器时，彼此的优先级不同

	 1. !important
        具有该属性值的样式，优先级最高

    2. 特性值（特性值越大，代表的优先级就越高，）
        内联样式                      1000
        id选择器                      100
        类选择器/伪类选择器/属性选择器  10
        标签选择器/伪元素选择器         1

    3.css代码的顺序
        谁离选中的元素近，采用谁的样式

一个简单的级联案例：

<style>
    /* 修改组件库样式的时候，也会使用!important */
    /* .one {
         color: red !important; 
    } */
    .two {
        color: blue;
    }
    #content {
        color: yellow;
    }

    #content.one {
        color: #ccc;
    }
</style>
<body>
    <div class="one two" id="content">测试内容</div>
</body>

上面的例子用来类名选择器和id选择器，都对测试内容进行修饰，但因为id选择器的优先级更高，所有使用的是id选择器的样式，而当样式后面有！important的时候，就会无视所有其他选择器，将享有最高权限的优先级，但一般不太使用