选择器进阶笔记

时间：2023-02-03 16:30:00 高压电阻器5w500m

选择器进阶

一.选择器后代

1.概念和特征

根据嵌套关系，选择器可以选择元素的所有后代元素。 语法： 选择器1 选择器2... 选择器N {     内容 } 结果：     在选择器1中找到标签的后代(儿子.孙子...）找到符合选择器2的标签，并设置样式 注意：     如果选择器1找到的标签没有后代，选择器2就不会执行     选择间隔开选择器间

2.代码案例

DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Documenttitle>     <style> div p { 
           color: red; } style> head> <body>     <p>这是pp>     <div>         <p>这是div的儿子pp>
    div>
body>
html>

3.输出

二.子代选择器

1.概念和特点

2.代码案例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style> /* 只选择儿子 */ div > a { 
           color: red; } /* 选孙子 */ div p a { 
           color: #000; } style>
head>
<body>
    <div>
        父级
        <a href="#">div->aa>
        <p>
            <a href="#">div->p->aa>
        p>
    div>
body>
html>

3.输出

三.并集选择器

1.概念和特点

并集选择器 
    选择器间用逗号隔开
    同时选择多组标签，设置同一样式
    语法：
        选择器1,选择器2 {css}
    结果：
        找到选择器1和选择器2并设置样式
    注意：
        1.并集选择器的每组选择器可以是基础选择器或者是复合选择器
        2.通常一行写一个，提高代码可读性

2.代码案例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style> /* p div span h1 文字设置为红色 */ p, div, span, h1 { 
           color: blue; } h2, a { 
           color: chartreuse; } style>
head>
<body>
    <p>pppp>
    <div>divdiv>
    <span>spanspan>
    <h1>h1h1>

    <h2>h2h2>

    <a href="#">hahahaha>
body>
html>

3.输出

四.交集选择器

1.概念和特点

条件:
	交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。
	
语法：
	其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。
	
记忆技巧：
	交集选择器 是 并且的意思。  即...又...的意思
	
比如：   
	p.one   选择的是： 类名为 .one  的 段落标签。

2.代码案例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style> /* 用p标签的box类 */ p.box { 
           color: brown; } style>
head>
<body>
    
    <p class="box">boxp>
    <p>ppppppp>
    <div class="box">div--boxdiv>
body>
html>

3.输出

五.hover伪类选择器

1.概念和特点

 hover伪类选择器
    作用：
        选中鼠标悬停元素的状态，设置样式
        任何标签的可以设置
    语法：
        选择器:hover{css} 
    注意点：
        1.伪类选择器元素的某种状态

2.代码案例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style> a:hover { 
           color:green; } style>
head>
<body>
    
    <a href="#">超链接a>
body>
html>

3.输出

悬停前

悬停后

六.emmet语法

1.语法使用

div ------<div>div>
div.red ------<div class="red">div>
div#one ------<div id="one">div>
p.red#one ------<p class="red" id="one">p>
ul>li ------<ul><li>li>ul>
ul>li{我是li的内容} ------<ul><li>我是li的内容li>ul>
ul>li*3 ------<ul><li>li><li>li><li>li>ul>

2.代码案例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style> div { 
           /* h300+w500+bgc */ height: 300px; width: 500px; background-color: #fff; } style>
head>
<body>
    
    <div class="red blue">div>
    
    <div class="red">div>
    
    <div>div>
    <p>p>
    
    <div>
        <p>p>
    div>
    
    <ul>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
    ul>
    
    
    <ul>
        <li>111li>
        <li>222li>
        <li>333li>
    ul>
    
    <ul>
        <li>1li>
        <li>2li>
        <li>3li>
    ul>
    
body>
html>

锐单商城拥有海量元器件数据手册、IC替代型号，打造电子元器件IC百科大全！

选择器进阶笔记

相关文章