Получить элемент CSS-селектор (если у него нет идентификатора)

Я пытаюсь изменить страницу с помощью JavaScript/CSS (так же, как Стильный или Greasemonkey). Это очень сложная страница (которую я не создавал или не могу изменить предварительную визуализацию), что затрудняет конструкцию селектора CSS (вручную глядя на структуру документа). Как я могу достичь этого?

Ответ 1

Использовать FireFox с установленным FireBug.

Щелкните правой кнопкой мыши любой элемент
Выберите "Осмотреть элемент"
Щелкните правой кнопкой мыши элемент в дереве HTML
Выберите "Копировать XPath" или "Копировать CSS-путь"

Выход для постоянной ссылки на этот ответ (XPath):

/HTML/тело/DIV [4]/дел [2]/дел [2]/дел [2]/дел [3]/стол/TBODY/TR/TD [2]/стол/TBODY/TR/TD/DIV/а

Путь к CSS:

html body.question-page div.container div # content div # mainbar div # отвечает div # answer-4588287.answer table tbody tr td table.fw tbody tr td.vt div.post-menu a

Но относительно этого комментария:

Мое последнее намерение - создать css селектор для объекта...

Если это ваше намерение, может быть проще использовать JavaScript:

var uniquePrefix = 'isThisUniqueEnough_';
var counterIndex = 0;
function addCssToElement(elem, cssText){
    var domId;
    if(elem.id)domId=elem.id;
    else{
        domId = uniquePrefix + (++counterIndex);
        elem.id = domId;
    }
    document.styleSheets[0].insertRule("#"+domId+"{"+cssText+"}");
}

Последняя строка может потребоваться для разных браузеров по-разному. Не тестировалось.

Ответ 2

function fullPath(el){
  var names = [];
  while (el.parentNode){
    if (el.id){
      names.unshift('#'+el.id);
      break;
    }else{
      if (el==el.ownerDocument.documentElement) names.unshift(el.tagName);
      else{
        for (var c=1,e=el;e.previousElementSibling;e=e.previousElementSibling,c++);
        names.unshift(el.tagName+":nth-child("+c+")");
      }
      el=el.parentNode;
    }
  }
  return names.join(" > ");
}

console.log(  fullPath( $('input')[0] ) );
// "#search > DIV:nth-child(1) > INPUT:nth-child(1)"

Кажется, это то, о чем вы просите , но вы можете понять, что это не гарантирует однозначного определения только одного элемента. (В приведенном выше примере все входные данные для сестер также будут сопоставлены.)

Изменить: Изменен код для использования nth-child вместо классов CSS, чтобы правильно устранить проблему для одного ребенка.

Ответ 3

Я обнаружил, что могу реально использовать этот код из источника chrome devtools, чтобы решить эту проблему без этих изменений.

После добавления соответствующих методов из WebInspector.DOMPresentationUtils в новое пространство имен и исправления некоторых различий я просто вызываю их так:

> UTILS.cssPath(node)

Пример реализации см. css_path.js

Ответ 4

Проверьте эту библиотеку генератора селекторов CSS @medv/finder

Создает кратчайшие селекторы
Уникальные селекторы на странице
Стабильные и надежные селекторы
Gzip 2,9 кБ и уменьшенный размер

Пример сгенерированного селектора:

.blog > article:nth-child(3) .add-comment

Ответ 5

вы можете использовать для псевдо-классов css first-child, если этот элемент является первым потомком в таблице div или body..etc

вы можете использовать функцию jquery nth child().

http://api.jquery.com/nth-child-selector/

пример из jquery.com

<!DOCTYPE html>
<html>
<head>
  <style>

  div { float:left; }
  span { color:blue; }
  </style>
  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
  <div><ul>
    <li>John</li>
    <li>Karl</li>
    <li>Brandon</li>

  </ul></div>
  <div><ul>
    <li>Sam</li>
  </ul></div>

  <div><ul>
    <li>Glen</li>
    <li>Tane</li>
    <li>Ralph</li>

    <li>David</li>
  </ul></div>
<script>$("ul li:nth-child(2)").append("<span> - 2nd!</span>");</script>

</body>
</html>

мои 2 цента, если я правильно понял вопрос.

Ответ 6

function getCssSelector(el)
{
    names = [];
    do {
        index = 0;
        var cursorElement = el;
        while (cursorElement !== null)
        {
            ++index;
            cursorElement = cursorElement.previousElementSibling;
        };
        names.unshift(el.tagName + ":nth-child(" + index + ")");
        el = el.parentElement;
    } while (el !== null);

    return names.join(" > ");
}