CSS常用选择器

CSS常用选择器

https://www.w3school.com.cn/css/index.asp

参考手册https://www.w3school.com.cn/cssref/index.asp

基本选择器

id选择器

选择具体的id树属性值的元素,建议在html页面调用的时候id值唯一

定义:#id属性值 {}

   #idtest {
            color: aqua;
            font-family: 'Courier New';
            font-size: larger;
        }

调用,用id标识调用div

    <div id="idtest">   hello    </div>

元素选择器

选择具有相同标签名称的元素

定义：标签名称{}

 div {
            color: #dd001b;
            font-size: larger;
            font-style: normal;
        }

调用：直接使用标签

<div>  Demo   </div>

注意：id选择器优先级高于元素选择器，即标签名称调用id选择器的时候会优先使用id选择器的属性

类选择器

选择具有相同的class属性值的元素

可以用于多个标签/ id最好只用于一个标签

定义：.class{}

 
        .div {
            color: blue;
            font-size: larger;
            font-style: normal;
            text-align: center;
        }

调用

   <p class="div">Hello World</p>

注意：类选择器优先级高于元素选择器

扩展选择器

通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素。（没有被其他选择器所指定的，优先级最低）

语法：*{}

* {
  text-align: center;
  color: blue;
}

并集选择器

选择并设置所有

样式和所有

元素的样式：同时设置两种

        h1,
        p {
            background-color: #f1662a;
        }

    <h1> 并集选择器 </h1>
    <p> 并集选择器 </p>

子选择器

筛选 选择器1 元素下的 选择器2 元素

语法：选择器1 选择器2{}

div p{ 
	background-color:yellow;
}

测试

	<div>
        <p>66666666</p>
	</div>
    <p>6666</p>

父选择器

选取父元素是

元素的每个

元素，并设置其背景色：

        div>p {
            background-color: #3faaf2;
        }

	<div>
        <p>父选择器</p>
    </div>
    <div>父选择器</div>

属性选择器

选择元素名称，属性名=属性值的元素（通常用在input标签）

语法：元素名称[属性名称="属性值"]{}

 input[type="text"] {
            background-color: yellow;
        }

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

伪类选择器

选择一些元素具有的状态

语法：元素:状态{}

:link	初始化的状态
:visited 被访问过的状态
:active 正在访问的状态
:hover 鼠标悬浮状态

 		 a:link {
            color: black;
        }
        
        a:visited {
            color: aqua;
        }
        
        a:active {
            color: red;
        }
        
        a:hover {
            color: purple;
        }

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