• 中文
    • English
  • 注册
  • 查看作者
  • 2:CSS选择器

    一.  标签选择器

    根据标签名选择元素。语法:标签名{}

    p{
    color:red;
    }
    /*将该样式应用到所有的p标签*/

    二.  类选择器

    根据class属性选择元素。语法:.className{}

    注意,class属性的值可重复

    .jia{
    color:red;
    }
    /*将该样式应用到所有class名为jia的元素*/

    三.  ID选择器

    根据id属性的值选择元素。语法:#idName{}

    注意,id属性的值不可重复

    #jia{
    color:red;
    }
    /*将该样式应用到id名为jia的元素*/

    四.  通用选择器

    通用选择器,可以同时选中页面中的所有元素。语法:*{}

    *{
    color:red;
    }
    /*将该样式所有元素*/

    五.  复合选择器

    复合选择器(交集),可以同时使用多个选择器,这样可以选择同时满足多个选择器的元素

    语法:选择器1选择器2{}  ,注意两个选择器是紧挨着的,下面的p.zj是因为class的选择器是.zj

    选择器一必须是标签选择器,第二个必须是类选择器或者ID选择器;这两个选择器之间不能有空格。

    <!DOCTYPE html>
    <html>
    	<head>
    		<title> 标题 </title>
    		<meta charset='UTF-8'/>
    		<style>
    			p.zj{
    				color:red;
    			}
    		</style>	
    	</head>
    	<body>
    		<p class = "zj">
    		段落一
    		</p>
    		<p>
    		段落二
    		</p>
    	</body>
    </html>

    2:CSS选择器

    六.  群组选择器

    群组选择器(并集),可以同时使用多个选择器,多个选择器将被同时应用指定的样式。

    语法:选择器1,选择器2,选择器3{}

    <!DOCTYPE html>
    <html>
    	<head>
    		<title> 标题 </title>
    		<meta charset='UTF-8'/>
    		<style >
    			p,.zj,#jia{
    				color:red;
    			}
    		</style>	
    	</head>
    	<body>
    		<p class = "zj">
    		段落一
    		</p>
    		<p id ="jia">
    		段落二
    		</p>
    		<p >
    		段落三
    		</p>
    		<div>
    		段落四
    		</div>
    	</body>
    </html>

       2:CSS选择器

    七.  标签之间的关系

    • 祖先元素:直接或间接包含后代元素的元素

    • 后代元素:直接或间接被祖先元素包含的元素

    • 父元素:直接包含子元素的元素

    • 子元素:直接被父元素包含的元素

    • 兄弟元素:拥有相同父元素的元素

    <!DOCTYPE html>
    <html>
    	<head>
    		<title> 标题 </title>
    		<meta charset='UTF-8'/>
    			
    			
    	</head>
    	<body>
    		<div>
    			<span>
    				<p>
    				</p>
    			</span>
    		</div>
    		
    		<hr />
    	</body>
    </html>

    body标签是div、span、p、hr 标签的祖先元素
    div、span、p、hr 标签是body的后代元素
    body是div的父元素,div是span的父元素,span是p的父元素
    div是body的子元素,span是div的子元素,p是span是子元素
    head 和 body 标签是兄弟元素,hr和div也是兄弟元素

    八.  后代选择器

    后代选择器可以根据标签之间的关系,为处在元素内部的后代元素设置样式

    语法:祖先元素 后代元素 后代元素{}

    <!DOCTYPE html>
    <html>
    	<head>
    		<title> 标题 </title>
    		<meta charset='UTF-8'/>
    		<style >
    			div span{
    				color:blue;
    			}
    		</style>	
    	</head>
    	<body>
    		<div>
    			<span>
    			张甲博客
    			</span>
    		</div>
    		<br />
    	    <span>
    			张甲博客
    		</span>
    	</body>
    </html>

    2:CSS选择器

    九.  子元素选择器

    子元素选择器可以给一个元素的子元素设置样式

    语法:父元素>子元素{}

    <!DOCTYPE html>
    <html>
    	<head>
    		<title> 标题 </title>
    		<meta charset='UTF-8'/>
    		<style >
    			div>p{
    				color:blue;
    			}
    		</style>	
    	</head>
    	<body>
    		<div>
    			<p>
    				张甲博客
    			</p>
    		</div>
    	   	<div>
    			<span>
    				<p>
    					张甲博客
    				</p>
    			</span>
    		</div>
    		
    		<p>
    			张甲博客
    		</p>
    	</body>
    </html>

    2:CSS选择器

    十.  兄弟选择器

    除了根据祖先父子关系,还可以根据兄弟关系查找元素

    语法:

    查找后面一个兄弟元素 :兄弟元素+兄弟元素{}

    <!DOCTYPE html>
    <html>
    	<head>
    		<title> 标题 </title>
    		<meta charset='UTF-8'/>
    		<style >
    			div+p{
    				color:blue;
    			}
    		</style>	
    	</head>
    	<body>
    		<div>
    			张甲博客
    		</div>
    	
    		<p>
    			张甲博客
    		</p>
    	
    		<p>
    			张甲博客
    		</p>
    	</body>
    </html>

    2:CSS选择器

    查找后边所有的兄弟元素 : 兄弟元素~兄弟元素{}

    <!DOCTYPE html>
    <html>
    	<head>
    		<title> 标题 </title>
    		<meta charset='UTF-8'/>
    		<style >
    			div~p{
    				color:blue;
    			}
    		</style>	
    	</head>
    	<body>
    		<div>
    			张甲博客
    		</div>
    	
    		<p>
    			张甲博客
    		</p>
    	
    		<p>
    			张甲博客
    		</p>
    	</body>
    </html>

    2:CSS选择器

    十一.  伪类和伪元素

    有时候,需要选择本身没有标签,但是仍然易于识别的网页部位,比如段落首行或鼠标滑过的连接。CSS为他们提供一些选择器:伪类和伪元素

    1.  链接

    正常链接(未访问过的)

    a:link {
        color:red;
    }

    访问过的链接(历史记录里存在的,且只能定义字体颜色)

    a:visited {
        color:green;
    }

    鼠标悬浮的链接

    a:hover {
       color:yellow;
    }

    正在点击的链接

    a:active {
     color:pink;
    }

    2.  其他伪类

    <!DOCTYPE html>
    <html>
    	<head>
    		<title> 标题 </title>
    		<meta charset='UTF-8'/>
    		<style type="text/css">
    		/* 获取获取焦点:focus */
    		input:focus {
    			background-color:red;
    		}
    		
    		/* 选中的元素::selection */
    		p::selection {
    			color:yellow;
    			background-color:blue;
    		}
    
    		</style>	
    	</head>
    	<body>
    		<input type="text" />
    		<p>哈哈哈哈<p>
    	</body>
    </html>

    山东省·济宁市
  • 0
  • 0
  • 0
  • 1.5k
  • 十二

    请登录之后再进行评论

    登录
    单栏布局 侧栏位置: