10、选择器

来源：互联网发布：人工智能的弊端英文编辑：程序博客网时间：2024/06/01 08:47

1.选择器——E[属性名]

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>E[属性名]</title><style>li[index]{background:red;}li[index][title]{background:green;}</style></head><body><ul>    <li index="apple orange banana tomato apply"></li>    <li title="xxx" index="apple tomato apply"></li>    <li index="banana tomato apply"></li>    <li index="apple orange apply"></li></ul>   </body></html>

2.选择器——E[name=value] 相等

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title><style>li[index=apple]{background:red;}</style></head><body>    <ul>        <li index="apple orange banana tomato apply"></li>        <li title="xxx" index="apple tomato apply"></li>        <li index="banana tomato apply"></li>        <li index="apple orange apply"></li>        <li index="apple"></li>    </ul></body></html>

3.选择器——包含模糊匹配

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>模糊匹配</title><style>li[index*=apple]{background:red;}/* 模糊匹配 */</style></head><body>    <ul>        <li index="apple orange banana tomato apply"></li>        <li title="xxx" index="apple tomato apply"></li>        <li index="banana tomato apply"></li>        <li index="apple orange apply"></li>        <li index="apple"></li>    </ul></body></html>

3选择器——行首行末匹配

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title><style>li[index^=apple]{background:red;}/*行首*/li[index$=tomato]{background:green;}/*行末*/</style></head><body><ul>    <li index="apple orange banana tomato apply"></li>    <li title="xxx" index="apple tomato apply tomato"></li>    <li index="banana tomato apply"></li>    <li index="apple orange apply"></li>    <li index="apple apply"></li></ul></body></html>

4.选择器——选择至结束

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title><style>li[index~=apple]{background:red;}/*选择至结束*/</style></head><body>    <ul>        <li index="appleorange banana tomato apply"></li>        <li index="appletomato apply tomato"></li>        <li index="banana tomato apply"></li>        <li index="apple orange apply"></li>        <li index="apple apply"></li>    </ul></body></html>

5.选择器——

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title><style>li[index|=apple]{ background:red;}/* /^name$/ /^name-*/ */ </style></head><body><ul>    <li index="appleorange banana tomato apply"></li>    <li index="apple- tomato apply tomato"></li>    <li index="banana apple-x tomato apply"></li>    <li index="apple orange apply"></li>    <li index="apple"></li></ul></body></html>

阅读全文

0 0