CSS学习5

复合选择器

  • 前言
  • 一、交集选择器
  • 二、并集选择器
  • 三、后代选择器
  • 四、子元素选择器
  • 五、属性选择器
  • 六、伪元素选择器(css3)

前言

复合选择器是由两个或多个基础选择器组成的。


一、交集选择器

  1. 由两个选择器构成,第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格。

  2. 使用较少,不建议。

<html>
	<head>
		<style>
			.red {
				color: red;
			}
			p.red {
				font-size: 12px;
			}
		style>
	head>
	<body>
		<div class="red">12div>
		<p class="red">234p>
	body>
html>

二、并集选择器

  1. 如果样式完全相同或者部分相同,使用并集选择器集体声明。
  2. 并集选择器,和的意思,用逗号隔开,所有选择器执行后面的样式。
<html>
	<head>
		<style>
			div,
			p {
				font-size: 12px;
			}
		style>
	head>
	<body>
		<div>12div>
		<p>234p>
		<h1>78h1>
	body>
html>

三、后代选择器

外层标签写外面,内层标签写里面。

<html>
	<head>
		<style>
			div p {
				font-size: 12px;
			}
		style>
	head>
	<body>
		<div>
			<p>12p> 
		div>
		<p>234p>
	body>
html>

四、子元素选择器

<html>
	<head>
		<style>
			.nav li { /*空格 选择儿子、孙子、重孙子*/
				font-size: 12px;
			}
			.nav > li { /*大于号 只选择亲儿子*/
				color: pink;
			}
		style>
	head>
	<body>
		<ul class="nav">
			<li>一级菜单
				<ul>
					<li>二级菜单 li>
				ul>
			li>
		ul>
	body>
html>

五、属性选择器

  1. 选择标签带有特殊属性的选择器。
  2. 用中括号表示[]
  • a[title]
  • a[title=“123”]
  • div[class^=font]表示font开头
  • div[class$=footer]表示footer结尾
  • div[class*=tao]表示任意位置含有tao
<html>
	<head>
		<style>
			a[title] {
				color: red;
			}
		style>
	head>
	<body>
		<a title="123">qwea>
		<a>a>
	body>
html>

六、伪元素选择器(css3)

  • E::first-letter 选择第一个字
  • E::first-line 选择第一行
  • E::selection 选中文字时候的变化样式
<html>
	<head>
		<style>
			/*.demo 类选择器
			:first-child 伪类选择器
			:first-letter 伪元素选择器*/
			p::first-letter {
				font-size: 50px;
			}
			p::first-line {
				color: green;
			}
			p::selection {
				color: pink;
			}
		style>
	head>
	<body>
		<p>p>
	body>
html>

在内部前面或者内部后面插入。

  • E::before
  • E::after
<html>
	<head>
		<style>
			div::before {
				content: "我";
			}
			div::after {
				content: "18岁";
			}
		style>
	head>
	<body>
		<div>今年div>
	body>
html>

你可能感兴趣的:(css学习,css)